/* DentalSuite — سیستم طراحی پنل کلینیک
   سرمه‌ای (navy) برای ساختار و کنش‌ها، فیروزه‌ای (cyan) برای انتخاب و تأکید،
   و قرمز فقط برای هشدار پزشکی و خطا.
   همه‌ی فاصله‌ها و جهت‌ها منطقی‌اند (inline-start/end) تا RTL و LTR هر دو درست کار کنند. */

:root {
  --ground: #F2F6FA;
  --surface: #FFFFFF;
  --surface-2: #F6F9FC;
  --ink: #0F1D33;
  --ink-2: #43546B;
  --ink-3: #5C6B80;   /* کمی تیره‌تر از قبل: #66768C روی زمینه‌ی روشن به ۴٫۵ نمی‌رسید */
  --line: #D6DFEA;
  --line-strong: #B5C3D4;

  /* سرمه‌ای: نوار کناری، دکمه‌ها، لینک‌ها، عنوان‌های پررنگ */
  --navy-950: #081A33;
  --navy-900: #0D2A52;
  --navy-800: #143A6E;
  --navy-700: #1B4A8A;

  /* فیروزه‌ای: انتخاب، نشانگر فعال، حلقه‌ی فوکوس. روی سفید متن نمی‌شود — کنتراست کم دارد. */
  --cyan-500: #0AAFC4;
  --cyan-400: #2FCFE2;
  --cyan-300: #7FE3EE;
  --cyan-100: #CFF5FA;
  --cyan-50: #ECFBFD;

  --alert-700: #9F1D13;
  --alert-600: #B42318;
  --alert-200: #F4B7B0;
  --alert-50: #FEF3F1;
  --amber-700: #854A06;
  --amber-500: #D98E1F;
  --amber-100: #FBE6C2;
  --amber-50: #FFF8EA;
  --ok-700: #1A6B3E;
  --ok-50: #EBF6EF;

  --font: "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(10 175 196 / 0.35);
  --sidebar-w: 15.5rem;

  /* «سطحِ پُر»: نوار کناری، دکمه‌ی اصلی، چیزی که انتخاب شده.
     این‌ها از رنگ‌های سرمه‌ای جدا شدند چون نقششان فرق دارد: --navy-900 هم رنگِ *متنِ*
     عنوان است و هم پس‌زمینه‌ی دکمه. در حالت تیره این دو باید در دو جهت مخالف بروند —
     متن روشن شود و پس‌زمینه پُر بماند — پس نمی‌توانند یک توکن باشند. */
  --fill: var(--navy-700);
  --fill-strong: var(--navy-900);
  --fill-mid: var(--navy-800);
  --fill-deep: var(--navy-950);
  --fill-ink: #FFFFFF;

  /* دکمه‌ی ویرانگر هم همان دوگانگی را دارد: --alert-600 هم متنِ هشدار است هم پس‌زمینه‌ی
     دکمه. در حالت تیره متن باید روشن شود و پس‌زمینه تیره بماند تا سفیدِ رویش خوانده شود. */
  --danger-fill: #B42318;
  --danger-fill-strong: #9F1D13;

  /* سایه در حالت روشن از سرمه‌ای می‌آید؛ در تیره باید سیاهِ خالص باشد وگرنه دیده نمی‌شود. */
  --shadow-hue: 8 26 51;
}

/* ---------- حالت تیره ---------- */
/* مطب‌ها عصر و شب کار می‌کنند و صفحه‌ی سفیدِ تمام‌قد خسته‌کننده است.
   فقط مقدارِ توکن‌ها عوض می‌شود، نه هیچ قاعده‌ی دیگری — هر چیزی که رنگش را از توکن
   می‌گیرد خودبه‌خود درست درمی‌آید. برگه‌های چاپ عمداً دست‌نخورده می‌مانند: کاغذ سفید است. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B1522;
    --surface: #121E2E;
    --surface-2: #17253A;
    --ink: #E7EEF7;
    --ink-2: #AEBFD2;
    --ink-3: #8698AE;
    --line: #253449;
    --line-strong: #3A4E69;

    --navy-950: #CDE0F5;
    --navy-900: #BAD4F0;
    --navy-800: #9CBFE4;
    --navy-700: #8CB4DE;

    --fill: #1E5798;
    --fill-strong: #2A6CB5;
    --fill-mid: #24619F;
    --fill-deep: #0E2540;

    --cyan-500: #23C2D6;
    --cyan-400: #46D8E8;
    --cyan-300: #1D5A66;
    --cyan-100: #15414B;
    --cyan-50: #10303A;

    --alert-700: #FFB4A8;
    --alert-600: #E5584A;
    --alert-200: #6B2A22;
    --alert-50: #34160F;
    --amber-700: #F0C07A;
    --amber-500: #D98E1F;
    --amber-100: #5C3F14;
    --amber-50: #2E2210;
    --ok-700: #86D9A6;
    --ok-50: #102E1D;

    --danger-fill: #C0392B;
    --danger-fill-strong: #A32C20;

    --shadow-hue: 0 0 0;
    --ring: 0 0 0 3px rgb(35 194 214 / 0.4);
  }
}

/* همان مقدارها برای وقتی که کاربر خودش تیره را انتخاب کرده — این بلوک از روی
   بلوکِ بالا ساخته می‌شود و دستی ویرایش نمی‌شود. */
:root[data-theme="dark"] {
  --ground: #0B1522;
  --surface: #121E2E;
  --surface-2: #17253A;
  --ink: #E7EEF7;
  --ink-2: #AEBFD2;
  --ink-3: #8698AE;
  --line: #253449;
  --line-strong: #3A4E69;

  --navy-950: #CDE0F5;
  --navy-900: #BAD4F0;
  --navy-800: #9CBFE4;
  --navy-700: #8CB4DE;

  --fill: #1E5798;
  --fill-strong: #2A6CB5;
  --fill-mid: #24619F;
  --fill-deep: #0E2540;

  --cyan-500: #23C2D6;
  --cyan-400: #46D8E8;
  --cyan-300: #1D5A66;
  --cyan-100: #15414B;
  --cyan-50: #10303A;

  --alert-700: #FFB4A8;
  --alert-600: #E5584A;
  --alert-200: #6B2A22;
  --alert-50: #34160F;
  --amber-700: #F0C07A;
  --amber-500: #D98E1F;
  --amber-100: #5C3F14;
  --amber-50: #2E2210;
  --ok-700: #86D9A6;
  --ok-50: #102E1D;

  --danger-fill: #C0392B;
  --danger-fill-strong: #A32C20;

  --shadow-hue: 0 0 0;
  --ring: 0 0 0 3px rgb(35 194 214 / 0.4);
}


/* ---------- پایه ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.85;
  color: var(--ink);
  background: var(--ground);
}

h1, h2, h3 { margin: 0; line-height: 1.5; font-weight: 600; }
h1 { font-size: var(--fs-xl); color: var(--navy-900); }
h2 { font-size: var(--fs-l); }
h1:focus { outline: none; }
p { margin: 0; }
a { color: var(--navy-700); text-underline-offset: 0.3em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.muted { color: var(--ink-3); }
.pre { white-space: pre-line; }
.icon { flex: none; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

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

/* ---------- بارگذاری اولیه و خطای Blazor ---------- */

.boot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-block-size: 100dvh;
  color: var(--ink-2);
}

.boot-spinner {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 2px solid var(--cyan-100);
  border-block-start-color: var(--navy-700);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { rotate: 1turn; } }

#blazor-error-ui {
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--amber-50);
  border-block-start: 1px solid var(--amber-100);
  color: var(--amber-700);
}

#blazor-error-ui .dismiss {
  margin-inline-start: 1rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--fs-l);
}

/* ---------- پوسته: نوار کناری + محتوا ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-block-size: 100dvh;
}

/* «sticky» لایه‌ی چیدنِ خودش را می‌سازد و پنجره‌ی زنگوله‌ی اعلان‌ها فقط درونِ همین لایه بالا می‌رود. بی z-index هر چیزِ
   جای‌گرفته‌ی محتوا (کارتِ ویجت، میان‌بُرها، سربرگ) که پس از نوار می‌آید رویِ آن پنجره کشیده می‌شد. ۳۰ بالاتر از محتوای صفحه
   (سربرگِ چسبانِ پرونده ۲۰) است و پنجره‌های مودال (تقویمِ تاریخ ۳۰، جست‌وجو ۴۰…) که پس از نوار می‌آیند هنوز رویش می‌نشینند. */
.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(--fill-deep);
  color: #D3DEEE;
}

/* فهرستِ بلندتر از صفحه باید داخل خودش بلغزد، نه اینکه از پس‌زمینه‌ی سرمه‌ای بیرون بزند.
   «min-block-size: 0» شرط لازم است: آیتم فلکس پیش‌فرض کوچک‌تر از محتوایش نمی‌شود و
   بدون آن هیچ overflowای اثر ندارد — همین بود که با زیادشدن آیتم‌های منو، نوار کناری شکست. */
.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 > .sidebar-top,
.sidebar > .me { flex: none; }

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

/* عنوان گروه: نه لینک است نه دکمه — فقط چشم را دسته‌بندی می‌کند، بی آن‌که چیزی را
   پشت یک کلیک پنهان کند. فهرستِ جمع‌شونده برای پنلی که کاربرش روزی صد بار بینش
   جابه‌جا می‌شود، یک کلیکِ اضافه روی هر کار است. */
.nav-group {
  margin-block: 1.125rem 0.375rem;
  padding-inline: 0.625rem;
  color: #7E9BC4;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.nav-group:first-of-type { margin-block-start: 0.75rem; }

/* فقط زیر ۵۶rem دیده می‌شود؛ در دسکتاپ فهرست همیشه باز است و دکمه معنا ندارد. */
.nav-toggle {
  display: none;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: #D3DEEE;
  cursor: pointer;
}

.nav-toggle:hover { background: rgb(255 255 255 / 0.08); }

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 0.375rem;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  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-text { display: grid; line-height: 1.5; }
.brand-clinic { color: #fff; font-weight: 600; }
.brand-product { color: #8EABD1; font-size: var(--fs-xs); }

.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }

.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;
}

.nav a:hover { background: rgb(255 255 255 / 0.06); }
.nav a.active { background: rgb(255 255 255 / 0.1); border-inline-start-color: var(--cyan-400); color: #fff; }
.nav a.active .icon { color: var(--cyan-400); }

.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; 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: #9DB8DD;
  font-size: var(--fs-s);
  text-decoration: none;
  cursor: pointer;
}

.me-link:hover, .me-link.active { color: #fff; }

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

/* ---------- راهنمای آشنایی ---------- */
/* عمداً مودال نیست و صفحه را قفل نمی‌کند: کاربر باید هم‌زمان خود بخش را ببیند. */

.tour {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: 40;
  display: grid;
  gap: 0.625rem;
  inline-size: min(22rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(11, 26, 48, 0.18);
}

.tour-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.tour-head h2 { margin: 0; font-size: var(--fs-m); color: var(--navy-900); }
.tour-body { margin: 0; color: var(--ink-2); }
.tour-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.tour-never {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  cursor: pointer;
}

.tour-never:hover { color: var(--ink-2); }

@media (max-width: 56rem) {
  .tour { inset-inline: 1rem; inline-size: auto; }
}

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

  /* در موبایل نوار کناری یک سربرگِ چسبان می‌شود و فهرست پشت دکمه می‌رود.
     ردیفِ افقیِ قبلی با این تعداد لینک عملاً کار نمی‌کرد: کاربر باید کورکورانه
     می‌لغزید تا شاید چیزی را که می‌خواهد ببیند. */
  .sidebar {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    block-size: auto;
    gap: 0;
    padding: 0.5rem 1rem;
  }

  .nav-toggle { display: inline-grid; }

  /* بسته هیچ جایی نمی‌گیرد؛ باز، تا بلندای صفحه با اسکرول خودش. */
  .nav-scroll { display: none; margin-block: 0.625rem; max-block-size: min(60dvh, 28rem); }

  .sidebar.is-open .nav-scroll { display: block; }
  .sidebar:not(.is-open) .me { display: none; }

  /* پیوندهای کاربر کنارِ هم و در چند ردیف. پیش‌تر یک ردیفِ نشکن بود (grid-auto-flow: column) و با هفت پیوند از لبه‌ی گوشی بیرون
     می‌زد — با منوی باز کلِ صفحه افقی می‌لغزید. */
  .me {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin-block-start: 0;
    padding: 0.625rem 0.625rem 0;
  }

  /* هشدارِ «هنوز به سرور نرسیده» یک ردیفِ کامل می‌گیرد، نه یک خانه میانِ پیوندها. */
  .me .logout-warning { flex: 1 1 100%; }

  .me-name, .brand-product { display: none; }
}

/* ---------- سربرگ صفحه ---------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin-block-end: 1.5rem;
}

/* عنوان همه‌ی فضای خالی را می‌گیرد و کنش‌ها کنار هم در لبه‌ی انتهایی (در RTL: چپ) می‌نشینند.
   پیش‌تر space-between بود: با دو دکمه یا بیشتر، دکمه‌ها در کل عرض پخش می‌شدند و یکی وسط صفحه
   معلق می‌ماند — ترتیبِ راست‌به‌چپ از دست می‌رفت. این قاعده برای همه‌ی صفحه‌هاست. */
.page-head > :first-child { margin-inline-end: auto; }

.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.eyebrow { color: var(--ink-2); font-size: var(--fs-s); }

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-block-end: 0.25rem;
  color: var(--ink-2);
  font-size: var(--fs-s);
  text-decoration: none;
}

.back:hover { color: var(--navy-700); }

.lead { color: var(--ink-2); margin-block-end: 1.25rem; max-inline-size: 42rem; }

/* ---------- دکمه ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.5rem;
  padding: 0.375rem 1.125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover { border-color: var(--navy-700); color: var(--navy-700); }
.btn-primary { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); }
.btn-primary:hover { background: var(--fill-strong); border-color: var(--fill-strong); color: var(--fill-ink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-small { min-block-size: 2rem; padding: 0.125rem 0.75rem; font-size: var(--fs-s); }
.btn-block { inline-size: 100%; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-danger { background: var(--danger-fill); border-color: var(--danger-fill); color: var(--fill-ink); }
.btn-danger:hover { background: var(--danger-fill-strong); border-color: var(--danger-fill-strong); color: var(--fill-ink); }

/* کنشِ ویرانگر که دکمه‌ی اصلی نیست: رنگش هشدار می‌دهد ولی وزنش سنگینی نمی‌کند. */
.btn-danger-ghost { color: var(--alert-600); }
.btn-danger-ghost:hover { border-color: var(--alert-200); background: var(--alert-50); color: var(--alert-700); }
.btn-push-end { margin-inline-start: auto; }

/* ---------- پنل و پیام‌ها ---------- */

.panel {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 0.75rem;
}

/* دکمه‌ی کنارِ عنوان روی گوشی دوخطی می‌شد («چاپ / لیست»)؛ عنوان جا باز کند، نه دکمه. */
.panel-head > .btn { flex-shrink: 0; white-space: nowrap; }

.panel-link { font-size: var(--fs-s); }
.panel-wide { grid-column: 1 / -1; }

.banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  margin-block-end: 1rem;
  border-radius: var(--r-m);
  font-size: var(--fs-s);
}

.banner-amber { background: var(--amber-50); border: 1px solid var(--amber-100); color: var(--amber-700); }
.banner-ok { background: var(--ok-50); color: var(--ok-700); }
/* خبر، نه هشدار: چیزی که قرار است اتفاق بیفتد، با رنگ خود برنامه. */
.banner-calm { background: var(--cyan-50); color: var(--navy-900); }

.notice-error {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--alert-200);
  border-radius: var(--r-m);
  background: var(--alert-50);
  color: var(--alert-700);
}

.notice-error .icon { margin-block-start: 0.3rem; }

.empty {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink-2);
  text-align: center;
}

/* ---------- وضعیت، برچسب ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  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); border: 1px solid var(--amber-100); color: var(--amber-700); }
.pill-muted { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); }

.chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.chip {
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--cyan-50);
  color: var(--navy-900);
  font-size: var(--fs-xs);
  line-height: 1.9;
  white-space: nowrap;
}

.chip-doctor { background: var(--surface); border: 1px solid var(--navy-700); }

/* ---------- جستجو ---------- */

.search-block { margin-block-end: 1.25rem; }
.search-field { position: relative; display: flex; align-items: center; }

.search-field .icon {
  position: absolute;
  inset-inline-start: 1rem;
  color: var(--ink-3);
  pointer-events: none;
}

.search-field input {
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding-inline: 3rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  font-size: var(--fs-l);
}

.search-field input:focus { outline: none; border-color: var(--navy-700); box-shadow: var(--ring); }
.search-field-small .icon { inset-inline-start: 0.75rem; }
.search-field-small input { min-block-size: 2.5rem; padding-inline: 2.5rem 0.75rem; border-radius: var(--r-m); font-size: var(--fs-m); }
.search-hint { margin-block-start: 0.375rem; color: var(--ink-3); font-size: var(--fs-xs); }
.result-count { margin-block-end: 0.5rem; color: var(--ink-2); font-size: var(--fs-s); }

/* ---------- جدول داده ---------- */

.table-wrap {
  overflow: auto;
  max-block-size: calc(100dvh - 15rem);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.table-wrap-flat { max-block-size: none; border: 0; border-radius: 0; }

table.data {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-s);
  line-height: 1.7;
}

.data th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  padding: 0.625rem 1rem;
  border-block-end: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
}

.data td { padding: 0.5rem 1rem; border-block-end: 1px solid var(--line); vertical-align: middle; }
.data tbody tr:last-child td { border-block-end: 0; }
.data tbody tr { position: relative; }
.data tbody tr:hover { background: var(--cyan-50); }
.data tbody tr.is-selected { background: var(--amber-50); }

.data .group-row th {
  position: static;
  background: var(--ground);
  color: var(--navy-900);
  font-size: var(--fs-s);
  font-weight: 600;
}

/* کل ردیف با یک لینک واقعی قابل کلیک است، نه با onclick روی tr */
.row-link { color: var(--ink); font-weight: 500; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.data tbody tr:has(.row-link:focus-visible) { outline: 2px solid var(--navy-700); outline-offset: -2px; }
.row-inactive td, .row-inactive .row-link { color: var(--ink-3); }

.col-check { inline-size: 3rem; }
.col-check input { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--navy-700); }
.col-money { text-align: end; }
/* عنوانِ ستونِ مبلغ هم‌ترازِ عددهای زیرش؛ «.data th» پیش‌تر آن را به شروع می‌برد. */
.data th.col-money { text-align: end; }
.unit { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
/* بی pre-line: خط‌شکستنِ کدِ Razor نباید خطِ خالی یا شکستِ بی‌جا بسازد. یادداشتِ کاربر که چندخطی است کلاسِ «pre» هم می‌گیرد. */
.note-line { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }

.file-no {
  display: inline-block;
  min-inline-size: 3.25rem;
  padding-inline: 0.5rem;
  border-radius: var(--r-s);
  background: var(--cyan-50);
  color: var(--navy-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.tooth-no {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2rem;
  padding-inline: 0.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  font-weight: 600;
}

.surfaces { color: var(--ink-2); margin-inline-start: 0.375rem; }

@media (max-width: 40rem) {
  .hide-sm { display: none; }
  .data th, .data td { padding-inline: 0.625rem; }
}

/* ---------- فرم ---------- */

.form-card { display: grid; gap: 1.25rem; }
.form-narrow { max-inline-size: 30rem; }
.form-medium { max-inline-size: 46rem; }

.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);
}

.form-section legend { padding-inline: 0.5rem; font-size: var(--fs-l); font-weight: 600; color: var(--navy-900); }
.form-section > .hint { margin-block-end: 0.75rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  align-items: start;
  gap: 1rem 1.25rem;
}

.form-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.doctor-fields, .form-grid-spaced { margin-block-start: 1rem; }

.field { display: grid; gap: 0.25rem; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field + .field-block { margin-block-start: 1.25rem; }
.field label, .field .label, .label { font-size: var(--fs-s); font-weight: 500; }
.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; }
.hint-ok { color: var(--ok-700); }

/* :where() عمداً است: وزنِ این قاعده باید کم بماند. پیش‌تر `.field input:not(...)` وزنِ (۰،۲،۱) داشت و
   هر قاعده‌ی خاص‌ترِ درون فیلد را می‌بلعید — فاصله‌ی ذره‌بینِ جست‌وجو (`.search-field input`)، جای
   دکمه‌ی تقویم (`.jdate-input`) و دکمه‌ی نمایش رمز (`.password-field input`) صفر می‌شد و متن زیرِ
   آیکون می‌رفت. حالا هر قاعده‌ای با یک کلاس و یک تگ برنده است، همان‌طور که نویسنده‌اش خواسته بود. */
.field :where(input:not([type="radio"], [type="checkbox"], [type="range"]), textarea, select) {
  inline-size: 100%;
  min-block-size: 2.625rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
}

/* ترتیبِ دیداری در هر فیلد: برچسب، کنترل، راهنما، خطا. در markup راهنما پیش از کنترل است تا
   صفحه‌خوان پیش از تایپ بخواندش (aria-describedby هم دارد)؛ ولی راهنمای میانِ برچسب و کنترل،
   کنترلِ همان فیلد را از هم‌ردیف‌هایش پایین‌تر می‌نشاند و ردیفِ فرم ناهم‌تراز می‌شد. */
.field > .hint { order: 1; }
.field > .field-error { order: 2; }

.field textarea { min-block-size: 5.5rem; line-height: 1.8; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--navy-700); box-shadow: var(--ring); }

/* فیلدهای LTR (موبایل، تاریخ، کد ملی) در صفحه‌ی RTL هم‌لبه‌ی بقیه‌ی فیلدها بمانند */
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }

/* ورودیِ داخل سلول جدول (کسورات هر نفر در لیست حقوق): جمع‌وجورتر از فیلد فرم،
   ولی نه کوچک‌تر از ناحیه‌ی لمسیِ قابل استفاده. والد `.field` ندارد، پس قاعده‌ی خودش را می‌خواهد. */
.cell-input {
  inline-size: 100%;
  min-inline-size: 6rem;
  min-block-size: 2.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  font: inherit;
}

.cell-input:focus { outline: none; border-color: var(--navy-700); box-shadow: var(--ring); }
[dir="rtl"] .cell-input[dir="ltr"] { text-align: right; }

/* خطا فقط بعد از تعامل کاربر؛ aria-invalid را FormErrors هم‌زمان با نمایش پیام می‌گذارد */
.field [aria-invalid="true"] { border-color: var(--alert-600); background: var(--alert-50); }

.field-error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--alert-700);
  font-size: var(--fs-xs);
}

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.segmented {
  display: inline-flex;
  gap: 0.1875rem;
  inline-size: fit-content;
  padding: 0.1875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.segment { position: relative; }
.segment input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segment span { display: block; padding: 0.25rem 0.875rem; border-radius: 7px; color: var(--ink-2); }
.segment input:checked + span { background: var(--surface); color: var(--navy-900); font-weight: 500; box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.16); }
.segment input:focus-visible + span { outline: 2px solid var(--navy-700); outline-offset: 1px; }
.segmented-small .segment span { padding: 0.0625rem 0.625rem; font-size: var(--fs-s); }

/* در ردیفِ فرم، کنترلِ گزینه‌ای هم‌قدِ خانه‌های متنی است تا کنترل‌های یک ردیف روی یک خط بنشینند. */
.field .segmented { min-block-size: 2.625rem; }
.field .segment { display: grid; }
.field .segment span { display: grid; align-items: center; }

.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; }

.check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 2.75rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  cursor: pointer;
}

.check input { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--navy-700); }
.check:has(input:checked) { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); }
.check-critical input { accent-color: var(--alert-600); }
.check-critical:has(input:checked) { border-color: var(--alert-600); background: var(--alert-50); color: var(--alert-700); }
.check:has(input:focus-visible) { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.check-compact { min-block-size: 2.5rem; }
.check.is-disabled { opacity: 0.55; cursor: not-allowed; }
.check-inline { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-s); cursor: pointer; }
.filter-toggle { margin-block-end: 0.75rem; }

.checks-roles { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.role-option { align-items: flex-start; padding-block: 0.625rem; }
.role-option input { margin-block-start: 0.4rem; }
.role-option small { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }

.password-field { position: relative; }
.password-field input { padding-inline-end: 3rem; }

.password-toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0.25rem;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  border: 0;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}

.password-toggle:hover { color: var(--navy-700); }

.password-reveal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.password-reveal input { flex: 1 1 12rem; min-inline-size: 0; }

/* رمز موقت را آدم از روی صفحه می‌خواند و به دیگری می‌گوید؛ حروف هم‌شکل باید از هم جدا باشند */
.temp-password {
  inline-size: fit-content;
  padding: 0.25rem 1rem;
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-900);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs-xl);
  font-weight: 600;
}

.temp-password-inline { padding: 0 0.5rem; font-size: var(--fs-m); }
.created-panel { display: grid; gap: 0.75rem; justify-items: start; }
.created-panel h2 { display: flex; align-items: center; gap: 0.5rem; color: var(--ok-700); }

.account-panel { display: grid; gap: 1rem; margin-block-start: 1.25rem; }
.account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.reset-field { max-inline-size: 36rem; }

/* ---------- کلید روشن/خاموش (تنظیمات) ---------- */

.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding-block: 0.875rem;
  border-block-end: 1px solid var(--line);
  cursor: pointer;
}

.toggle-row:last-of-type { border-block-end: 0; }
.toggle-row strong { display: block; font-weight: 600; }
.toggle-row small { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.8; }

input[role="switch"] {
  appearance: none;
  position: relative;
  flex: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  margin: 0.2rem 0 0;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color 0.15s;
}

input[role="switch"]::before {
  content: "";
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.3);
  transition: inset-inline-start 0.15s;
}

input[role="switch"]:checked { background: var(--fill); }
input[role="switch"]:checked::before { inset-inline-start: calc(100% - 1.3125rem); }
input[role="switch"]:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* ---------- انتخاب با کارت (پزشک، دسته، خدمت) ---------- */

.choice-field { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.choice-field > legend { margin-block-end: 0.375rem; padding: 0; }
.choice-cards { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.choice-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  cursor: pointer;
}

.choice-card input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice-card small { color: var(--ink-3); font-size: var(--fs-xs); }
.choice-card:hover { border-color: var(--navy-700); }
.choice-card:has(input:checked) { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--navy-700); }
.choice-card:has(input:focus-visible) { outline: 2px solid var(--navy-700); outline-offset: 2px; }

.service-picker { display: grid; gap: 0.75rem; }

.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
}

.category-card {
  display: grid;
  gap: 0.125rem;
  justify-items: start;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s;
}

.category-card:hover { border-color: var(--navy-700); }
.category-card.is-active { background: var(--fill-mid); border-color: var(--fill-mid); color: var(--fill-ink); }
.category-card.is-active .category-count { color: var(--cyan-300); }
.category-name { font-weight: 600; }
.category-count { color: var(--ink-3); font-size: var(--fs-xs); }

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.625rem;
}

.service-card {
  position: relative;
  display: grid;
  gap: 0.25rem;
  align-content: start;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-block-start-width: 4px;
  border-block-start-color: transparent;
  border-radius: var(--r-l);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, background-color 0.12s;
}

.service-card input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.service-card:hover { border-color: var(--navy-700); border-block-start-color: var(--cyan-300); }
.service-card:has(input:checked) { border-color: var(--navy-700); border-block-start-color: var(--cyan-500); background: var(--cyan-50); }
.service-card:has(input:focus-visible) { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.service-name { font-weight: 600; line-height: 1.6; }
.service-price { color: var(--navy-700); font-weight: 600; font-variant-numeric: tabular-nums; }
.service-price small { color: var(--ink-3); font-weight: 400; }
.service-meta { display: flex; flex-wrap: wrap; gap: 0.125rem 0.5rem; color: var(--ink-3); font-size: var(--fs-xs); }
.service-code { font-weight: 600; }

/* ---------- نسخه ---------- */

.rx-card { margin-block-start: 0.75rem; break-inside: avoid; }

.rx-items {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-inline-start: 1.25rem;
}

.rx-items li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
}

/* ---------- ثبت سریع (مودال) ---------- */

.quick-register {
  position: fixed;
  inset-block-start: 3rem;
  inset-inline: 50%;
  translate: 50% 0;
  inline-size: min(44rem, calc(100vw - 2rem));
  max-block-size: min(85vh, 48rem);
  overflow-y: auto;
  z-index: 41;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
}

/* ---------- ویجت‌های پیشخوان ---------- */

.widget-bar { display: flex; justify-content: flex-end; margin-block-end: 0.5rem; }

.widget-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 0.5rem;
  padding: 0.875rem;
  margin-block-end: 1rem;
}

/* ---------- حالت‌های نمایش فهرست بیماران ---------- */

/* سوییچ یکپارچه: سه حالت یک کنترل‌اند، نه سه دکمه‌ی جدا. */
.view-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.view-switch button {
  display: grid;
  place-items: center;
  min-inline-size: 2.25rem;
  min-block-size: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

.view-switch button { border-color: transparent; background: transparent; border-radius: calc(var(--r-m) - 3px); }
.view-switch button:hover { color: var(--navy-700); }
.view-switch button.is-active { border-color: var(--line); background: var(--surface); color: var(--navy-900); box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.08); }

/* ---------- کارت بیمار ----------
   چهار طبقه، به ترتیبِ سؤال‌های میز پذیرش: کیست (نام و پرونده) ← کی آمد و کی می‌آید ← چه
   باید بدانم (هشدار پذیرش، گروه) ← چه کنم (تماس، نوبت). با min() تا در ۳۶۰px هم بیرون نزند. */
.patient-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 0.875rem;
}

.patient-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.patient-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px -8px rgb(var(--shadow-hue) / 0.22); }
.patient-card:has(.patient-card-name:focus-visible) { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* هشدار پزشکی: نوارِ قرمز در لبه‌ی شروع (راستِ کارت در فارسی)، همان‌جا که چشم خواندن را آغاز
   می‌کند. پدینگ به همان اندازه کم می‌شود تا محتوای کارت‌ها در یک ستون هم‌تراز بماند. */
.patient-card.has-medical-alert {
  border-inline-start: 4px solid var(--alert-600);
  padding-inline-start: calc(1rem - 3px);
}

.pc-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.pc-id { display: grid; gap: 0.125rem; min-inline-size: 0; }

.pc-name { margin: 0; font-size: var(--fs-m); font-weight: 600; line-height: 1.5; }

.patient-card-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* یک لینک واقعی که کل کارت را می‌پوشاند — نه onclick روی article. */
.patient-card-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.patient-card-name:focus-visible { outline: none; }

.pc-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.8;
}

.pc-medical {
  display: inline-flex;
  align-items: center;
  align-self: start;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--alert-200);
  border-radius: var(--r-pill);
  background: var(--alert-50);
  color: var(--alert-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* دو واقعیتِ زمانی کنار هم، در یک زمینه‌ی آرام؛ عددِ نسبی درشت، تاریخِ دقیق زیرش. */
.pc-visits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.pc-visits > div { display: grid; align-content: start; gap: 0.125rem; min-inline-size: 0; }
.pc-visits dt { display: flex; align-items: center; gap: 0.25rem; color: var(--ink-3); font-size: var(--fs-xs); }
.pc-visits dd { display: grid; justify-items: start; margin: 0; color: var(--ink); font-size: var(--fs-s); }
.pc-visits dd strong { font-weight: 600; }
.pc-date { color: var(--ink-3); font-size: var(--fs-xs); }
.pc-none { color: var(--ink-3); }

/* نوبتِ همین امروز تنها چیزی است که در این ردیف باید از دور دیده شود. */
.pc-today {
  padding: 0 0.375rem;
  border-radius: var(--r-s);
  background: var(--cyan-100);
  color: var(--navy-900);
}

.pc-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

.pc-alert {
  display: flex;
  flex: 1 1 100%;
  align-items: start;
  gap: 0.375rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-s);
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: var(--fs-xs);
  line-height: 1.8;
}

.pc-alert .icon { flex: none; margin-block-start: 0.2em; }

/* متنِ بلندِ هشدار دو خط می‌شود و بقیه در title می‌ماند؛ کارت‌های یک ردیف هم‌قد بمانند. */
.pc-alert > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.pc-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.pc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block-start: 0.625rem;
  margin-block-start: auto;   /* کارتِ کم‌محتوا در ردیفِ بلند: کنش‌ها ته کارت، نه وسطش */
  border-block-start: 1px solid var(--line);
}

/* کنش‌ها روی پوششِ لینکِ اصلی؛ بی z-index کلیک روی آن‌ها پرونده را باز می‌کرد. */
.pc-actions a { position: relative; z-index: 1; }

.pc-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: 2rem;
  padding-inline: 0.375rem;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: var(--fs-s);
  text-decoration: none;
}

.pc-phone:hover { background: var(--surface-2); color: var(--navy-700); }
.pc-phone:focus-visible { outline: none; box-shadow: var(--ring); }

.pc-end { display: inline-flex; align-items: center; gap: 0.5rem; }

.pc-go {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--ink-3);
  font-size: var(--fs-s);
}

.patient-card:hover .pc-go { color: var(--navy-700); }

/* نشانِ هشدار پزشکی کنار نام در نمای جدولی — همان قرمزِ کارت، کوچک‌تر. */
.med-mark { display: inline-flex; color: var(--alert-600); }

@media (prefers-reduced-motion: reduce) {
  .patient-card { transition: none; }
}

/* حروف اول نام. رنگ فقط برای تمایز چشمی میان ردیف‌هاست و معنایی حمل نمی‌کند. */
.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-sm { inline-size: 2rem; block-size: 2rem; font-size: var(--fs-xs); }
.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); }

.name-cell { display: inline-flex; align-items: center; gap: 0.625rem; }

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 0.75rem;
}

.list-toolbar .result-count { margin: 0; }

.list-pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.875rem;
  color: var(--ink-2);
  font-size: var(--fs-s);
}

.list-pager select {
  min-block-size: 2.25rem;
  padding-inline: 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
}

/* فشرده: همان جدول با ردیف‌های کم‌ارتفاع‌تر، ولی ناحیه‌ی کلیک همچنان لمسی */
.data-compact td,
.data-compact th { padding-block: 0.375rem; }

.data-compact .row-link { display: block; min-block-size: 2rem; }

.list-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 0.75rem;
}

/* ---------- جستجوی سراسری (Ctrl+K) ---------- */

.palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.35);
  z-index: 40;
}

.palette {
  position: fixed;
  inset-block-start: 4rem;
  inset-inline: 50%;
  translate: 50% 0;
  inline-size: min(36rem, calc(100vw - 2rem));
  max-block-size: min(70vh, 32rem);
  overflow-y: auto;
  z-index: 41;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
}

.palette-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid var(--line);
}

.palette-field input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
}

.palette-field input:focus { outline: none; }

.palette-hint {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s, 6px);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.palette-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.palette-row:hover,
.palette-row.is-active { background: var(--cyan-50); }

.palette-name { min-inline-size: 0; }

.palette-empty { padding: 1rem; margin: 0; }

/* ---------- پیشخوان: نوار «الان» ---------- */

/* تنها جای پیشخوان که وزن بصری دارد. زمینه‌ی تیره عمدی است: چشم اول این‌جا می‌افتد و بعد
   روی پنل‌های روشنِ پایین می‌رود — نه برعکس. */
.pulse {
  align-items: stretch;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.375rem;
  border-radius: var(--r-l);
  background: linear-gradient(135deg, var(--fill-strong), var(--fill-mid));
  color: #fff;
}

.pulse .eyebrow { color: #A9C2E4; }
.pulse h1 { color: #fff; }
.pulse .today-date { color: #C6D7EC; }
.pulse .muted { color: #A9C2E4; }
.pulse a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

/* قاعده‌ی عمومیِ page-head اولین فرزند را با margin خودکار جلو می‌راند؛ این‌جا نتیجه‌اش یک
   حفره‌ی خالیِ بزرگ وسط نوار بود. ستونِ «الان» خودش فضای میانی را پر می‌کند. */
.pulse > :first-child { margin-inline-end: 0; }
.pulse-main { flex: 0 0 auto; min-inline-size: 0; }

/* ستونِ «الان» با یک خط از عنوانِ صفحه جدا می‌شود، نه با کادر: کادر یعنی دو چیزِ جدا، و
   این‌ها یک چیزند. */
.pulse-now {
  display: grid;
  align-content: center;
  gap: 0.25rem;
  flex: 1 1 22rem;
  min-inline-size: 0;
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid rgb(255 255 255 / 0.28);
}

.pulse-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; }
.pulse-line-live { font-size: var(--fs-l); }

/* نقطه‌ی «زنده». نبضش با prefers-reduced-motion خاموش می‌شود. */
.pulse-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--cyan-500);
  box-shadow: 0 0 0 0 rgb(10 175 196 / 0.75);
  animation: pulse-beat 2s ease-out infinite;
}

@keyframes pulse-beat {
  70% { box-shadow: 0 0 0 0.5rem rgb(10 175 196 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(10 175 196 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

.pulse-progress {
  block-size: 0.375rem;
  margin-block-start: 0.5rem;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.28);
  overflow: hidden;
}

.pulse-progress span { display: block; block-size: 100%; border-radius: var(--r-pill); background: var(--cyan-500); }
.pulse-progress-note { margin: 0.25rem 0 0; color: #A9C2E4; font-size: var(--fs-xs); }

.pulse-action { display: grid; gap: 0.375rem; justify-items: center; flex: none; align-self: center; }
.pulse-action-more { color: #A9C2E4; font-size: var(--fs-xs); }

/* روی موبایل ستون‌ها روی هم می‌روند، پس خطِ جداکننده باید افقی شود. */
@media (max-width: 48rem) {
  .pulse-now {
    padding-inline-start: 0;
    padding-block-start: 0.875rem;
    border-inline-start: 0;
    border-block-start: 1px solid rgb(255 255 255 / 0.28);
  }
}

/* ---------- پیشخوان ---------- */

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 60rem) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ویجت و چیدمان ---------- */

.widget { position: relative; min-inline-size: 0; border-radius: var(--r-l); }
.widget-wide { grid-column: 1 / -1; }

.widget-bar { flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.widget-bar-hint { margin-inline-end: auto; color: var(--ink-2); font-size: var(--fs-s); }

.is-arranging .widget {
  outline: 2px dashed var(--line-strong);
  outline-offset: 4px;
  cursor: grab;
}

/* در حالت چیدمان محتوای ویجت بی‌اثر است: کشیدن از روی لینک، خودِ لینک را می‌کشد نه ویجت را،
   و کلیکِ ناخواسته صفحه را عوض می‌کند. دستگیره تنها بخشِ فعال است. */
.is-arranging .widget > :not(.widget-handle) { pointer-events: none; user-select: none; }

.widget.is-dragging { opacity: 0.45; cursor: grabbing; }
.widget.is-drop-target { outline: 2px solid var(--cyan-500); }

.widget-handle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-end: 0.5rem;
  padding-block: 0.25rem;
  padding-inline: 0.75rem 0.375rem;
  border-radius: var(--r-m);
  background: var(--fill-strong);
  color: #fff;
  font-size: var(--fs-s);
}

.widget-handle-title { flex: 1; font-weight: 600; }
.widget-handle .icon-btn { color: #D3DEEE; }
.widget-handle .icon-btn:hover { border-color: transparent; background: rgb(255 255 255 / 0.12); color: #fff; }
.widget-handle .icon-btn:disabled { opacity: 0.35; cursor: default; }

@media (prefers-reduced-motion: no-preference) {
  .widget { transition: opacity 0.15s, outline-color 0.15s; }
}

/* «آخرین پذیرش‌ها»: ردیف‌ها به روزِ بازشدن گروه می‌شوند؛ هر ردیف دایره‌ی نام، نام و هشدار، شماره‌ها، و
   سمتِ دیگرش «کِی» و «نوبت دارد یا نه». ردیف لینک نیست — نام لینکِ پرونده است و «نوبت بده» لینکِ خودش. */
.recent { display: grid; margin: 0; padding: 0; list-style: none; }

.recent-summary {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-s);
}

.recent-day {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.625rem 0.25rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.recent-day::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }

.recent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem;
  border-radius: var(--r-m);
  transition: background-color 0.15s ease;
}

.recent-row:hover { background: var(--surface-2); }

.recent-avatar {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 14%, var(--surface));
  color: var(--tone);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent);
}

.recent-avatar.tone-0 { --tone: var(--navy-700); }
.recent-avatar.tone-1 { --tone: var(--cyan-500); color: var(--navy-900); }
.recent-avatar.tone-2 { --tone: var(--ok-700); }
.recent-avatar.tone-3 { --tone: color-mix(in srgb, var(--cyan-500) 45%, var(--navy-700)); }
.recent-avatar.tone-4 { --tone: var(--ink-2); }

.recent-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.375rem; min-inline-size: 0; }

.recent-name {
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-name:hover { color: var(--navy-700); text-decoration: underline; }

.recent-alert { display: inline-grid; place-items: center; color: var(--alert-600); }

.recent-meta {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.recent-meta .file-no { min-inline-size: 0; font-size: var(--fs-xs); }
.recent-mobile { color: var(--ink-3); }

.recent-side { display: grid; justify-items: end; gap: 0.25rem; text-align: end; }
.recent-when { color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.recent-next, .recent-book, .recent-none {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.recent-next { background: var(--ok-50); color: var(--ok-700); }

.recent-book {
  border: 1px dashed color-mix(in srgb, var(--navy-700) 45%, transparent);
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: none;
}

.recent-book:hover { border-style: solid; background: var(--cyan-50); }
.recent-book:focus-visible, .recent-name:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-s); }
.recent-none { background: var(--surface-2); color: var(--ink-3); }

.recent-empty { display: grid; justify-items: center; gap: 0.5rem; padding: 1.25rem 0.5rem; text-align: center; }
.recent-empty p { margin: 0; color: var(--ink-2); }

.recent-empty-icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-700);
}

@media (max-width: 30rem) {
  .recent-row { grid-template-columns: auto minmax(0, 1fr); }
  .recent-side { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; text-align: start; }
}

.panel-queue { border-color: var(--amber-100); background: var(--amber-50); display: grid; gap: 0.75rem; justify-items: start; }
.panel-queue h2 { color: var(--amber-700); }
.queue-count { font-size: var(--fs-xl); color: var(--amber-700); margin-inline-end: 0.25rem; }
.queue-clear { display: flex; align-items: center; gap: 0.5rem; color: var(--ok-700); }

.today-date { color: var(--ink-3); font-size: var(--fs-s); }
.panel-sub { color: var(--ink-3); font-size: var(--fs-s); }

/* ---------- پیشخوان: امروز در یک نگاه ---------- */

.day-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
  gap: 0.5rem;
  margin: 0 0 0.875rem;
}

.day-stats div { padding: 0.5rem 0.875rem; border-radius: var(--r-m); background: var(--surface-2); }
.day-stats dt { color: var(--ink-3); font-size: var(--fs-xs); }
.day-stats dd { margin: 0; color: var(--navy-900); font-size: var(--fs-xl); font-weight: 600; line-height: 1.4; }
.day-stats .is-warn { background: var(--amber-50); }
.day-stats .is-warn dd { color: var(--amber-700); }

.day-next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-end: 0.75rem; color: var(--ink-2); }

/* نوار ساعت. در RTL «شروع» سمت راست است، پس صبح راست و عصر چپ — همان جهت خواندن. */
.day-strip {
  position: relative;
  block-size: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface-2);
  overflow: hidden;
}

.day-slot {
  position: absolute;
  inset-block: 4px;
  min-inline-size: 3px;
  border-radius: 3px;
}

.slot-completed { background: var(--ok-700); }
.slot-checkedin, .slot-inchair { background: var(--cyan-500); }
.slot-scheduled { background: var(--fill); opacity: 0.45; }
.slot-noshow { background: var(--amber-500); }

/* هر نوبت روی نوار، لینکِ پرونده است — پس باید فوکوس و حالت hover داشته باشد. */
a.day-slot { text-decoration: none; transition: transform 0.12s ease; }
a.day-slot:hover { transform: scaleY(1.25); }
a.day-slot:focus-visible { outline: 2px solid var(--navy-900); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  a.day-slot { transition: none; }
  a.day-slot:hover { transform: none; filter: brightness(0.85); }
}

/* خطِ «الان» با یک سرِ دیدنی، وگرنه بین نوبت‌ها گم می‌شود. */
.day-now { position: absolute; inset-block: 0; inline-size: 2px; background: var(--alert-600); }

.day-now::before {
  content: "";
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: -3px;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--alert-600);
}

.day-scale {
  display: flex;
  justify-content: space-between;
  margin-block-start: 0.25rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.day-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.5rem 0 0; padding: 0; list-style: none; color: var(--ink-3); font-size: var(--fs-xs); }
.day-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.day-legend i { inline-size: 0.75rem; block-size: 0.5rem; border-radius: 2px; }

/* هویت و سوابق، دو ستون کنار هم: مرجع‌اند و نباید نصفِ صفحه را بگیرند. */
/* دو زیربخشِ «مشخصات بیمار». حالا داخل یک پنل‌اند، پس حاشیه‌ی پایین‌شان را خودِ پنل می‌دهد. */
.file-reference {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem 1.5rem;
}

/* زیربخش، نه پنلِ تودرتو: کادر روی کادر، سلسله‌مراتب را به‌هم می‌ریزد. */
.subpanel { min-inline-size: 0; }
.subpanel + .subpanel { border-inline-start: 1px solid var(--line); padding-inline-start: 1.5rem; }
.subpanel .panel-head { margin-block-end: 0.625rem; padding-block-end: 0.5rem; border-block-end: 1px solid var(--line); }
.subpanel h3 { margin: 0; font-size: var(--fs-m); color: var(--navy-900); }

/* روی یک ستون، خطِ کناری معنا ندارد و به خطِ بالا تبدیل می‌شود. */
@media (max-width: 52rem) {
  .subpanel + .subpanel {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--line);
    padding-block-start: 1rem;
  }
}

/* تازگیِ چارت: تاریخِ دقیق کنار فاصله‌ی تقریبی، چون هر کدام یک سؤال جدا را جواب می‌دهند. */
.chart-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-block: 0 0.75rem;
  color: var(--ink-2);
  font-size: var(--fs-s);
}

.chart-freshness strong { color: var(--navy-900); }

/* ---------- خانه‌ی تاریخ شمسی ---------- */

.jdate { position: relative; display: flex; align-items: stretch; }

/* خودِ خانه همان input قبلی است، فقط جا برای دکمه‌ی تقویم باز کرده.
   دکمه در انتهای قابِ راست‌به‌چپ است، یعنی سمتِ چپ. خانه اما dir="ltr" دارد (رقم)، پس «ابتدای»
   خودِ خانه همان چپ است — جای دکمه با padding-inline-start باز می‌شود، نه end. پیش‌تر end بود و
   جا در سمتِ راست باز می‌شد، جایی که دکمه نبود. */
.jdate-input { flex: 1; min-inline-size: 0; padding-inline-start: 2.5rem; }

.jdate-toggle {
  position: absolute;
  inset-inline-end: 0.25rem;
  inset-block: 0.25rem;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.jdate-toggle:hover { background: var(--surface-2); color: var(--navy-800); }
.jdate-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

/* پس‌زمینه شفاف است: فقط کلیکِ بیرون را می‌گیرد، صفحه را تیره نمی‌کند. */
.jdate-backdrop { position: fixed; inset: 0; z-index: 30; }

.jdate-pop {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-start: 0;
  z-index: 31;
  inline-size: 17rem;
  padding: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: 0 10px 28px rgb(var(--shadow-hue) / 0.18);
}

.jdate-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.5rem; }
.jdate-title { font-size: var(--fs-s); color: var(--navy-900); }

.jdate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.125rem; }

.jdate-weekday {
  padding-block: 0.25rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-align: center;
}

.jdate-blank { aspect-ratio: 1; }

.jdate-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.jdate-day:hover:not(:disabled) { background: var(--surface-2); }
.jdate-day:disabled { opacity: 0.3; cursor: not-allowed; }

/* امروز حلقه دارد، انتخاب‌شده پر است — دو چیز جدا و ممکن است هر دو یکی باشند. */
.jdate-day.is-today { border-color: var(--navy-700); }
.jdate-day.is-chosen { background: var(--fill-strong); border-color: var(--fill-strong); color: var(--fill-ink); }

.jdate-foot {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--line);
}

/* ---------- مراحل درمان (زیرنوارِ تبِ «درمان») ---------- */

.treatment-nav { margin-block: 0.75rem 0.5rem; }

/* NavLink کلاس «active» را خودش می‌گذارد؛ همان چیزی که role-tab با is-active نشان می‌دهد. */
.treatment-nav .role-tab.active {
  border-color: var(--navy-800);
  background: var(--fill-strong);
  color: #fff;
}

.treatment-nav .role-tab.active small { color: #C6D7EC; }

.treatment-exam-switch { margin-block-end: 1rem; }

/* دو لینک در قالب سوییچ: مثل segment ولی چون لینک‌اند، radio ندارند. */
.segment-link {
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: var(--fs-s);
  text-decoration: none;
}

.segment-link:hover { color: var(--navy-900); }
.segment-link.active { background: var(--fill-strong); color: var(--fill-ink); }

/* ---------- پیشخوان: اتاق انتظار ---------- */

.waiting-list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }

.waiting-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ok-700);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.waiting-who { display: grid; gap: 0.125rem; min-inline-size: 0; flex: 1 1 10rem; }

/* عددِ انتظار بزرگ‌تر از بقیه‌ی سطر: همان چیزی است که چشم دنبالش می‌گردد. */
.waiting-for {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: var(--fs-l);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy-900);
}

.waiting-for small { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); }

/* سه پله‌ی انتظار. رنگ روی لبه می‌نشیند نه روی کل کارت، تا فهرست هشدارِ یک‌دست نشود. */
.waiting-list .wait-long { border-inline-start-color: var(--amber-500); }
.waiting-list .wait-long .waiting-for { color: var(--amber-700); }
.waiting-list .wait-bad { border-inline-start-color: var(--alert-600); background: var(--alert-50); }
.waiting-list .wait-bad .waiting-for { color: var(--alert-700); }

/* یادآوری‌ها همان شکلِ فهرست پیگیری را دارند؛ فقط دلیلِ بودنشان فرق می‌کند. */
.reminder-list [data-reminder-kind="Birthday"] { border-inline-start: 3px solid var(--cyan-500); }
.reminder-list [data-reminder-kind="Routine"] { border-inline-start: 3px solid var(--amber-500); }

/* ---------- پیشخوان: پزشکان ---------- */

.doctor-cards { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }

.doctor-cards li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

/* پزشکی که امروز نوبتی ندارد نباید هم‌وزنِ بقیه دیده شود. */
.doctor-cards .is-idle { opacity: 0.6; }

.doctor-who { display: grid; gap: 0.125rem; min-inline-size: 0; }
.doctor-load { display: flex; align-items: baseline; gap: 0.375rem; font-size: var(--fs-s); }
.doctor-load strong { font-size: var(--fs-l); color: var(--navy-900); font-variant-numeric: tabular-nums; }

/* ---------- پیشخوان: پول امروز ---------- */

/* عدد و واحدش یک چیزند و باید کنار هم بنشینند؛ معادلِ تومانی سطر بعد. */
.money-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0 0 0.75rem; }
.money-total > .num { font-size: var(--fs-xl); font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.money-unit { color: var(--ink-3); font-size: var(--fs-s); }
/* doc-small رنگِ ثابتِ چاپ (#333) دارد و در حالت تاریک گم می‌شد؛ این‌جا صفحه است، نه برگه. */
.money-total .doc-small { flex-basis: 100%; color: var(--ink-3); font-size: var(--fs-xs); }

.money-methods { display: grid; gap: 0.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }

.money-methods li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.25rem;
  border-block-end: 1px dashed var(--line);
  font-size: var(--fs-s);
}

.money-methods li:last-child { border-block-end: 0; }
.money-methods .num { font-variant-numeric: tabular-nums; }

/* اعدادِ فرعی کوچک‌ترند: مبلغِ ریالی در خانه‌ی کوچک، اندازه‌ی عنوان نمی‌خواهد. */
.money-stats { margin-block-end: 0; }
.money-stats dd { font-size: var(--fs-m); }

/* ---------- پیشخوان: پیگیری بیماران ---------- */

.recall-panel { border-color: var(--line-strong); }

.recall-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.25rem;
  block-size: 2.25rem;
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--fill-strong);
  color: #fff;
  font-weight: 600;
}

.recall-list { list-style: none; margin: 0; padding: 0; }

.recall-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.625rem;
  border-block-end: 1px solid var(--line);
}

.recall-list li:last-child { border-block-end: 0; }

.recall-who { display: grid; min-inline-size: 0; }
.recall-name { font-weight: 600; text-decoration: none; }
.recall-name:hover { text-decoration: underline; }
.recall-meta { overflow: hidden; color: var(--ink-3); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }

.overdue { padding: 0.125rem 0.625rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.overdue-recent { background: var(--cyan-50); color: var(--navy-900); }
.overdue-late { background: var(--amber-50); color: var(--amber-700); }
.overdue-lost { background: var(--alert-50); color: var(--alert-700); }

.recall-clear { display: flex; align-items: center; gap: 0.5rem; color: var(--ok-700); }
.recall-more { margin-block-start: 0.5rem; }

@media (max-width: 40rem) {
  .recall-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .recall-list .overdue { grid-row: 2; grid-column: 1; justify-self: start; }
  .recall-list .icon-btn { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---------- پرونده ---------- */

/* نوار هشدار پزشکی: اولین چیزی که با باز شدن پرونده دیده می‌شود */
.alert-band {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  margin-block-end: 1rem;
  border-radius: var(--r-l);
}

.alert-band h2 { font-size: var(--fs-l); }
.alert-band .icon { margin-block-start: 0.25rem; }

.alert-band-critical {
  border: 1px solid var(--alert-200);
  border-inline-start: 6px solid var(--alert-600);
  background: var(--alert-50);
  color: var(--alert-700);
}

.alert-band-unknown {
  border: 1px solid var(--amber-100);
  border-inline-start: 6px solid var(--amber-500);
  background: var(--amber-50);
  color: var(--amber-700);
}

.alert-band-clear {
  align-items: center;
  padding-block: 0.5rem;
  background: var(--ok-50);
  color: var(--ok-700);
  font-size: var(--fs-s);
}

.alert-band-clear .icon { margin: 0; }

/* غیربحرانی ولی مهم (دیابت، فشار، هپاتیت، دارو): کهربایی، هم‌قدِ نوار بحرانی تا دیده شود. */
.alert-band-caution {
  border: 1px solid var(--amber-100);
  border-inline-start: 6px solid var(--amber-500);
  background: var(--amber-50);
  color: var(--amber-700);
}

/* هشدار پذیرش (بدهی، رفتار…): عمداً کم‌وزن‌تر از هشدار پزشکی. */
.alert-band-admin {
  align-items: center;
  padding-block: 0.625rem;
  border: 1px dashed var(--amber-500);
  background: var(--surface);
  color: var(--amber-700);
  font-size: var(--fs-s);
}

.alert-band-admin .icon { margin: 0; }

.alert-band-loading { padding-block: 0.5rem; background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-s); }

.alert-chips li.is-critical { border-color: var(--alert-200); color: var(--alert-700); }
.alert-chips li.is-caution { border-color: var(--amber-100); color: var(--amber-700); }

.alert-reviewed { margin-block-start: 0.5rem; font-size: var(--fs-xs); }
.alert-reviewed.is-stale { font-weight: 600; }

.alert-chips { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.alert-chips li {
  padding: 0.125rem 0.875rem;
  border: 1px solid var(--alert-200);
  border-radius: var(--r-pill);
  background: #fff;
  font-weight: 500;
}

.file-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  margin-block-end: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

/* شماره پرونده مثل برچسب پشت پوشه‌ی کاغذی — هویت پرونده در مطب */
.file-tab {
  display: grid;
  justify-items: center;
  align-content: center;
  min-inline-size: 6rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-m);
  border-end-start-radius: 0;
  background: var(--fill-strong);
  color: #fff;
}

.file-tab-label { color: var(--cyan-300); font-size: var(--fs-xs); }
.file-tab-number { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.25; }

.facts { display: flex; flex-wrap: wrap; gap: 0.125rem 1.5rem; margin: 0.25rem 0 0; font-size: var(--fs-s); }
.facts div { display: flex; gap: 0.375rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; }

.file-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.file-chip { display: inline-flex; align-items: center; gap: 0.5rem; }

/* ---------- کیوسک ---------- */

.kiosk .auth-form { gap: 1.25rem; }
.kiosk input { min-block-size: 3.5rem; font-size: var(--fs-l); }
.btn-kiosk { min-block-size: 3.5rem; font-size: var(--fs-l); }
.kiosk-done { text-align: center; }
.kiosk-time { font-size: 2rem; font-weight: 600; color: var(--navy-900); }

/* نشانیِ توکن‌دار باید کامل دیده شود تا بشود کپی‌اش کرد. */
.kiosk-url {
  display: block;
  margin-block-start: 0.375rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--r-m);
  background: var(--surface);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

/* ---------- انبار ----------
   دفترِ کالا: رنگ فقط وضعیت را می‌گوید — کهربایی برای «رو به اتمام / تمام / نزدیک انقضا»، سبز برای
   ورود. قرمز این‌جا نیست؛ قرمز در این برنامه فقط هشدارِ پزشکی و خطاست. */

.row-low td { background: var(--amber-50); }
.row-out td { background: var(--amber-50); }
.row-out .stock-qty { color: var(--amber-700); font-weight: 600; }
.stock-table tr.is-inactive td { color: var(--ink-3); }
.stock-in { color: var(--ok-700); }
.stock-out { color: var(--ink-2); }
.stock-negative { color: var(--amber-700); font-weight: 600; }

/* خلاصه‌ی بالای صفحه: هر عدد دکمه‌ای است که فهرست را به همان وضعیت می‌برد. */
.inv-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }

.inv-stats > li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-s);
  line-height: 1.9;
}

.inv-stats > li:has(button) { padding: 0; }

.inv-stats button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.875rem;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.inv-stats button:hover { background: var(--surface-2); color: var(--navy-900); }
.inv-stats button:focus-visible { outline: none; box-shadow: var(--ring); }
.inv-stats strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-stats .has-alert strong { color: var(--amber-700); }
.inv-stats .stat-value { border-style: dashed; }

/* نوارِ جست‌وجو و فیلتر: همه در یک ردیف، روی موبایل می‌شکنند. */
.stock-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 1rem;
  margin-block-end: 0.75rem;
}

.stock-toolbar .search-field { flex: 1 1 14rem; max-inline-size: 22rem; }
.stock-toolbar .filter-chips { flex-basis: 100%; }
.stock-list .filter-chips { margin-block-end: 0.75rem; }

.stock-select {
  min-block-size: 2.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
}

.history-filters { align-items: end; }
.history-filters .field { min-inline-size: 12rem; }

/* نامِ کالا دکمه‌ای است که کاردکس را باز می‌کند؛ شبیهِ لینک، نه دکمه. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy-700);
  font: inherit;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

.link-button:hover { text-decoration: underline; }
.link-button:focus-visible { outline: none; border-radius: var(--r-s); box-shadow: var(--ring); }

.stock-table .note-line { display: flex; flex-wrap: wrap; gap: 0 0.625rem; }
.stock-table .col-actions { white-space: nowrap; }
.expiry-soon, .expiry-past { color: var(--amber-700); font-weight: 600; }

/* کاردکس */
.item-ledger { margin-block-end: 1rem; border-inline-start: 4px solid var(--cyan-500); }

.ledger-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.ledger-facts > div { padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.ledger-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.ledger-facts dd { margin: 0; color: var(--ink); font-weight: 600; }

.stock-rows tr.is-reversed td { color: var(--ink-3); }
.stock-rows tr.is-reversed td:nth-child(-n+4) { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.stock-rows tr.is-reversal td { background: var(--surface-2); }
.stock-detail { max-inline-size: 22rem; color: var(--ink-2); font-size: var(--fs-s); }
.stock-reverse-row td { background: var(--surface) !important; }
.stock-kind { font-weight: 500; }
.stock-kind-purchase, .stock-kind-return { color: var(--ok-700); }
.stock-kind-waste { color: var(--amber-700); }

/* فرمِ کالا و گردش */
.inventory-editor { margin-block-end: 1rem; border-inline-start: 4px solid var(--navy-700); }
.inventory-editor form { display: grid; gap: 1rem; }
.item-active { margin-block-start: 0.25rem; }

.stock-form { max-inline-size: 52rem; }
.stock-kinds .choice-card span { display: inline-flex; align-items: center; gap: 0.375rem; }
.stock-now { margin: 0.25rem 0 0; color: var(--ink-2); }
.stock-now strong { color: var(--ink); }

/* شمارش */
.count-table .count-input { max-inline-size: 8rem; }
.count-table tr.has-difference td { background: var(--amber-50); }
.count-footer { display: grid; gap: 0.75rem; margin-block-start: 1rem; }
.count-note { max-inline-size: 30rem; }
.stock-subhead { margin: 1.5rem 0 0.5rem; font-size: var(--fs-m); color: var(--navy-900); }

.count-history { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }

.count-history li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding-block: 0.375rem;
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-s);
}

/* خرید و انقضا */
.stock-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  align-items: start;
  gap: 1rem;
}

.alert-clear { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--ok-700); }

.expiry-list { display: grid; gap: 0.375rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }

.expiry-list li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: var(--r-m);
}

.expiry-list li.is-soon { border-inline-start-color: var(--amber-500); }
.expiry-list li.is-expired { border-inline-start-color: var(--amber-700); background: var(--amber-50); }
.expiry-when { display: grid; }
.expiry-when strong { color: var(--ink); font-weight: 600; }
.expiry-list li.is-expired .expiry-when strong { color: var(--amber-700); }
.expiry-what { display: grid; min-inline-size: 0; }

@media (max-width: 40rem) {
  .expiry-list li { grid-template-columns: minmax(0, 1fr); }
}

/* موادِ خدمات: فهرستِ خدمات در شروع، ویرایشِ موادِ همان خدمت کنارش. */
.materials-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
}

@media (max-width: 48rem) {
  .materials-layout { grid-template-columns: minmax(0, 1fr); }
}

.materials-services ul {
  display: grid;
  gap: 0.125rem;
  max-block-size: 26rem;
  margin: 0.5rem 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.materials-services button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-s);
  text-align: start;
  cursor: pointer;
}

.materials-services button:hover { background: var(--surface-2); }
.materials-services button.is-active { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); font-weight: 500; }
.materials-services button:focus-visible { outline: none; box-shadow: var(--ring); }
.materials-edit { display: grid; gap: 0.75rem; min-inline-size: 0; }
.materials-edit .stock-subhead { margin-block-start: 0; }

.material-lines { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }

.material-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.material-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-qty { min-inline-size: 0 !important; }
.material-add { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.material-add select { flex: 1 1 14rem; }

@media print {
  /* لیست خرید و برگه‌ی شمارش روی کاغذ: بی تب‌ها، دکمه‌ها و فیلترها. */
  .role-tabs, .inv-stats, .stock-toolbar, .count-footer, .col-actions, .page-actions,
  .stock-alerts [data-action], .stock-count [data-action] { display: none !important; }
  .count-table .count-input { border: 0; border-block-end: 1px solid #000; }
}

/* ---------- صندوق خروجی پیامک ---------- */

.sms-head { margin-block-start: 1rem; }

.sms-list { display: grid; gap: 0.375rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }

.sms-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: var(--fs-s);
}

/* ---------- نقش‌ها ---------- */

.role-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-end: 1rem; }

.role-tab {
  display: grid;
  gap: 0.125rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink-1);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.role-tab small { color: var(--ink-3); font-size: var(--fs-xs); }
.role-tab.is-active { border-color: var(--navy-700); background: var(--cyan-50); }
.role-tab.is-active small { color: var(--navy-900); }

/* روی گوشی زبانه‌ها به اندازه‌ی متنشان نامرتب می‌شکستند؛ شبکه‌ی دوستونه ردیف‌ها را هم‌قد و هم‌عرض می‌کند. */
@media (max-width: 40rem) {
  .role-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.perm-group { margin: 0 0 1rem; padding: 0; border: 0; min-inline-size: 0; }
.perm-group > legend { margin-block-end: 0.375rem; padding: 0; color: var(--ink-2); font-size: var(--fs-s); }

/* ---------- چاپ ---------- */


/* ---------- پروفایل مرکز ---------- */

.clinic-profile { margin-block-end: 1.5rem; }

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(min(18rem, 100%), 2fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 56rem) { .profile-layout { grid-template-columns: minmax(0, 1fr); } }

.profile-side { display: grid; gap: 1.25rem; }
.logo-box { display: grid; gap: 0.5rem; justify-items: start; }
.letterhead-preview { display: grid; gap: 0.5rem; }

/* قابِ کاغذی دورِ همان سربرگی که روی برگه‌های چاپی می‌نشیند. */
.letterhead-preview .doc-head {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: #fff;
  color: #000;
}

.logo-preview {
  max-inline-size: 10rem;
  max-block-size: 6rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: #fff;
  object-fit: contain;
}

.logo-empty {
  display: grid;
  place-items: center;
  inline-size: 10rem;
  block-size: 6rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  color: var(--ink-3);
  font-size: var(--fs-s);
}

.brand-mark.has-logo { overflow: hidden; background: #fff; }
.brand-mark img { inline-size: 100%; block-size: 100%; padding: 3px; object-fit: contain; }

@media print {
  /* نوار کناری، تب‌ها، دکمه‌ها و فرم‌ها روی کاغذ معنا ندارند و جای محتوا را می‌گیرند. */
  .sidebar,
  .patient-tabs,
  .patient-alerts,
  .role-tabs,
  .day-nav,
  .segmented,
  .choice-field,
  .form-card,
  .form-actions,
  .btn,
  .confirm-panel,
  .banner,
  .boot,
  #blazor-error-ui { display: none !important; }


  /* پوسته‌ی دوستونی روی کاغذ یک‌ستونه می‌شود و حاشیه‌ی چاپگر کافی است. */
  .shell,
  .main,
  .page,
  .account-layout { display: block; margin: 0; padding: 0; max-inline-size: none; }

  .panel {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
    margin-block-end: 0.5rem;
  }

  /* جدول‌ها روی کاغذ اسکرول ندارند؛ باید کامل دیده شوند و سرصفحه در هر صفحه تکرار شود. */
  .table-wrap { overflow: visible !important; }
  table.data { inline-size: 100%; border-collapse: collapse; }
  table.data thead { display: table-header-group; }
  table.data tr { break-inside: avoid; }
  .hide-sm { display: table-cell !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.8; }
  a { text-decoration: none; color: inherit; }

  @page { margin: 1.5cm; }
}

/* ---------- برگه‌ی چاپی نسخه ---------- */

.print-sheet { display: none; }
.rx-card-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* هر برگه قطعِ کاغذ خودش را دارد: نسخه و رسید A5، صورتحساب و صورت‌حساب بیمار A4. */
@page sheet-a5 { size: A5 portrait; margin: 12mm; }
@page sheet-a4 { size: A4 portrait; margin: 14mm; }

@media print {
  /* فقط وقتی دکمه‌ی چاپِ یک برگه زده شده؛ Ctrl+P معمولی همان صفحه‌ی کامل را چاپ می‌کند. */
  html[data-print="sheet"] .shell > :not(.main),
  html[data-print="sheet"] .page > :not(.print-sheet) { display: none !important; }

  html[data-print="sheet"] .print-sheet { display: block; page: sheet-a5; }
  html[data-print="sheet"] .print-sheet.sheet-a4 { page: sheet-a4; }
}

.rx-sheet { color: #000; font-size: 10.5pt; line-height: 1.8; }

.rx-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8mm;
  padding-block-end: 3mm;
  border-block-end: 2px solid #000;
}

.rx-clinic, .rx-doctor { display: grid; gap: 0.5mm; }
.rx-doctor { text-align: end; }
.rx-clinic-name { font-size: 14pt; font-weight: 700; }
.rx-doctor-name { font-size: 12pt; font-weight: 700; }
.rx-small { color: #333; font-size: 8.5pt; }
.rx-clinic { display: flex; align-items: flex-start; gap: 3mm; }
.rx-clinic-text { display: grid; gap: 0.5mm; }
.rx-logo { max-inline-size: 22mm; max-block-size: 18mm; object-fit: contain; }

.rx-sheet-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1mm 6mm;
  margin: 4mm 0;
  padding: 2mm 3mm;
  border: 1px solid #000;
  border-radius: 2mm;
}

.rx-sheet-meta div { display: flex; gap: 2mm; }
.rx-sheet-meta dt { color: #444; }
.rx-sheet-meta dd { margin: 0; font-weight: 600; }

.rx-sheet-body { position: relative; min-block-size: 70mm; padding-inline-start: 12mm; }

.rx-symbol {
  position: absolute;
  inset-block-start: -2mm;
  inset-inline-start: 0;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 24pt;
  font-weight: 700;
  line-height: 1;
}

.rx-sheet-items { display: grid; gap: 3mm; margin: 0; padding-inline-start: 5mm; }
.rx-sheet-items li { break-inside: avoid; }
.rx-line-main { display: flex; flex-wrap: wrap; gap: 0 2mm; font-weight: 700; }
.rx-drug { font-size: 11.5pt; }
.rx-line-sub { color: #222; font-size: 9.5pt; }
.rx-sheet-note { margin-block-start: 5mm; font-size: 9.5pt; }

.rx-sheet-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8mm;
  margin-block-start: 8mm;
  padding-block-start: 3mm;
  border-block-start: 1px solid #000;
}

.rx-sign {
  display: grid;
  place-items: end center;
  flex: none;
  inline-size: 55mm;
  block-size: 22mm;
  padding-block-end: 1.5mm;
  border: 1px dashed #000;
  border-radius: 2mm;
  font-size: 8.5pt;
}

/* ---------- برگه‌های چاپی مالی: صورتحساب، صورت‌حساب بیمار، رسید ---------- */

.doc-sheet { color: #000; font-size: 10pt; line-height: 1.8; }

.doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8mm;
  padding-block-end: 3mm;
  border-block-end: 2px solid #000;
}

.doc-clinic { display: flex; align-items: flex-start; gap: 3mm; }
.doc-clinic-text, .doc-title { display: grid; gap: 0.5mm; }
.doc-title { text-align: end; }
.doc-logo { max-inline-size: 24mm; max-block-size: 18mm; object-fit: contain; }
.doc-clinic-name { font-size: 14pt; font-weight: 700; }
.doc-title-text { font-size: 13pt; font-weight: 700; }
.doc-small { color: #333; font-size: 8.5pt; }

.doc-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1mm 6mm;
  margin: 4mm 0;
  padding: 2mm 3mm;
  border: 1px solid #000;
  border-radius: 2mm;
}

.doc-meta div { display: flex; flex-wrap: wrap; gap: 0 2mm; }
.doc-meta dt { color: #444; }
.doc-meta dd { margin: 0; font-weight: 600; }

.doc-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28mm, 1fr));
  gap: 2mm;
  margin: 0 0 3mm;
}

.doc-summary div { padding: 1.5mm 2mm; border: 1px solid #000; border-radius: 1.5mm; }
.doc-summary dt { color: #444; font-size: 8.5pt; }
.doc-summary dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.doc-section { margin: 5mm 0 2mm; font-size: 11pt; }

.doc-table { inline-size: 100%; border-collapse: collapse; font-size: 9.5pt; }
.doc-table th, .doc-table td { padding: 1.5mm 2mm; border: 1px solid #000; text-align: start; vertical-align: top; }
.doc-table th { font-weight: 700; }
.doc-table thead { display: table-header-group; }
.doc-table tr { break-inside: avoid; }
.doc-table tfoot td { font-weight: 700; }
.doc-table .doc-money { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-table .doc-index { inline-size: 9mm; text-align: center; }

.doc-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2mm 6mm;
  margin-block-start: 4mm;
  padding: 2.5mm 3mm;
  border: 2px solid #000;
  border-radius: 2mm;
}

.doc-total strong { font-size: 13pt; }
.doc-note { margin-block-start: 3mm; font-size: 9.5pt; }

.doc-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8mm;
  margin-block-start: 10mm;
  padding-block-start: 3mm;
  border-block-start: 1px solid #000;
}

.doc-sign {
  display: grid;
  place-items: end center;
  flex: none;
  inline-size: 55mm;
  block-size: 22mm;
  padding-block-end: 1.5mm;
  border: 1px dashed #000;
  border-radius: 2mm;
  font-size: 8.5pt;
}

.receipt-amount { display: grid; gap: 1mm; margin: 6mm 0; text-align: center; }
.receipt-amount strong { font-size: 18pt; }

/* ---------- کارت نوبت (پورتال بیمار)، A5 ---------- */

/* تاریخ و ساعت تنها چیزی است که بیمار روی کارت دنبالش می‌گردد؛ بقیه‌ی برگه دورِ همین می‌چرخد. */
.appt-card-when {
  display: grid;
  gap: 1mm;
  margin: 6mm 0 4mm;
  padding: 3mm;
  border: 2px solid #000;
  border-radius: 2mm;
  text-align: center;
}

.appt-card-when strong { font-size: 20pt; line-height: 1.4; }
.appt-card-when > bdi { font-size: 12pt; }

.appt-card-void {
  margin-block: 3mm 0;
  padding: 2mm 3mm;
  border: 1.5pt solid #000;
  font-weight: 700;
  text-align: center;
}

.appt-card-where { margin-block-start: 4mm; }
.appt-card-where p { margin: 0; }
.appt-card-sub { margin: 0 0 1mm; font-size: 10.5pt; font-weight: 700; }

/* روی A5 سه ستون خیلی باریک می‌شود؛ دو ستون هم‌چنان جمع‌وجور است و متن نمی‌شکند. */
.appt-card .doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* امضا لازم نیست: کارت نوبت سند مالی نیست. */
.appt-card .doc-foot { display: grid; gap: 1mm; margin-block-start: 6mm; }

/* ---------- برنامه‌ی روز روی کاغذ، A4 ---------- */

.day-sheet-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2mm 6mm;
  margin: 4mm 0 3mm;
}

.day-sheet-when strong { font-size: 12pt; }

/* هر پزشک یک بلوک؛ نباید وسطش صفحه عوض شود مگر خودش از یک صفحه بلندتر باشد. */
.day-sheet-doctor { margin-block-end: 5mm; break-inside: auto; }

.day-sheet-doctor-name {
  display: flex;
  align-items: baseline;
  gap: 3mm;
  margin: 0 0 1.5mm;
  padding-block-end: 1mm;
  border-block-end: 1.5pt solid #000;
  font-size: 11.5pt;
  break-after: avoid;
}

.day-sheet-table { inline-size: 100%; border-collapse: collapse; font-size: 9.5pt; }

.day-sheet-table th,
.day-sheet-table td {
  padding: 1.2mm 2mm;
  border: 1px solid #000;
  text-align: start;
  vertical-align: top;
}

.day-sheet-table thead { display: table-header-group; }
.day-sheet-table tr { break-inside: avoid; }
.day-sheet-table th { font-weight: 700; }

.day-sheet-table .col-time { inline-size: 18mm; white-space: nowrap; font-variant-numeric: tabular-nums; }
.day-sheet-table .col-time small { display: block; color: #444; font-size: 8pt; }
.day-sheet-table .col-file { inline-size: 20mm; font-variant-numeric: tabular-nums; }
.day-sheet-table .col-phone { inline-size: 28mm; font-variant-numeric: tabular-nums; }
.day-sheet-table .col-status { inline-size: 20mm; }
.day-sheet-table td .doc-small { display: block; }

/* لغو و غیبت خط می‌خورند ولی می‌مانند: آن ساعت خالی شده، نه اینکه نبوده. */
.day-sheet-table .is-off td { color: #555; text-decoration: line-through; }
.day-sheet-table .is-off .col-status { text-decoration: none; font-weight: 700; }

/* ---------- پرونده‌ی تصویری ---------- */

/* minmax با min() تا در ۳۶۰px هم ستون از عرض صفحه بیرون نزند */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: 1rem;
  margin-block-start: 0.5rem;
}

.doc-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  overflow: hidden;
}

.doc-thumb {
  display: grid;
  place-items: center;
  min-block-size: 9rem;
  padding: 0.5rem;
  background: var(--surface-2, var(--bg));
  color: var(--ink-3);
}

.doc-thumb img {
  max-inline-size: 100%;
  max-block-size: 14rem;
  border-radius: var(--r-s, 6px);
}

.doc-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
}

/* فقط عنوانِ کارتِ مدرک؛ بی این قید، ستونِ عنوانِ سربرگِ برگه‌های چاپی همه‌ی عرض را می‌گرفت و نامِ مرکز واژه‌به‌واژه می‌شکست. */
.doc-card .doc-title { inline-size: 100%; }

/* ---------- ساعت کاری ---------- */

.hours { display: grid; gap: 0.5rem; margin-block-end: 1rem; }

/* هر روز یک ردیف: نام و تیک، دو ساعت، و تعطیلی — زیر ۴۸rem روی هم می‌افتند. */
.hours-row {
  display: grid;
  grid-template-columns: minmax(min(9rem, 100%), 1fr) repeat(2, minmax(min(7rem, 100%), 1fr)) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}

@media (max-width: 48rem) {
  .hours-row { grid-template-columns: repeat(2, minmax(min(7rem, 100%), 1fr)); }
}

.hours-row .field { margin: 0; }

/* ---------- طرح درمان ---------- */

/* طرح تازه بالا، طرح‌ها زیرش — نه دو ستون. جدولِ ردیف‌ها در ستونِ باریک خوانا نبود. */
.plan-layout { display: grid; gap: 1rem; align-items: start; }

.plan-card {
  padding: 1rem;
  margin-block-end: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

/* طرح بسته پاک نمی‌شود، فقط عقب می‌نشیند. */
.plan-card.is-closed { background: var(--surface-2); color: var(--ink-2); }

.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.plan-head h3 { margin: 0; font-size: var(--fs-m); }

@media (max-width: 40rem) {
  .file-head { grid-template-columns: auto minmax(0, 1fr); }
  .file-head > .file-actions { grid-column: 1 / -1; }
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}

.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.25rem; margin: 0; }
.details dt { color: var(--ink-3); font-size: var(--fs-s); }
.details dd { margin: 0; overflow-wrap: anywhere; }

.reviewed { color: var(--ink-3); font-size: var(--fs-s); margin-block-end: 0.75rem; }
.reviewed.is-stale { color: var(--amber-700); }

.conditions { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.conditions li {
  padding: 0.125rem 0.75rem;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-pill);
  background: var(--cyan-50);
  color: var(--navy-900);
  font-size: var(--fs-s);
  font-weight: 500;
}

.conditions li.is-critical { border-color: var(--alert-600); background: var(--alert-50); color: var(--alert-700); }

/* ---------- چارت انتخاب دندان ---------- */
/* جهت آناتومیک است (dir="ltr" در markup): سمت راست بیمار در چپ صفحه، در RTL هم آینه نمی‌شود. */

.tooth-picker { display: grid; gap: 0.5rem; margin-block-start: 1.25rem; }

.tooth-picker-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tooth-chart {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  overflow-x: auto;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-2);
}

.tooth-quadrant { display: flex; gap: 0.25rem; padding: 0.5rem; }

/* خط میانی صورت و صفحه‌ی اکلوزال، مثل چارت کاغذی */
.tooth-quadrant:nth-child(odd) { border-inline-end: 2px solid var(--line-strong); }
.tooth-quadrant:nth-child(-n + 2) { border-block-end: 2px solid var(--line-strong); }

.tooth-btn {
  inline-size: 2.375rem;
  block-size: 2.625rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9px 9px 14px 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

/* تاج دندان‌های فک پایین رو به بالاست */
.tooth-quadrant:nth-child(n + 3) .tooth-btn { border-radius: 14px 14px 9px 9px; }
.tooth-btn:hover { border-color: var(--navy-700); color: var(--navy-700); }
.tooth-btn.is-selected { background: var(--fill); border-color: var(--fill); color: var(--fill-ink); box-shadow: 0 0 0 3px var(--cyan-100); }
.tooth-picker-foot { color: var(--ink-2); font-size: var(--fs-s); }

.surfaces-picker { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; border: 0; }
.surfaces-picker .checks { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.surface-code { margin-inline-start: auto; color: var(--ink-3); font-weight: 600; }

/* ---------- چارت وضعیت دندان‌ها ---------- */
/* رنگ معنای بالینی دارد: کهربایی = یافته‌ی نیازمند درمان (پوسیدگی، شکستگی)، سرمه‌ای = کار انجام‌شده،
   فیروزه‌ای = روکش و لمینیت. قرمز عمداً نه — قرمز مال هشدار پزشکی بالای پرونده است. */

/* معاینه‌ی تازه بالا، معاینه‌های پیشین زیرش — نه ستونِ کنار.
   چارت پهن است و ستونِ کناری آن را باریک می‌کرد؛ فهرستِ معاینه‌ها هم چیزی نیست که هنگام
   ثبت لازم باشد، پس جایش پایین است نه پهلوی دست. */
.exam-layout { display: grid; gap: 1rem; align-items: start; }

/* ویرایشگرِ دندان روی خودِ چارت باز می‌شود، پس صحنه باید لنگرِ موقعیت باشد. */
.chart-stage { position: relative; }

.tooth-pop {
  position: absolute;
  z-index: 32;
  inline-size: min(26rem, calc(100vw - 2rem));
  max-block-size: min(28rem, 70vh);
  overflow-y: auto;
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 16px 40px rgb(var(--shadow-hue) / 0.22);
}

.tooth-pop-head { display: flex; align-items: flex-start; gap: 0.5rem; margin-block-end: 0.75rem; }
.tooth-pop-head h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; font-size: var(--fs-l); }
.tooth-pop-head .icon-btn { margin-inline-start: auto; }
.tooth-pop-body { display: grid; gap: 0.875rem; }
.tooth-pop .checks-conditions { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.tooth-pop .surfaces-picker + .surfaces-picker { margin-block-start: 0.5rem; }

/* روی صفحه‌ی باریک، «کنارِ دندان» معنا ندارد: برگه از پایین بالا می‌آید و تمام عرض را می‌گیرد. */
@media (max-width: 48rem) {
  .tooth-pop {
    position: fixed;
    inset: auto 0 0 0;
    inline-size: 100%;
    max-block-size: 80vh;
    border-radius: var(--r-l) var(--r-l) 0 0;
  }
}

/* دندان‌هایی که در این معاینه گذاشته شده‌اند — پیش از اینکه چیزی به سرور برود. */
.exam-draft { display: grid; gap: 0.75rem; margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }

.draft-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.draft-chips li {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface-2);
  overflow: hidden;
}

.chip-open { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.3rem 0.625rem; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-s); cursor: pointer; }
.chip-open .num { font-weight: 700; color: var(--navy-900); }
.chip-open:hover { background: var(--surface); }
.chip-drop { display: grid; place-items: center; padding-inline: 0.45rem; border: 0; border-inline-start: 1px solid var(--line); background: none; color: var(--ink-3); cursor: pointer; }
.chip-drop:hover { background: var(--alert-50); color: var(--alert-600); }

/* فهرست معاینه‌ها */
.exam-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.exam-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}

.exam-list li.is-active { border-color: var(--navy-700); background: var(--cyan-50); }
.exam-open { flex: 1 1 auto; display: grid; gap: 0.125rem; min-inline-size: 0; padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.exam-when { font-weight: 600; color: var(--navy-900); font-size: var(--fs-s); }
.exam-who, .exam-teeth { color: var(--ink-3); font-size: var(--fs-xs); }
.exam-open:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; border-radius: var(--r-s); }

/* پیوندِ جدولِ پریودنتال زیرِ فهرستِ معاینه‌ها: فرعی، ولی پیداشدنی. */
.exam-perio-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-s);
}
.exam-perio-link .muted { font-size: var(--fs-xs); }

/* دکمه‌ی سگمنتی — هم‌شکلِ segment-link، ولی چیزی که ناوبری نیست. */
.segment-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}

.segment-btn:hover { color: var(--navy-900); }
.segment-btn.is-active { background: var(--surface); color: var(--navy-900); font-weight: 500; box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.16); }
.segment-btn:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 1px; }

.dental-chart { display: grid; gap: 0.75rem; }

.chart-tooth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  inline-size: 2.5rem;
  padding: 0.25rem 0.125rem;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: none;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

button.chart-tooth { cursor: pointer; }
button.chart-tooth:hover { border-color: var(--line-strong); background: var(--surface); }
.chart-tooth.is-selected { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); box-shadow: 0 0 0 2px var(--cyan-100); }

/* شماره همیشه بیرون قوس: بالای دندان‌های بالا، زیر دندان‌های پایین */
.tooth-quadrant:nth-child(n + 3) .chart-tooth { flex-direction: column-reverse; }

/* قوسِ فک. جابه‌جاییِ عمودی است نه چرخش، تا شماره‌ی دندان افقی و خوانا بماند.
   `--arc` را خودِ کامپوننت برای هر دندان حساب می‌کند: صفر برای ثنایاها، بیشینه برای مولرها. */
.is-arch .chart-tooth { transform: translateY(var(--arc, 0)); }

/* روی قوس، فضای عمودیِ بیشتری لازم است وگرنه مولرها از کادر بیرون می‌زنند. */
.is-arch .tooth-quadrant { padding-block: 3.25rem; }

/* خط افقیِ اکلوزال با قوس معنا ندارد — خودِ دو قوس، بالا و پایین را جدا می‌کنند.
   خط میانی می‌ماند چون مرزِ راست و چپِ بیمار است. */
.is-arch .tooth-quadrant:nth-child(-n + 2) { border-block-end: 0; }
.is-arch .tooth-quadrant:nth-child(odd) { border-inline-end: 1px dashed var(--line-strong); }

@media (prefers-reduced-motion: no-preference) {
  .chart-tooth { transition: transform 160ms ease; }
}

.glyph { inline-size: 1.875rem; block-size: auto; overflow: visible; }
.glyph .region { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.glyph .f-caries { fill: var(--amber-500); }
.glyph .f-filled { fill: var(--navy-700); }
.glyph .f-veneer { fill: var(--cyan-400); }
.glyph .outline { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.glyph .root { fill: var(--line); }
.glyph .root.f-caries { fill: var(--amber-500); }
.glyph .root.f-filled { fill: var(--navy-700); }
.glyph.is-crown .region:not(.f-caries, .f-filled) { fill: var(--cyan-100); }
.glyph.is-crown .outline { stroke: var(--navy-700); stroke-width: 3; }
.glyph.is-healthy .outline { stroke: var(--cyan-500); stroke-width: 1.8; }

/* ---------- چارت پریودنتال ---------- */
/* فقط عددِ عمق رنگ می‌گیرد نه کل ردیف: کهربایی = پاکت ۴ و ۵، کهربایی پررنگ = ۶ به بالا.
   قرمز فقط برای خونریزی است که واقعاً خون است، نه برای «بد بودن» عدد. */

.perio-scroll { overflow-x: auto; }
.perio-scroll table { min-inline-size: 32rem; }

.perio-depth {
  display: inline-block;
  min-inline-size: 1.5rem;
  padding-inline: 0.25rem;
  border-radius: var(--r-s);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.perio-depth.is-deep { background: var(--amber-50); color: var(--amber-700); }
.perio-depth.is-severe { background: var(--amber-100); color: var(--amber-700); font-weight: 700; }
.perio-bleed { color: var(--alert-600); }

.perio-sites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.perio-site {
  display: grid;
  gap: 0.375rem;
  padding: 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface-2);
}

.perio-site h4 { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.perio-site .perio-code { color: var(--ink-3); font-weight: 700; }
.perio-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.perio-nums label { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.perio-flags { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; font-size: var(--fs-xs); }
.perio-flags label { display: flex; align-items: center; gap: 0.25rem; }

.perio-pending { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.perio-tooth-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.glyph.is-impacted .outline { stroke: var(--navy-700); stroke-width: 1.8; stroke-dasharray: 3 2.5; }
.glyph .is-faded { opacity: 0.3; }
.glyph .m-missing { stroke: var(--ink-2); stroke-width: 2.4; stroke-linecap: round; }
.glyph .m-rct { stroke: var(--navy-900); stroke-width: 2.6; stroke-linecap: round; }
.glyph .m-implant { fill: none; stroke: var(--navy-700); stroke-width: 2; stroke-linecap: round; }
.glyph .m-bridge { fill: var(--navy-800); }
.glyph .m-fracture { fill: none; stroke: var(--amber-700); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.glyph .m-mobile { fill: none; stroke: var(--amber-700); stroke-width: 1.8; stroke-linecap: round; }

.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.chart-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.chart-legend .glyph { inline-size: 1.25rem; }

.chart-summary { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chart-summary-empty { margin-block-end: 0.75rem; }

.tooth-editor { display: grid; gap: 1rem; align-content: start; }
.tooth-editor h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tooth-editor h3 { margin-block-end: 0.375rem; font-size: var(--fs-s); }
.condition-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }

.condition-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.cond-name { font-weight: 600; }

/* نقطه‌ی رنگی همان رنگی است که روی چارت کشیده می‌شود؛ مدیر بدون باز کردنِ پرونده‌ی بیمار
   می‌بیند چه انتخاب کرده. */
.cond-swatch::before {
  content: "";
  display: inline-block;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  margin-inline-end: 0.45rem;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 999px;
  background: var(--cond, var(--ink-3));
  vertical-align: -0.05em;
}
.cond-surfaces { color: var(--ink-2); font-size: var(--fs-s); }
.cond-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.375rem; color: var(--ink-3); font-size: var(--fs-xs); }
.cond-note { margin-block-start: 0.25rem; color: var(--ink-2); font-size: var(--fs-s); }
.checks-conditions { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.check-healthy:has(input:checked) { border-color: var(--cyan-500); }

.history-list {
  list-style: none;
  display: grid;
  gap: 0.625rem;
  margin: 0.5rem 0 0;
  padding: 0;
  padding-inline-start: 0.875rem;
  border-inline-start: 2px solid var(--line);
}

.history-list li { display: grid; gap: 0.125rem; font-size: var(--fs-s); }
.history-list .cond-meta { margin: 0; }

/* ---------- نوبت‌ها ---------- */

.day-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

/* نوارِ روزِ نوبت‌ها و صندوق: یک کادر با دو سر — رفتن بین روزها در شروع، نامِ روز و فاصله‌اش
   تا امروز در انتها. */
.day-bar {
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.day-nav-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* دکمه‌ها هم‌قدِ خانه‌ی تاریخ: پیش‌تر دکمه‌ی کوچک کنار خانه‌ی بلندتر، نوار را ناهم‌تراز می‌کرد. */
.day-nav:has(.field-day) .btn { min-block-size: 2.625rem; }
.field-day { inline-size: 9.5rem; }

.day-nav-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--fs-l);
}

.day-nav-title strong { color: var(--navy-900); font-weight: 600; }

.day-nav-today {
  padding: 0 0.625rem;
  border-radius: var(--r-pill);
  background: var(--cyan-100);
  color: var(--navy-900);
  font-size: var(--fs-s);
  font-weight: 500;
}

.field-day input { text-align: center; }

/* ---------- چیدمانِ برنامه و فرمِ کناری ----------
   ستون‌ها به عرضِ خودِ این قاب نگاه می‌کنند نه پنجره: نوار کناریِ پنل هم جا می‌گیرد. */
.appt-frame { container: appt / inline-size; }

.appt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

/* صفحه‌ی باریک: برنامه اول، فرم زیرش. فرم روی گوشی برنامه‌ی روز را یک صفحه پایین می‌راند؛ دکمه‌ی «نوبت تازه»ِ
   بالای صفحه مستقیم به فرم می‌برد. */
.booking-side { order: 1; min-inline-size: 0; scroll-margin-block-start: 1rem; }

/* صفحه‌ی پهن: فرم در ستونِ اول (سمتِ راست) و برنامه کنارش — جابه‌جا به خواستِ کاربر (مهر ۱۴۰۵). ترتیبِ markup هم
   همین است، پس Tab اول به فرم می‌رود. */
@container appt (min-width: 56rem) {
  .appt-layout.has-form { grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr); }

  /* فرم کنارِ برنامه می‌چسبد و با اسکرولِ برنامه‌ی بلند همراه می‌آید. */
  .booking-side {
    position: sticky;
    inset-block-start: 1rem;
    order: 0;
    max-block-size: calc(100dvh - 2rem);
    overflow-y: auto;
    border-radius: var(--r-l);
    scrollbar-width: thin;
  }
}

/* برنامه‌ی روز با صفحه‌ی پهن‌تر از بقیه: ستونِ هر پزشک جا می‌خواهد. */
.page:has(.appt-frame) { max-inline-size: 100rem; }

.booking-card .panel-head { margin-block-end: 0; }
.booking-card .panel-head h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--fs-l); }
.booking-card .panel-head h2 .icon { color: var(--navy-700); }
.booking-card { padding: 1.125rem; }
.booking-card .form-grid { grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr)); gap: 0.875rem 0.75rem; }
.booking-card .field:has(.jdate) { grid-column: 1 / -1; }
.booking-card .choice-cards { gap: 0.375rem; }
.booking-card .form-actions .btn-primary { flex: 1; }

.panel-day { display: grid; gap: 0.75rem; align-content: start; }
.day-head { flex-wrap: wrap; margin-block-end: 0; }
.day-head h2 { margin: 0; }

/* تراشه‌های فیلتر: رادیو، ولی به شکلِ برچسبِ کوچک. */
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.filter-chip { position: relative; }
.filter-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.filter-chip span {
  display: inline-block;
  padding: 0.1875rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-s);
  line-height: 1.8;
}

.filter-chip:hover span { border-color: var(--navy-700); }
.filter-chip input:checked + span { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); font-weight: 500; }
.filter-chip input:focus-visible + span { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* پنجره‌ی لغو و جابه‌جایی زیرِ همان ردیف: تورفته و با خطِ اتصال به ردیفِ بالایش. */
.appointment-inline { list-style: none; }
.appointment-inline .action-panels { margin-inline-start: 1.25rem; padding-inline-start: 0.75rem; border-inline-start: 2px solid var(--line-strong); }
.action-panels { display: grid; gap: 0.75rem; }
.action-panels > :where(.confirm-panel, .gap-fill) { margin: 0; }
.day-doctor { margin-block-start: 0.5rem; font-size: var(--fs-s); color: var(--navy-900); }

.appointment-list { list-style: none; display: grid; gap: 0.375rem; margin: 0; padding: 0; }

.appointment-row {
  display: grid;
  /* چهار خانه برای چهار چیز: ساعت، بیمار، وضعیت، کنش‌ها.
     پیش‌تر سه ستون بود و چهار فرزند، پس کنش‌ها به سطر دوم و داخل ستونِ ۸۸ پیکسلیِ ساعت
     می‌افتادند — و با «یک خط»، از کادر بیرون می‌زدند. */
  grid-template-columns: 5.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--cyan-500);
  border-radius: var(--r-m);
  background: var(--surface);
}

.appointment-row.is-closed { border-inline-start-color: var(--line-strong); background: var(--surface-2); color: var(--ink-3); }
.appointment-time { display: grid; font-weight: 600; line-height: 1.5; }
.appointment-time small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.appointment-patient { display: grid; gap: 0.125rem; min-inline-size: 0; }
.appointment-patient a { font-weight: 500; text-decoration: none; }
.appointment-patient a:hover { text-decoration: underline; }
.appointment-patient .note-line { display: flex; flex-wrap: wrap; gap: 0.125rem 0.625rem; }
/* فهرستِ نوبت‌ها ظرفِ خودش است، نه پنجره: این فهرست داخل یک ستونِ دوستونی می‌نشیند و
   پهنایش نصفِ صفحه است. قاعده‌ی پیشین به پهنای پنجره نگاه می‌کرد، پس روی صفحه‌ی پهن
   «یک خط» را اجبار می‌کرد در حالی که ستون جا نداشت و دکمه‌ها از کادر بیرون می‌زدند. */
.appointment-list { container-type: inline-size; }

.appt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; grid-column: 1 / -1; min-inline-size: 0; }

.appointment-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }

@container (min-width: 46rem) {
  .appt-actions { grid-column: auto; justify-content: flex-end; }
  .appt-actions.is-tight { flex-wrap: nowrap; }
}

/* موبایل: ساعت و بیمار کنار هم، وضعیت زیر آن‌ها */
@media (max-width: 40rem) {
  .appointment-row { grid-template-columns: 4.25rem minmax(0, 1fr); }
  .appointment-row .pill { grid-column: 2; justify-self: start; }
}

.picker-results { list-style: none; display: grid; gap: 0.125rem; margin: 0.25rem 0 0; padding: 0; }

.picker-results button {
  inline-size: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  text-align: start;
  cursor: pointer;
}

.picker-results button:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.chosen-patient { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* ---------- تب‌های پرونده ---------- */

.patient-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block-end: 1.25rem;
  border-block-end: 1px solid var(--line);
}

.patient-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-block-end: 2px solid transparent;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
}

.patient-tab:hover { color: var(--navy-700); }
.patient-tab.active { border-block-end-color: var(--navy-700); color: var(--navy-900); }
.patient-tab.active .icon { color: var(--cyan-500); }

/* جداکننده‌ی گروه‌های تب. تزئینی است، پس در صفحه‌های باریک که تب‌ها می‌شکنند برداشته می‌شود. */
.patient-tabs-sep { align-self: stretch; inline-size: 1px; margin-inline: 0.5rem; background: var(--line); }
@media (max-width: 60rem) { .patient-tabs-sep { display: none; } }

/* ---------- حساب و پرداخت بیمار ---------- */

.account-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.account-card {
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.account-card dt { color: var(--ink-3); font-size: var(--fs-xs); }
.account-card dd { margin: 0; font-size: var(--fs-l); font-weight: 600; font-variant-numeric: tabular-nums; }

/* مانده رنگ می‌گیرد چون اولین چیزی است که منشی و بیمار دنبالش می‌گردند */
.account-card-balance { border-color: var(--navy-700); }
.account-card-balance.is-debtor { border-color: var(--amber-500); background: var(--amber-50); }
.account-card-balance.is-creditor { border-color: var(--ok-700); background: var(--ok-50); }
.account-side { margin-inline-start: 0.25rem; font-weight: 500; }

/* min(...) لازم است: بدون آن، ستونِ ۲۲rem در گوشی از عرض صفحه بیرون می‌زند و اسکرول افقی می‌سازد. */
.account-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}

.receipt-no { font-variant-numeric: tabular-nums; font-weight: 600; }
.row-voided td { color: var(--ink-3); }
.row-voided .num { text-decoration: line-through; }
.data tfoot td { border-block-start: 1px solid var(--line-strong); background: var(--surface-2); font-weight: 600; }
.segment input:disabled + span { opacity: 0.5; cursor: not-allowed; }

/* ---------- دفتر روزنامه ---------- */

.journal { list-style: none; display: grid; gap: 0.75rem; margin: 0; padding: 0; }
.journal-entry { display: grid; gap: 0.5rem; }
.journal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.journal-number { font-weight: 600; color: var(--navy-900); }
.journal-description { color: var(--ink-2); }

/* ---------- ویرایش و حذف درمان ---------- */

.col-actions { inline-size: 1%; white-space: nowrap; text-align: end; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}

.icon-btn:hover { border-color: var(--line-strong); background: var(--surface); color: var(--navy-700); }
.icon-btn-danger:hover { border-color: var(--alert-200); background: var(--alert-50); color: var(--alert-600); }

/* پرسش پیش از کار برگشت‌ناپذیر: قرمزِ «خطر»، مثل غیرفعال کردن کارمند */
.confirm-panel {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--alert-200);
  border-inline-start: 4px solid var(--alert-600);
  border-radius: var(--r-m);
  background: var(--alert-50);
}

.confirm-panel h3 { font-size: var(--fs-m); color: var(--alert-700); }

/* دو گونه‌ی آرام‌تر. باید *بعد* از قاعده‌ی پایه بیایند: هم‌وزن‌اند و هر کدام پایین‌تر باشد
   برنده است — پیش‌تر بالاتر بودند و اصلاً اثری نداشتند. */
.confirm-panel-calm { border-color: var(--line-strong); border-inline-start-color: var(--navy-700); background: var(--surface-2); }
.confirm-panel-calm h3 { color: var(--navy-900); }

/* هشدار، نه خطا: کار متوقف نشده و کاربر می‌تواند ادامه بدهد — کهربایی، نه قرمز. */
.confirm-panel-warn { border-color: var(--amber-500); border-inline-start-color: var(--amber-500); background: var(--amber-50); }
.confirm-panel-warn h3 { display: flex; align-items: center; gap: 0.375rem; color: var(--amber-700); }
.choice-card:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.choice-card:has(input:disabled) input { cursor: not-allowed; }

/* ---------- صف تأیید ---------- */

.action-bar {
  position: sticky;
  inset-block-end: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-l);
  background: var(--fill-deep);
  color: #fff;
  box-shadow: 0 10px 28px rgb(var(--shadow-hue) / 0.28);
}

.action-bar .btn-primary { background: var(--cyan-400); border-color: var(--cyan-400); color: var(--navy-950); }

/* ---------- ورود ---------- */

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-block-size: 100dvh;
  background: var(--surface);
}

.auth-panel { display: grid; align-content: center; padding: 2.5rem clamp(1.25rem, 6vw, 5rem); }
.auth-inner { display: grid; gap: 1.5rem; inline-size: min(100%, 24rem); justify-self: center; }
.auth-brand { display: flex; align-items: center; gap: 0.625rem; color: var(--navy-900); font-weight: 600; }
.auth-brand .brand-mark { background: var(--cyan-50); color: var(--navy-700); }
.auth-form { display: grid; gap: 1rem; }
.auth-form h1 { margin-block-end: 0.25rem; }

.auth-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--fill-deep);
  color: var(--cyan-400);
}

.auth-art svg { inline-size: min(78%, 26rem); block-size: auto; }

.auth-art-caption {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline: 2rem;
  color: #A9C4E6;
  font-size: var(--fs-s);
  text-align: center;
}

/* تنها لحظه‌ی حرکتی پنل: دندان‌های چارت یک بار به ترتیب FDI روشن می‌شوند */
.tooth-shape {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0;
  animation: tooth-in 0.45s ease-out forwards;
  animation-delay: calc(var(--i) * 35ms + 200ms);
}

.tooth-shape.is-marked { fill: currentColor; }

@keyframes tooth-in { to { opacity: 0.85; } }

@media (prefers-reduced-motion: reduce) {
  .tooth-shape { animation: none; opacity: 0.85; }
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 3rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  cursor: pointer;
}

.choice:has(input:checked) { border-color: var(--navy-700); background: var(--cyan-50); }
.choice input { accent-color: var(--navy-700); margin: 0; }
.tenant-choice { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; }

@media (max-width: 52rem) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }
}

/* ---------- نصب روی دستگاه و به‌روزرسانی (PWA) ---------- */

/* نوار «نسخه‌ی تازه آماده است». پایین صفحه و بالای همه‌چیز، ولی نه روی محتوای چاپی. */
.app-update {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
  z-index: 1200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-inline-size: 32rem;
  margin-inline: auto;
  padding: 0.75rem 1rem;
  border-radius: var(--r-m);
  background: var(--fill-strong);
  color: #fff;
  box-shadow: 0 8px 24px rgb(var(--shadow-hue) / 0.28);
}

.app-update span { flex: 1 1 12rem; }
.app-update .btn-ghost { color: #fff; }
.app-update .btn-ghost:hover { background: rgb(255 255 255 / 0.12); }

@media print { .app-update { display: none; } }

/* ---------- پورتال بیمار ----------
   پنل برای کسی است که هشت ساعت با آن کار می‌کند؛ پورتال برای کسی که ماهی یک بار، با گوشی،
   و معمولاً عجله دارد. متن بزرگ‌تر، کارتِ کم، ناوبری پایینِ صفحه جایی که شست می‌رسد — و یک
   چیزِ به‌یادماندنی: «بلیتِ» نوبتِ بعدی. بقیه آرام است. */

.portal {
  --portal-width: 42rem;
  min-block-size: 100dvh;
  padding-block-end: calc(4.75rem + env(safe-area-inset-bottom));
  background: var(--ground);
}

.portal-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem max(1rem, calc((100% - var(--portal-width)) / 2));
  border-block-end: 1px solid var(--line);
  background: var(--surface);
}

.portal-clinic {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-inline-size: 0;
  margin-inline-end: auto;
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
}

.portal-clinic-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-logo { flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-s); background: #fff; object-fit: contain; }

.portal-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-800);
}

.portal-me {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: var(--fs-s);
  text-decoration: none;
}

.portal-me:focus-visible { outline: none; box-shadow: var(--ring); }
.portal-me.active .portal-avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--cyan-500); }
.portal-me-name { display: none; }

.portal-avatar {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--fill);
  color: var(--fill-ink);
  font-weight: 700;
}

.portal-avatar-large { flex: none; inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--fs-xl); }

/* زبانه‌ها روی گوشی: نوارِ پایینِ صفحه با نشانگرِ کپسولیِ زیرِ آیکونِ فعال. */
.portal-nav {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -4px 18px rgb(var(--shadow-hue) / 0.07);
}

.portal-tab {
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 0.125rem;
  min-block-size: 3.25rem;
  padding-block: 0.375rem;
  border-radius: var(--r-m);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.portal-tab .icon { box-sizing: content-box; padding: 0.1875rem 0.875rem; border-radius: var(--r-pill); }
.portal-tab.active { color: var(--navy-900); font-weight: 600; }
.portal-tab.active .icon { background: var(--cyan-100); color: var(--navy-900); }
.portal-tab:focus-visible { outline: 2px solid var(--navy-700); outline-offset: -2px; }

.portal-main {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  inline-size: min(var(--portal-width), 100%);
  margin-inline: auto;
  padding: 1.25rem 1rem 2rem;
}

.portal-main p { line-height: 1.85; }

/* روی رایانه همان زبانه‌ها در سربرگ‌اند و نوارِ پایین نیست. */
@media (min-width: 56rem) {
  .portal { padding-block-end: 2rem; }
  .portal-me-name { display: inline; }

  .portal-nav {
    position: static;
    justify-content: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .portal-tab {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.5rem;
    padding-inline: 0.875rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-s);
  }

  .portal-tab .icon { padding: 0; }
  .portal-tab.active { background: var(--cyan-50); }
  .portal-tab.active .icon { background: none; }
  .portal-tab:hover { background: var(--surface-2); color: var(--ink); }
}

/* سرتیترها */
.portal-hello { display: grid; gap: 0.125rem; }
.portal-hello-time { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }
.portal-hello h1 { margin: 0; color: var(--navy-900); font-size: var(--fs-2xl); line-height: 1.3; }

.portal-page-head { display: flex; align-items: center; gap: 0.75rem; }
.portal-page-head h1 { margin: 0; margin-inline-end: auto; color: var(--navy-900); font-size: var(--fs-xl); }

.portal-back {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy-800);
}

.portal-section { display: grid; gap: 0.75rem; }
.portal-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.portal-section-head h2 { margin: 0; color: var(--navy-900); font-size: var(--fs-l); }
.portal-section-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--navy-900); font-size: var(--fs-l); }
.portal-section-title .icon { color: var(--cyan-500); }

.portal-next { display: grid; gap: 0.625rem; }
.portal-stack { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }

.portal-quiet {
  margin: 0;
  padding: 1rem;
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--fs-s);
}

.portal-empty-card {
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  padding: 1.75rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink-2);
  text-align: center;
}

.portal-empty-card p { margin: 0; }
.portal-empty-card .icon { color: var(--cyan-500); }

/* ---------- کارتِ نوبت ---------- */

.visit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.visit.is-off { opacity: 0.65; }

.visit-date {
  display: grid;
  align-content: center;
  justify-items: center;
  inline-size: 4rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-900);
  line-height: 1.25;
}

.visit-weekday { color: var(--ink-2); font-size: var(--fs-xs); }
.visit-day { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.visit-month { font-size: var(--fs-xs); font-weight: 600; }

.visit-body { display: grid; align-content: center; gap: 0.125rem; min-inline-size: 0; }
.visit-body p { margin: 0; line-height: 1.7; }
.visit-when { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; color: var(--navy-900); }
.visit-ahead { color: var(--navy-800); }
.visit-date-long { color: var(--ink-3); font-size: var(--fs-xs); }
.visit-who { display: flex; flex-wrap: wrap; gap: 0.125rem 0.5rem; font-weight: 600; }
.visit-what { color: var(--ink-2); font-weight: 400; }
.visit-where { display: flex; align-items: flex-start; gap: 0.375rem; color: var(--ink-3); font-size: var(--fs-s); }
.visit-where .icon { flex: none; margin-block-start: 0.3rem; }

.visit-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 0.375rem; margin-block-start: 0.5rem; }

.visit-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: 2.5rem;
  padding-inline: 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--navy-800);
  font: inherit;
  font-size: var(--fs-s);
  text-decoration: none;
  cursor: pointer;
}

.visit-action:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.visit-action:focus-visible { outline: none; box-shadow: var(--ring); }
.visit-action[disabled] { opacity: 0.6; cursor: progress; }
.visit-action-quiet { color: var(--ink-2); }

.visit-confirm {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--amber-100);
  border-radius: var(--r-m);
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: var(--fs-s);
}

.visit-confirm p { margin: 0; }
.visit-confirm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.visit-note { grid-column: 1 / -1; margin: 0.25rem 0 0; color: var(--ink-3); font-size: var(--fs-xs); }

/* نوبتِ بعدی: «بلیت». تنها جای پررنگِ پورتال — همان چیزی که بیمار برایش آمده. */
.visit-hero {
  padding: 1.25rem;
  border: 0;
  background: linear-gradient(155deg, var(--fill-strong), var(--fill-deep));
  color: #fff;
  box-shadow: 0 14px 30px -16px rgb(var(--shadow-hue) / 0.6);
}

.visit-hero .visit-date { background: rgb(255 255 255 / 0.13); color: #fff; }
.visit-hero .visit-day { font-size: 2.125rem; }
.visit-hero .visit-weekday,
.visit-hero .visit-date-long,
.visit-hero .visit-what,
.visit-hero .visit-where,
.visit-hero .visit-note { color: rgb(255 255 255 / 0.8); }
.visit-hero .visit-when,
.visit-hero .visit-ahead { color: #fff; }
.visit-hero .visit-ahead { font-size: var(--fs-l); }
.visit-hero .visit-note a { color: #fff; }

.visit-hero .visit-actions {
  margin-block-start: 0.75rem;
  padding-block-start: 0.875rem;
  border-block-start: 1px dashed rgb(255 255 255 / 0.3);
}

.visit-hero .visit-action { border-color: rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.1); color: #fff; }
.visit-hero .visit-action:hover { background: rgb(255 255 255 / 0.2); }
.visit-hero .visit-confirm { border-color: rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.12); color: #fff; }

/* ---------- کارت‌های خانه ---------- */

.portal-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 0.625rem; }

.portal-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--cyan-500);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.portal-tile:hover { border-color: var(--navy-700); }
.portal-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.portal-tile .icon { flex: none; margin-block-start: 0.2rem; color: var(--navy-700); }
.portal-tile > span { display: grid; gap: 0.125rem; min-inline-size: 0; }
.portal-tile strong { font-weight: 600; }
.portal-tile small { color: var(--ink-3); font-size: var(--fs-xs); }
.portal-tile.is-waiting, .portal-tile.is-due { border-inline-start-color: var(--amber-500); }
.portal-tile.is-due strong { color: var(--amber-700); }
.portal-tile.is-credit { border-inline-start-color: var(--ok-700); }

/* پیشرفت از سمتِ شروع (راست) پر می‌شود. */
.tile-meter {
  display: block;
  block-size: 0.375rem;
  margin-block: 0.25rem;
  border-radius: var(--r-pill);
  background: linear-gradient(to left, var(--cyan-500) var(--done), var(--line) var(--done));
}

.portal-aftercare {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.125rem;
  border-radius: var(--r-l);
  background: var(--cyan-50);
  color: var(--navy-900);
}

.portal-aftercare h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--fs-m); }
.portal-aftercare .hint { margin: 0; }
.portal-aftercare-text { margin: 0; line-height: 2; white-space: pre-line; }

.portal-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }

.portal-quick-main {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--navy-900);
  text-decoration: none;
}

.portal-quick-main .icon { color: var(--cyan-500); }
.portal-quick-main span { display: grid; }
.portal-quick-main small { color: var(--ink-3); font-size: var(--fs-s); }

.portal-quick-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--navy-800);
  font-weight: 500;
  text-decoration: none;
}

.portal-quick-main:hover, .portal-quick-item:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.portal-quick-main:focus-visible, .portal-quick-item:focus-visible { outline: none; box-shadow: var(--ring); }

.portal-install {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
}

.portal-install > div { flex: 1; }
.portal-install h2 { margin: 0; font-size: var(--fs-m); }
.portal-install p { margin: 0; font-size: var(--fs-s); }
.portal-install .icon { color: var(--cyan-500); }

.portal-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  color: var(--ink-2);
  font-size: var(--fs-s);
  text-align: center;
}

.portal-contact a { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ---------- نوبت‌ها: زبانه‌ها، درخواست‌ها، گذشته ---------- */

.portal-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.portal-tabs-item {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-block-size: 2.5rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}

.portal-tabs-item.is-active { background: var(--surface); color: var(--navy-900); font-weight: 600; box-shadow: 0 1px 3px rgb(var(--shadow-hue) / 0.14); }
.portal-tabs-item:focus-visible { outline: none; box-shadow: var(--ring); }

.portal-tabs-count {
  min-inline-size: 1.375rem;
  padding-inline: 0.375rem;
  border-radius: var(--r-pill);
  background: var(--line);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.portal-tabs-count.is-pending { background: var(--amber-500); color: #fff; }

.request-card-portal {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.request-card-portal.is-pending { border-inline-start: 4px solid var(--amber-500); }
.request-card-portal.is-ok { border-inline-start: 4px solid var(--ok-700); }
.request-card-portal.is-off { opacity: 0.7; }
.request-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.request-meta { margin: 0; color: var(--ink-2); font-size: var(--fs-s); }

/* مسیرِ درخواست: سه ایستگاه روی یک خط. خطِ رابط از مرکزِ هر ایستگاه تا بعدی کشیده می‌شود. */
.request-track { display: flex; margin: 0.25rem 0; padding: 0; list-style: none; }

.request-track li {
  position: relative;
  display: grid;
  flex: 1;
  justify-items: center;
  gap: 0.125rem;
  padding-block-start: 1.25rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-align: center;
}

.request-track li::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: 0.25rem;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}

.request-track li::after {
  content: "";
  position: absolute;
  inset-block-start: 0.5625rem;
  inset-inline-start: 50%;
  inline-size: 100%;
  block-size: 2px;
  background: var(--line);
}

.request-track li:last-child::after { display: none; }
.request-track li.is-done { color: var(--ink-2); }
.request-track li.is-done::before, .request-track li.is-done::after { border-color: var(--cyan-500); background: var(--cyan-500); }
.request-track li.is-current { color: var(--amber-700); font-weight: 600; }
.request-track li.is-current::before { border-color: var(--amber-500); background: var(--amber-100); }
.request-track li.is-ok { color: var(--ok-700); font-weight: 600; }
.request-track li.is-ok::before { border-color: var(--ok-700); background: var(--ok-700); }
.request-track li.is-no::before, .request-track li.is-off::before { border-color: var(--ink-3); background: var(--ink-3); }
.request-track small { color: var(--ink-3); }

.portal-item-reply { margin: 0; padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); font-size: var(--fs-s); }

.portal-rows {
  display: grid;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  list-style: none;
}

.portal-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-block-end: 1px solid var(--line); font-size: var(--fs-s); }
.portal-row:last-child { border-block-end: 0; }
.portal-row-date { flex: none; min-inline-size: 5.5rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.portal-row-main { flex: 1; min-inline-size: 0; }
.portal-row.is-off { color: var(--ink-3); }

/* ---------- درخواست نوبت، سه قدم ---------- */

.book-steps { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }

.book-steps li {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding-block: 0.5rem;
  border-block-end: 3px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-s);
}

.book-steps li.is-current { border-color: var(--cyan-500); color: var(--navy-900); font-weight: 600; }
.book-steps li.is-done { border-color: var(--navy-700); color: var(--navy-800); }

.book-step-mark, .auth-step-mark {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: var(--fs-xs);
}

.is-current > .book-step-mark, .is-current > .auth-step-mark { background: var(--cyan-500); color: #fff; }
.is-done .book-step-mark, .is-done > .auth-step-mark { background: var(--navy-700); color: var(--fill-ink); }

.book-step-link { display: inline-flex; align-items: center; gap: 0.375rem; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.book-step-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-s); }

.book-form { display: grid; gap: 1rem; padding: 1.125rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.book-lead { margin: 0; padding: 0.75rem 0.875rem; border-radius: var(--r-m); background: var(--cyan-50); color: var(--navy-900); font-size: var(--fs-s); }
.book-form select, .book-form input:not([type="radio"], [type="checkbox"]), .book-form textarea { min-block-size: 2.75rem; }

.book-doctors { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.book-doctors legend { margin-block-end: 0.5rem; font-size: var(--fs-s); font-weight: 500; }
.book-doctors .choice-card { display: flex; justify-content: flex-start; gap: 0.75rem; padding: 0.625rem 0.875rem; }
.book-doctors .choice-card > span:last-child { display: grid; }

.choice-avatar {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-800);
  font-weight: 700;
}

.book-summary { display: grid; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: var(--r-m); }
.book-summary div { display: flex; gap: 0.75rem; padding: 0.625rem 0.875rem; border-block-end: 1px solid var(--line); }
.book-summary div:last-child { border-block-end: 0; }
.book-summary dt { flex: 0 0 5.5rem; color: var(--ink-3); font-size: var(--fs-s); }
.book-summary dd { margin: 0; font-weight: 600; }

.book-nav { display: flex; gap: 0.625rem; }
.book-nav .btn-primary { flex: 1; }

.book-done {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  text-align: center;
}

.book-done h2 { margin: 0; color: var(--navy-900); }
.book-done p { margin: 0; color: var(--ink-2); }

.book-done-mark {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  background: var(--ok-50);
  color: var(--ok-700);
}

.book-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.btn-tall { min-block-size: 3rem; font-size: var(--fs-m); }

/* ---------- درمان من ---------- */

.plan-card, .installment-plan {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.plan-card.is-closed { opacity: 0.8; }
.plan-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.plan-head h3 { margin: 0; color: var(--navy-900); font-size: var(--fs-m); }
.plan-head p { margin: 0.125rem 0 0; font-size: var(--fs-s); }

.plan-progress { overflow: hidden; block-size: 0.5rem; border-radius: var(--r-pill); background: var(--line); }
.plan-progress span { display: block; block-size: 100%; border-radius: inherit; background: var(--cyan-500); }
.plan-progress-label { margin: -0.375rem 0 0; color: var(--ink-3); font-size: var(--fs-xs); }

.plan-items { display: grid; margin: 0; padding: 0; list-style: none; }
.plan-item { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.625rem; border-block-end: 1px solid var(--line); }
.plan-item:last-child { border-block-end: 0; }

.plan-item-mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-3);
}

.plan-item.is-done .plan-item-mark { border-color: var(--cyan-500); background: var(--cyan-500); color: #fff; }
.plan-item.is-progress .plan-item-mark { border-color: var(--amber-500); color: var(--amber-700); }
.plan-item.is-accepted .plan-item-mark { border-color: var(--navy-700); color: var(--navy-700); }
.plan-item-main { display: grid; flex: 1; min-inline-size: 0; }
.plan-item-main small { display: flex; flex-wrap: wrap; gap: 0 0.625rem; color: var(--ink-3); font-size: var(--fs-xs); }
.plan-item.is-done .plan-item-main strong { color: var(--ink-2); font-weight: 500; }
.plan-item-price { color: var(--ink-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.plan-total { margin: 0; padding-block-start: 0.625rem; border-block-start: 1px dashed var(--line-strong); font-size: var(--fs-s); }
.plan-total .muted { margin-inline-start: 0.375rem; }

.aftercare-card, .rx-card, .invoice-card {
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.aftercare-card summary { display: grid; gap: 0.125rem; padding-block: 0.75rem; cursor: pointer; list-style: none; }
.aftercare-card summary small { color: var(--ink-3); font-size: var(--fs-xs); }
.aftercare-card[open] > summary { margin-block-end: 0.625rem; border-block-end: 1px solid var(--line); }
.aftercare-card .portal-aftercare-text { padding-block-end: 0.875rem; }

.aftercare-card summary::-webkit-details-marker,
.rx-card summary::-webkit-details-marker,
.invoice-card summary::-webkit-details-marker { display: none; }

.timeline-year { margin: 0.5rem 0 0; color: var(--ink-3); font-size: var(--fs-s); font-weight: 600; }

/* خطِ زمان: خط در سمتِ شروع و نقطه‌ی هر درمان روی آن. */
.timeline {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--line);
  list-style: none;
}

.timeline-item { position: relative; display: flex; align-items: center; gap: 0.75rem; padding-block: 0.5rem; }

.timeline-item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1rem - 6px);
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--cyan-500);
  box-shadow: 0 0 0 3px var(--ground);
}

.timeline-date { flex: none; min-inline-size: 5.5rem; color: var(--ink-3); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.timeline-main { display: grid; flex: 1; min-inline-size: 0; }
.timeline-main small { display: flex; flex-wrap: wrap; gap: 0 0.5rem; color: var(--ink-3); font-size: var(--fs-xs); }
.tooth-chip { color: var(--navy-800); }
.timeline-price { color: var(--ink-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }

.portal-callout {
  display: flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--amber-100);
  border-radius: var(--r-m);
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: var(--fs-s);
}

.portal-callout .icon { flex: none; margin-block-start: 0.3rem; }

.portal-facts { display: grid; gap: 0.375rem; margin: 0; }
.portal-facts > div { display: flex; gap: 0.5rem; }
.portal-facts dt { flex: 0 0 7rem; color: var(--ink-3); font-size: var(--fs-s); }
.portal-facts dd { margin: 0; }
.portal-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }

/* ---------- نسخه‌ها و صورتحساب‌ها ---------- */

.rx-card summary, .invoice-card summary { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.875rem; cursor: pointer; list-style: none; }
.rx-card[open] > summary, .invoice-card[open] > summary { border-block-end: 1px solid var(--line); }

.rx-icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-800);
}

.rx-head { display: grid; flex: 1; min-inline-size: 0; }
.rx-head small { color: var(--ink-3); font-size: var(--fs-xs); }
.rx-items { display: grid; gap: 0.5rem; margin: 0.875rem 0; padding-inline-start: 1.25rem; }
.rx-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.rx-dose { color: var(--ink-2); }
.rx-how { display: block; color: var(--ink-2); font-size: var(--fs-s); }
.rx-note { margin: 0 0 0.75rem; font-size: var(--fs-s); }
.rx-card > .btn { margin-block-end: 1rem; }

.invoice-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.invoice-lines { display: grid; gap: 0.375rem; margin: 0.75rem 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.invoice-lines li { display: flex; justify-content: space-between; gap: 1rem; }
.invoice-note { display: flex; gap: 1rem; margin: 0 0 0.75rem; color: var(--ink-3); font-size: var(--fs-xs); }
.invoice-card.is-off { opacity: 0.6; }

/* ---------- حساب ---------- */

.balance-card {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  text-align: center;
}

.balance-title { margin: 0; color: var(--ink-2); font-weight: 600; }
.balance-amount { margin: 0; color: var(--navy-900); font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance-amount span { color: var(--ink-2); font-size: var(--fs-m); font-weight: 400; }
.balance-note { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }
.balance-card.is-due { border-color: var(--amber-100); background: var(--amber-50); }
.balance-card.is-due .balance-amount { color: var(--amber-700); }
.balance-card.is-credit { border-color: transparent; background: var(--ok-50); }
.balance-card.is-credit .balance-amount { color: var(--ok-700); }

.balance-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid rgb(var(--shadow-hue) / 0.12);
  text-align: start;
}

.balance-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.balance-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.installment-list { display: grid; margin: 0; padding: 0; list-style: none; }
.installment { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.5rem; border-block-end: 1px solid var(--line); }
.installment:last-child { border-block-end: 0; }

.installment-seq {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.installment-main { display: grid; flex: 1; }
.installment-main small { color: var(--ink-3); font-size: var(--fs-xs); }
.installment-state { color: var(--ink-2); font-size: var(--fs-xs); }
.installment.is-paid .installment-seq { background: var(--cyan-500); color: #fff; }
.installment.is-paid .installment-main strong { color: var(--ink-3); font-weight: 500; }
.installment.is-overdue .installment-state { color: var(--amber-700); font-weight: 600; }
.installment.is-soon .installment-state { color: var(--navy-800); font-weight: 600; }

/* ---------- من ---------- */

.me-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.me-card h2 { margin: 0; color: var(--navy-900); font-size: var(--fs-l); }
.me-card p { margin: 0.125rem 0 0; }
.me-facts { padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.me-exit { display: grid; justify-items: start; gap: 0.5rem; }
.portal-call { justify-content: flex-start; padding-inline: 1rem; }

/* دکمه‌ای که مثل لینک دیده می‌شود — «شماره را عوض می‌کنم» داخل یک جمله. */
.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy-700);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

/* ---------- ورود بیمار ----------
   نوارِ رنگیِ بالا با کارتی که رویش نشسته؛ نشانِ مطب لبه‌ی کارت را می‌شکند. */

.portal-auth {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 1rem;
  min-block-size: 100dvh;
  padding: 0 1rem 1.5rem;
  background: linear-gradient(to bottom, var(--fill-strong) 0 11rem, var(--ground) 11rem);
}

.portal-auth-panel {
  inline-size: min(27rem, 100%);
  margin-block-start: 3.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 18px 40px -20px rgb(var(--shadow-hue) / 0.45);
}

.portal-auth-foot { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }
.portal-auth-inner { display: grid; gap: 1.25rem; }
.portal-auth-brand { display: grid; justify-items: center; gap: 0.5rem; margin-block-start: -3.5rem; text-align: center; }

.portal-auth-mark, .portal-auth-logo {
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  border: 4px solid var(--surface);
  border-radius: 1.25rem;
  background: var(--cyan-50);
  color: var(--navy-800);
  box-shadow: 0 6px 16px -8px rgb(var(--shadow-hue) / 0.4);
  object-fit: contain;
}

.portal-auth-logo { background: #fff; }
.portal-auth-clinic { margin: 0; color: var(--navy-900); font-size: var(--fs-l); font-weight: 700; }

.auth-steps { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.auth-steps li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  padding-block-end: 0.5rem;
  border-block-end: 3px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-s);
}

.auth-steps li.is-current { border-color: var(--cyan-500); color: var(--navy-900); font-weight: 600; }
.auth-steps li.is-done { border-color: var(--navy-700); color: var(--navy-800); }

.auth-intro h1 { margin: 0 0 0.25rem; color: var(--navy-900); font-size: var(--fs-xl); }
.auth-intro p { margin: 0; line-height: 1.9; }

/* آیکون در سمتِ شروعِ صفحه (راست) است؛ ورودیِ شماره dir=ltr است، پس فاصله‌اش در انتهای خودش
   (همان راست) می‌نشیند — نه padding فیزیکی. */
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon .icon { position: absolute; inset-inline-start: 0.875rem; color: var(--ink-3); pointer-events: none; }
.input-icon input { inline-size: 100%; min-block-size: 3.25rem; padding-inline-end: 2.75rem; font-size: var(--fs-l); }

/* کد شش‌رقمی: بزرگ و با فاصله‌ی ارقام، چون از روی پیامک خوانده و تایپ می‌شود.
   letter-spacing فقط این‌جا مجاز است — محتوایش رقم است، نه حروف چسبانِ فارسی. */
.code-input {
  min-block-size: 3.5rem;
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5em;
  text-align: center;
}

.auth-remember { padding-inline: 0.875rem; border: 1px solid var(--line); border-radius: var(--r-m); }

.auth-perks {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-s);
  list-style: none;
}

.auth-perks li { display: flex; align-items: center; gap: 0.625rem; }
.auth-perks .icon { flex: none; color: var(--cyan-500); }
.auth-help { text-align: center; }

@media (prefers-reduced-motion: no-preference) {
  .visit-action, .portal-tile, .portal-tab, .portal-tabs-item, .portal-quick-main, .portal-quick-item {
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  }
}

@media print {
  /* چاپ یک برگه از داخل پورتال، دقیقاً مثل پنل: بقیه‌ی صفحه از کاغذ بیرون می‌ماند. */
  html[data-print="sheet"] .portal > :not(.portal-main),
  html[data-print="sheet"] .portal-main > :not(.print-sheet) { display: none !important; }

  .portal-head, .portal-nav { display: none; }
}

/* ---------- صف درخواست‌های نوبت (پنل) ---------- */

/* شمارنده‌ی کنار لینک فهرست. عدد است نه نقطه: «سه تا» و «یکی» دو تصمیم متفاوت‌اند. */
.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-variant-numeric: tabular-nums;
  text-align: center;
}

.request-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }

.request-card {
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}

.request-card.is-open { border-inline-start: 4px solid var(--amber-500); }

.request-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.request-head .muted { display: block; font-size: var(--fs-s); }
.request-patient { font-weight: 600; }

.request-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-block: 0.625rem; }
.request-facts > div { display: flex; gap: 0.375rem; }
.request-facts dt { color: var(--ink-3); font-size: var(--fs-s); }
.request-facts dd { margin: 0; font-size: var(--fs-s); }

.request-note { margin-block: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--r-s); background: var(--surface-2); }
.request-form { display: grid; gap: 0.75rem; margin-block-start: 0.75rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); }

.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--ink-3); }

.chip-quiet { background: var(--surface-2); color: var(--ink-2); }
.chip-warn { background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-100); }

/* ---------- برگه‌ی چاپی چارت پریودنتال ----------
   چارت پریو تنها برگه‌ی این برنامه است که افقی چاپ می‌شود: شانزده دندان در یک ردیف، و هر
   دندان شش عدد. روی A4 عمودی یا از وسط بریده می‌شود یا آن‌قدر ریز می‌شود که خوانده نشود. */

@page sheet-a4-land { size: A4 landscape; margin: 10mm; }

.perio-sheet { color: #000; font-size: 9pt; line-height: 1.45; }

/* ابطال باید اول از همه دیده شود، نه در پانوشت. */
.perio-sheet-void {
  margin-block: 3mm 0;
  padding: 2mm 3mm;
  border: 1.5pt solid #000;
  font-weight: 700;
  text-align: center;
}

/* شاخص‌ها در یک نوار، نه شش کارت: روی کاغذ کارت یعنی جوهر و فضای هدررفته. */
.perio-sheet-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6mm;
  margin-block: 2.5mm;
  padding: 1.2mm 0;
  border-block: 0.75pt solid #000;
  list-style: none;
}

.perio-sheet-index li { display: flex; gap: 1.5mm; align-items: baseline; }
.perio-sheet-index span { font-size: 8pt; }
.perio-sheet-index bdi { font-weight: 700; font-variant-numeric: tabular-nums; }

.perio-sheet-arch { margin-block-start: 3mm; break-inside: avoid; }

.perio-sheet-arch-title {
  margin-block: 0 1mm;
  font-size: 9.5pt;
  font-weight: 700;
}

.perio-sheet-table {
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

/* ستون عنوانِ سطر فارسی است و داخل جدولِ ltr می‌نشیند؛ جهتش را خودش می‌گیرد. */
.perio-sheet-table th[scope="row"] {
  inline-size: 26mm;
  direction: rtl;
  text-align: start;
  padding-inline-end: 2mm;
  font-size: 8pt;
  font-weight: 400;
  white-space: nowrap;
}

.perio-sheet-table td {
  inline-size: 15mm;
  padding: 0.8mm 0;
  border: 0.5pt solid #000;
  text-align: center;
}

.perio-sheet-table th, .perio-sheet-table td { vertical-align: middle; }

.perio-sheet-teeth td { font-weight: 700; background: #e8e8e8; }
.perio-sheet-teeth th[scope="row"] { font-weight: 700; }

/* سه نقطه‌ی هر سطح، کنار هم و با عرض برابر تا ستون‌ها زیر هم بیفتند. */
.perio-sheet-depth td, .perio-sheet-recession td { padding: 0; }

.perio-sheet-cell {
  display: inline-block;
  inline-size: 4.9mm;
  padding-block: 0.5mm;
  font-size: 8pt;
}

.perio-sheet-cell + .perio-sheet-cell { border-inline-start: 0.25pt dotted #999; }

.perio-sheet-recession .perio-sheet-cell { font-size: 7.5pt; color: #444; }
.perio-sheet-empty { color: #aaa; }

/* پاکت عمیق با وزن و کادر مشخص می‌شود، نه با رنگ: بیشتر مطب‌ها سیاه‌وسفید چاپ می‌کنند. */
.perio-sheet-cell .is-deep { font-weight: 700; }
.perio-sheet-cell .is-severe { font-weight: 700; padding: 0 0.5mm; border: 0.75pt solid #000; }

.perio-sheet-bleed { font-size: 5pt; vertical-align: super; }

.perio-sheet-grade td { font-size: 8pt; }

.perio-sheet-notes { margin-block-start: 4mm; break-inside: avoid; }
.perio-sheet-notes ul { margin: 0; padding-inline-start: 5mm; font-size: 8pt; }
.perio-sheet-note { margin-block-start: 3mm; font-size: 8.5pt; }

.perio-sheet-foot {
  margin-block-start: 3.5mm;
  padding-block-start: 1.5mm;
  border-block-start: 0.75pt solid #000;
}

.perio-sheet-foot .doc-small { margin: 0; }

@media print {
  html[data-print="sheet"] .print-sheet.sheet-a4-land { page: sheet-a4-land; }

  /* چاپ معمولی (Ctrl+P) هم دیگر چارت را از وسط نبُرد: ظرفِ اسکرول روی کاغذ باز می‌شود. */
  .perio-scroll { overflow: visible !important; }
}

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

.slotpicker { display: grid; gap: 0.75rem; }

.slotpicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  inline-size: 100%;
  max-inline-size: 24rem;
  margin-inline: auto;
}

.slotpicker-month { font-size: var(--fs-l); color: var(--navy-900); }

/* آیکون chevron خودش در RTL آینه می‌شود؛ «ماه بعد» باید خلافش را نشان بدهد. */
.slotpicker-head .flip { display: inline-flex; transform: scaleX(-1); }

.slotpicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  inline-size: 100%;
  max-inline-size: 24rem;
  margin-inline: auto;
}

.slotpicker-weekday {
  padding-block: 0.25rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-align: center;
}

.slotpicker-blank { aspect-ratio: 1; }

.slotpicker-day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.slotpicker-day.is-open:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.slotpicker-day:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

.slotpicker-day[disabled] { cursor: not-allowed; }
.slotpicker-day.is-full { color: var(--ink-3); background: var(--surface-2); }

/* تعطیل با خط، نه فقط با رنگ — روی صفحه‌ی کم‌نور و برای کوررنگی هم خوانده شود. */
.slotpicker-day.is-closed { color: var(--ink-3); background: var(--surface-2); text-decoration: line-through; }
.slotpicker-day.is-out { color: var(--line-strong); background: transparent; border-color: transparent; }

.slotpicker-day.is-chosen {
  border-color: var(--navy-800);
  background: var(--fill-mid);
  color: #fff;
  font-weight: 600;
}

/* نقطه‌ی «این روز خالی دارد». روی خانه‌ی انتخاب‌شده سفید می‌شود تا دیده بماند. */
.slotpicker-dot {
  position: absolute;
  inset-block-end: 0.3rem;
  inline-size: 0.3rem;
  block-size: 0.3rem;
  border-radius: 50%;
  background: var(--cyan-500);
}

.slotpicker-day.is-chosen .slotpicker-dot { background: #fff; }

.slotpicker-times { display: grid; gap: 0.5rem; }

.slotpicker-times-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-weight: 600;
}

.slotpicker-times-head .muted { font-weight: 400; font-size: var(--fs-s); }

.slotpicker-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.slotpicker-time {
  min-block-size: 2.5rem;
  padding-inline: 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.slotpicker-time:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.slotpicker-time:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.slotpicker-time.is-chosen { border-color: var(--fill-mid); background: var(--fill-mid); color: var(--fill-ink); font-weight: 600; }

.slotpicker-summary {
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-inline-start: 3px solid var(--navy-700);
  border-radius: var(--r-s);
  background: var(--cyan-50);
}

@media (prefers-reduced-motion: no-preference) {
  .slotpicker-day, .slotpicker-time { transition: background-color 120ms ease, border-color 120ms ease; }
}

/* تبِ تنظیمات که تغییرِ ذخیره‌نشده دارد. رنگِ تنها کافی نیست — متنِ خودش هم عوض می‌شود. */
.role-tab small.is-dirty { color: var(--amber-700); font-weight: 600; }
.role-tab.is-active small.is-dirty { color: var(--amber-700); }

/* یافته‌های معاینه‌ای که طرح از آن آمده. نه فرم است نه فهرست — یادداشتی است که کنار دست
   پزشک می‌ماند تا برای انتخاب خدمت، تبِ معاینه را دوباره باز نکند. */
.exam-carry {
  margin-block-end: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--cyan-500);
  border-radius: var(--r-m);
  background: var(--cyan-50);
}

.exam-carry-head { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.625rem; color: var(--navy-900); font-size: var(--fs-s); }
.exam-carry-list { display: grid; gap: 0.5rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.exam-carry-list li { display: flex; align-items: flex-start; gap: 0.625rem; }

.carry-tooth {
  flex: 0 0 auto;
  min-inline-size: 2.25rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--ink-3);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.carry-tooth.is-on { border-color: var(--fill); background: var(--fill-strong); color: var(--fill-ink); }
.carry-tooth:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.carry-what { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--fs-s); }

/* ---------- نوبت‌های بیمار، روی پرونده ---------- */
/* نوبتِ پیشِ رو باید از یک متر دورتر خوانده شود؛ گذشته‌ها فقط وقتی لازم‌اند که دنبالشان بگردی. */

.appt-next { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.appt-next li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}

/* نوبتِ بعدی، همان یکی که طرف پای تلفن می‌پرسد. */
.appt-next li.is-next { border-color: var(--cyan-500); background: var(--cyan-50); }

.appt-when { display: grid; gap: 0.125rem; text-align: center; min-inline-size: 7rem; }
.appt-date { font-size: var(--fs-s); color: var(--ink-2); }
.appt-clock { font-size: var(--fs-l); font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.appt-what { display: grid; gap: 0.125rem; min-inline-size: 0; }
.appt-doctor { font-weight: 600; color: var(--navy-900); }
.appt-side { display: grid; gap: 0.25rem; justify-items: end; }
.appt-ago { color: var(--ink-3); font-size: var(--fs-xs); }

.appt-past { margin-block-start: 0.75rem; }
.appt-past summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-s); }
.appt-past summary:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; border-radius: var(--r-s); }
.appt-past ul { display: grid; gap: 0.25rem; margin: 0.625rem 0 0; padding: 0; list-style: none; }

.appt-past li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding-block: 0.3rem;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-s);
}

.appt-past li.is-off { color: var(--ink-3); }
.appt-past li.is-off .num { text-decoration: line-through; }

.empty-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* روی صفحه‌ی باریک، سه ستون به هم می‌ریزد: ساعت بالا، بقیه زیرش. */
@media (max-width: 40rem) {
  .appt-next li { grid-template-columns: minmax(0, 1fr); }
  .appt-when { display: flex; align-items: baseline; gap: 0.5rem; text-align: start; }
  .appt-side { justify-items: start; }
}

/* ---------- «یک نگاه» به پرونده ---------- */
/* چهار عدد، هم‌اندازه، هر کدام یک لینک. عمداً ساده: این نوار باید در یک نگاه خوانده شود،
   نه اینکه خودش چیزی برای خواندن باشد. */

.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.5rem;
  margin-block-end: 1rem;
}

.glance-cell {
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

a.glance-cell:hover { border-color: var(--line-strong); background: var(--surface-2); }
a.glance-cell:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

.glance-label { color: var(--ink-3); font-size: var(--fs-xs); }
.glance-value { font-size: var(--fs-l); font-weight: 700; color: var(--navy-900); line-height: 1.5; }
.glance-value.num { font-variant-numeric: tabular-nums; }
.glance-value.is-empty { color: var(--ink-3); font-weight: 500; }
.glance-value.is-loading { color: var(--ink-3); font-weight: 500; }
.glance-note { color: var(--ink-3); font-size: var(--fs-xs); }

/* بدهی تنها چیزی در این نوار است که «کاری باید بکنی» می‌گوید، پس تنها چیزی است که رنگ می‌گیرد. */
.glance-cell.is-owing { border-color: var(--amber-500); background: var(--amber-50); }
.glance-cell.is-owing .glance-value { color: var(--amber-700); }
.glance-cell.is-set .glance-value { color: var(--navy-900); }

/* ---------- قلم‌موی معاینه ---------- */
/* یک وضعیت در دست، و بعد هر کلیک روی دندان همان را می‌گذارد. جای این نوار بالای چارت است
   نه کنارش: مسیر چشم باید «انتخاب وضعیت ← زدن روی دندان» باشد، از بالا به پایین. */

.brush-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-block-end: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.brush-label { display: flex; align-items: center; gap: 0.375rem; color: var(--ink-2); font-size: var(--fs-s); }
.brush-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.brush-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}

/* نقطه‌ی رنگی همان رنگِ روی چارت است، تا پیش از زدن معلوم باشد چه گذاشته می‌شود. */
.brush-chip::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 999px;
  background: var(--cond, var(--ink-3));
}

.brush-chip:hover { border-color: var(--navy-700); color: var(--navy-900); }
.brush-chip.is-on { border-color: var(--fill); background: var(--fill-strong); color: var(--fill-ink); }
.brush-chip:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* وقتی قلم در دست است، خودِ چارت باید بگوید که زدن روی دندان کار می‌کند. */
.chart-stage.is-painting .chart-tooth { cursor: crosshair; }
.chart-stage.is-painting button.chart-tooth:hover { border-color: var(--navy-700); background: var(--cyan-50); }

/* ---------- سیر درمان ---------- */
/* جدول می‌گوید «چه شد و چند»؛ این می‌گوید «این بیمار از کجا به کجا رسید». خطِ عمودی
   همان چیزی است که جدول ندارد: پیوستگیِ زمان. */

.care-timeline {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0 0 0.25rem;
  list-style: none;
}

.care-timeline > li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: start;
  position: relative;
  padding-inline-start: 1.25rem;
}

/* خودِ خط: یک بار روی کل فهرست، نه به ازای هر ردیف. */
.care-timeline::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 8.9rem;
  inline-size: 2px;
  background: var(--line);
}

.care-timeline { position: relative; }

.care-timeline > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-start: 8.55rem;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border: 2px solid var(--navy-700);
  border-radius: 999px;
  background: var(--surface);
}

.care-when { display: grid; gap: 0.125rem; text-align: end; }
.care-when .num { font-weight: 600; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.care-ago { color: var(--ink-3); font-size: var(--fs-xs); }

.care-what { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.care-what > li { display: grid; gap: 0.125rem; }
.care-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-weight: 600; color: var(--navy-900); }
.care-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; color: var(--ink-3); font-size: var(--fs-s); }
.care-sum { color: var(--ink-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* روی صفحه‌ی باریک خط کنار می‌رود: ستونِ تاریخِ ثابت جا نمی‌شود. */
@media (max-width: 45rem) {
  .care-timeline::before,
  .care-timeline > li::before { display: none; }

  .care-timeline > li { grid-template-columns: minmax(0, 1fr); padding-inline-start: 0; padding-block-end: 0.75rem; border-block-end: 1px solid var(--line); }
  .care-when { display: flex; align-items: baseline; gap: 0.5rem; text-align: start; }
}

/* ---------- سربرگ و تب‌های بیمار، چسبان ---------- */
/* پرونده‌ی بیمار طولانی است و وسط اسکرول، هم «این پرونده‌ی کیست» گم می‌شود هم راه رفتن
   به تب بعدی. این دو با هم می‌چسبند بالا، چون با هم یک واحدند. */

.patient-sticky {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  margin-block-end: 1.25rem;
  padding-block-start: 0.5rem;
  background: var(--ground);
}

/* چسبیده که شد، لبه‌اش باید از محتوای زیرش جدا دیده شود. */
.patient-sticky::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  block-size: 0.75rem;
  background: linear-gradient(var(--ground), transparent);
  pointer-events: none;
}

/* سربرگ داخل نوار چسبان کوتاه‌تر است: با ارتفاع قبلی، سربرگ و تب‌ها با هم یک‌چهارم
   صفحه را می‌گرفتند و چیزی برای خواندن نمی‌ماند. */
.patient-sticky .file-head { margin-block-end: 0.625rem; padding: 0.75rem 1.25rem; }
.patient-sticky .file-head h1 { font-size: var(--fs-l); }
.patient-sticky .patient-tabs { margin-block-end: 0; }

/* عنوانِ خودِ تب. نامِ بیمار حالا h1 است، پس این یک پله پایین آمده — ولی باید هنوز
   مثل عنوانِ صفحه دیده شود، نه مثل عنوانِ یک پنل. */
.page-title { font-size: var(--fs-xl); color: var(--navy-900); line-height: 1.5; }
.page-title:focus { outline: none; }

/* روی صفحه‌ی کوتاه، چسباندن بیشتر ضرر دارد تا فایده. */
@media (max-height: 34rem) {
  .patient-sticky { position: static; }
  .patient-sticky::after { display: none; }
}

/* روی گوشی، سربرگِ کامل ۴۲٪ صفحه را می‌گرفت — چسباندنش بدتر از نچسباندن بود.
   پس همان‌جا جمع می‌شود به یک سطر: نام و شماره‌ی پرونده، که تنها چیزی است که وسطِ
   اسکرول لازم می‌شود. دکمه‌ها و مشخصات یک اسکرول بالاتر سر جایشان‌اند. */
@media (max-width: 48rem) {
  .patient-sticky .file-head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.5rem 0.875rem;
  }

  .patient-sticky .file-head h1 { font-size: var(--fs-m); }
  .patient-sticky .file-head .facts,
  .patient-sticky .file-head .file-actions { display: none; }

  /* نوار تب‌ها روی گوشی خودش افقی اسکرول می‌شود تا چند سطر نشود. */
  .patient-sticky .patient-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .patient-sticky .patient-tab { white-space: nowrap; }
}

/* ---------- پیشخوان: کارهای امروز ---------- */
/* یک خط زیر نوارِ «الان». هر مورد یک عدد و یک کلمه، و یک لینک به همان‌جا که کار انجام می‌شود.
   صفرها نمی‌آیند؛ روزِ خلوت یک خطِ سبز است. */

.today-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block: -0.25rem 1rem;
}

.today-action {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.today-action strong { font-size: var(--fs-l); color: var(--navy-900); font-variant-numeric: tabular-nums; }
.today-action span { color: var(--ink-2); font-size: var(--fs-s); }
.today-action:hover { border-color: var(--navy-700); }
.today-action[data-action-item="noshow"] { border-color: var(--amber-100); background: var(--amber-50); }
.today-action[data-action-item="noshow"] strong { color: var(--amber-700); }

.today-actions-clear { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--ok-700); font-size: var(--fs-s); }

/* ---------- پیشخوان: ویجتِ جمع‌شده ---------- */
/* دکمه در گوشه‌ی پنل. جمع که شد، همه‌چیز جز سرتیتر می‌رود و یک عدد جایش را می‌گیرد. */

.widget-collapse {
  position: absolute;
  inset-block-start: 0.875rem;
  inset-inline-end: 0.875rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-3);
  font: inherit;
  cursor: pointer;
}

.widget-collapse:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--navy-900); }
.widget-collapse:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.widget-summary { color: var(--navy-900); font-weight: 600; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }

/* سرتیترِ پنل کنارِ دکمه جا باز می‌کند تا روی هم نیفتند. */
.widget .panel-head { padding-inline-end: 2.5rem; }
.widget.is-collapsed .panel-head { padding-inline-end: 9rem; margin-block-end: 0; }
.widget.is-collapsed .panel > :not(.panel-head) { display: none; }
.widget.is-collapsed .panel-head .btn,
.widget.is-collapsed .panel-head .panel-link,
.widget.is-collapsed .panel-head .recall-count { display: none; }

/* ---------- پیشخوان: مقایسه با هفته‌ی پیش ---------- */
/* فقط رنگِ متن. بالا رفتنِ پول خوب است و بالا رفتنِ «نیامد» بد — پس رنگ معنای ثابت ندارد
   و همین‌جا فقط جهت را می‌گوید، نه قضاوت. */
.delta { margin: 0.25rem 0 0.5rem; color: var(--ink-3); font-size: var(--fs-xs); }
.delta-up { color: var(--ok-700); }
.delta-down { color: var(--amber-700); }

/* ---------- پیشخوان: بیمار بعدی من ---------- */

.next-who { display: grid; gap: 0.125rem; margin-block-end: 0.625rem; }
.next-name { font-size: var(--fs-xl); font-weight: 600; color: var(--navy-900); text-decoration: none; }
.next-name:hover { text-decoration: underline; }
.next-facts { color: var(--ink-3); font-size: var(--fs-s); }

.next-alerts { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.next-alerts li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.625rem;
  border: 1px solid var(--amber-100);
  border-radius: var(--r-pill);
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: var(--fs-s);
}
.next-alerts li.is-critical { border-color: var(--alert-200); background: var(--alert-50); color: var(--alert-700); }

.next-detail { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0 0 0.875rem; }
.next-detail dt { color: var(--ink-3); font-size: var(--fs-s); }
.next-detail dd { margin: 0; }
.next-planned { display: grid; gap: 0.125rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.next-planned li { display: flex; align-items: baseline; gap: 0.375rem; }
.next-note .pre { display: block; color: var(--ink-2); font-size: var(--fs-s); }

/* ---------- پیشخوان: راه‌اندازی مرکز ---------- */

.setup-checklist { margin-block-end: 1rem; border-color: var(--cyan-500); }

.setup-progress { block-size: 0.4rem; margin-block-end: 0.875rem; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.setup-progress span { display: block; block-size: 100%; background: var(--cyan-500); }

.setup-steps { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.setup-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.125rem 0.625rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.setup-steps li .note-line { grid-column: 2; }
.setup-steps li.is-done { border-color: transparent; background: var(--ok-50); color: var(--ok-700); }

.setup-mark {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
}
.is-done .setup-mark { border-color: transparent; background: var(--ok-700); color: #fff; }
[dir="rtl"] .setup-steps li:not(.is-done) .setup-mark svg { transform: scaleX(-1); }

.setup-label { font-weight: 600; color: var(--navy-900); }
a.setup-label { text-decoration: none; }
a.setup-label:hover { text-decoration: underline; }

/* ---------- فهرست کناری: گروه‌های جمع‌شو ---------- */
/* عنوانِ گروه حالا دکمه است. ظاهرش همان عنوان می‌ماند — چیزی که عوض می‌شود رفتارش است. */

button.nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  inline-size: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #7E9BC4;
  cursor: pointer;
  text-align: start;
}

button.nav-group:hover { color: #C6D7EC; }
button.nav-group:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; border-radius: var(--r-s); }
button.nav-group svg { flex: none; opacity: 0.7; }

.nav.is-collapsed { display: none; }

.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: #A9C2E4;
  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; }

/* ---------- کنش‌های نوبت، یک خط ---------- */
/* پنج کنترلِ گشاد، ردیفِ نوبت را دو برابر می‌کرد. برنامه‌ی روز باید متراکم باشد. */

.btn-tight { padding: 0.2rem 0.5rem; font-size: var(--fs-s); }

.appt-actions.is-tight .btn { white-space: nowrap; }

/* ---------- نوار ساعتِ پیشخوان: پنجره‌ی یک نوبت ---------- */

.day-strip-stage { position: relative; }

button.day-slot { padding: 0; border: 0; cursor: pointer; font: inherit; }
button.day-slot:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.day-slot.is-open { outline: 2px solid var(--navy-700); outline-offset: 1px; }

.slot-pop {
  position: absolute;
  z-index: 32;
  inline-size: min(22rem, calc(100vw - 2rem));
  padding: 0.75rem 0.875rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 16px 40px rgb(var(--shadow-hue) / 0.22);
}

.slot-pop .tooth-pop-head { margin-block-end: 0.375rem; }
.slot-pop .tooth-pop-head h3 { font-size: var(--fs-l); }
.slot-pop .tooth-pop-head a { color: var(--navy-900); text-decoration: none; }
.slot-pop .tooth-pop-head a:hover { text-decoration: underline; }
.slot-pop .note-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin-block-end: 0.625rem; }
.slot-pop .appt-actions { justify-content: flex-start; }

/* روی صفحه‌ی باریک، «کنارِ نوبت» معنا ندارد: برگه از پایین بالا می‌آید. */
@media (max-width: 48rem) {
  .slot-pop {
    position: fixed;
    inset: auto 0 0 0;
    inline-size: 100%;
    border-radius: var(--r-l) var(--r-l) 0 0;
  }
}

/* چاپِ صورت‌حساب بالای خلاصه‌ی حساب می‌نشیند، هم‌تراز لبه‌ی پایانی. */
.account-print { display: flex; justify-content: flex-end; margin-block-end: 0.5rem; }

/* =====================================================================
   امکاناتِ تازه: رضایت‌نامه، ثبت‌نامِ پیامکی، اقساط و چک، فهرستِ انتظار،
   پایانِ روز، حالتِ یونیت، نمایشگرِ انتظار، و بهبودهای رابط.
   ===================================================================== */

/* ---------- قالبِ خاکستری (skeleton) ---------- */

.skeleton-stack { display: grid; gap: 0.625rem; padding-block: 0.5rem; }

.skeleton {
  display: block;
  block-size: 0.875rem;
  inline-size: var(--w, 100%);
  border-radius: var(--r-s);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 45%, var(--surface-2) 65%);
  background-size: 300% 100%;
  animation: skeleton-shine 1.4s ease-in-out infinite;
}

.skeleton-title { block-size: 1.25rem; inline-size: 40%; }
.skeleton-line { block-size: 0.875rem; }
.skeleton-row { block-size: 3rem; border-radius: var(--r-m); }
.skeleton-block { block-size: 10rem; border-radius: var(--r-m); }
.skeleton-card { block-size: 9rem; border-radius: var(--r-l); }
.skeleton-table { display: grid; gap: 0.5rem; }

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

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ---------- چگالیِ فشرده ---------- */

/* میز پذیرش مانیتورِ بزرگ دارد و ردیفِ بیشتر می‌خواهد؛ تبلتِ کنارِ یونیت دکمه‌ی درشت. فقط
   فاصله‌ها کم می‌شوند — اندازه‌ی نوشته نه، و ناحیه‌ی کلیک هم از ۳۲ پیکسل پایین‌تر نمی‌رود. */
html[data-density="compact"] .panel { padding: 0.875rem 1rem; }
html[data-density="compact"] .appointment-row { padding-block: 0.375rem; }
html[data-density="compact"] table.data td,
html[data-density="compact"] table.data th { padding-block: 0.3rem; }
html[data-density="compact"] .page { gap: 0.875rem; }
html[data-density="compact"] .btn { min-block-size: 2rem; }

/* ---------- پیام‌های کوتاه و «برگرداندن» ---------- */

.toast-host {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 0;
  margin-inline: auto;
  z-index: 60;
  display: grid;
  gap: 0.5rem;
  inline-size: min(28rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-m);
  background: var(--fill-deep);
  color: var(--fill-ink);
  box-shadow: 0 0.75rem 2rem rgb(var(--shadow-hue) / 0.3);
  pointer-events: auto;
  animation: toast-in 180ms ease-out;
}

.toast.is-error { background: var(--danger-fill); }
.toast-text { flex: 1; min-inline-size: 0; }

.toast-action {
  padding: 0.25rem 0.625rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: var(--r-s);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.toast-action:hover { background: rgb(255 255 255 / 0.12); }
.toast-action:focus-visible,
.toast-close:focus-visible { outline: 2px solid var(--cyan-300); outline-offset: 2px; }

.toast-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

@keyframes toast-in {
  from { opacity: 0; translate: 0 0.5rem; }
}

@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- صفحه‌های عمومیِ بیمار (ثبت‌نام، امضا، نمایشگر) ---------- */

.public-shell { min-block-size: 100vh; background: var(--ground); }

.public-main {
  display: grid;
  justify-items: center;
  padding: clamp(1rem, 4vw, 2.5rem) 1rem 3rem;
}

.public-card {
  display: grid;
  gap: 1.25rem;
  inline-size: min(100%, 38rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 1rem 2.5rem rgb(var(--shadow-hue) / 0.06);
}

.public-card-wide { inline-size: min(100%, 48rem); }

.public-head { display: grid; gap: 0.25rem; }
.public-head h1 { margin: 0; font-size: var(--fs-xl); }
.public-clinic { color: var(--navy-700); font-weight: 600; font-size: var(--fs-s); }

.public-form { display: grid; gap: 1.25rem; }

.public-section {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 1rem 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.public-section legend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.375rem;
  font-weight: 600;
}

.step-no {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--fill);
  color: var(--fill-ink);
  font-size: var(--fs-xs);
}

.public-state { display: grid; justify-items: center; gap: 0.75rem; padding-block: 1.5rem; text-align: center; }
.public-state h1 { margin: 0; font-size: var(--fs-xl); }

.public-state-icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  background: var(--amber-50);
  color: var(--amber-700);
}

.public-state-ok .public-state-icon { background: var(--ok-50); color: var(--ok-700); }
.public-file-number { font-size: var(--fs-xl); font-weight: 600; color: var(--navy-900); margin: 0; }

.readonly-value {
  display: block;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-s);
  color: var(--ink-2);
  text-align: start;
}

/* متنِ رضایت‌نامه: بلند است و باید خوانده شود، نه ورق زده. */
.consent-text {
  max-block-size: 22rem;
  overflow-y: auto;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
  line-height: 2;
  white-space: pre-line;
}

.consent-text:focus-visible { outline: none; box-shadow: var(--ring); }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-block-size: 2rem;
  cursor: pointer;
  line-height: 1.85;
}

.check-row input { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: 0.35rem; accent-color: var(--fill); }

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.25rem 1rem;
}

/* ---------- بومِ امضا ---------- */

.sig-pad { display: grid; gap: 0.375rem; }

.sig-canvas {
  inline-size: 100%;
  block-size: 11rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-m);
  background:
    linear-gradient(to top, transparent 2.25rem, var(--line) 2.25rem, var(--line) calc(2.25rem + 1px), transparent calc(2.25rem + 1px)),
    #fff;
  touch-action: none;   /* بی این، کشیدنِ انگشت صفحه را اسکرول می‌کند نه امضا */
  cursor: crosshair;
}

.sig-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* ---------- رضایت‌نامه در پرونده و تنظیمات ---------- */

.consent-request {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding-block-end: 1rem;
  margin-block-end: 0.75rem;
  border-block-end: 1px solid var(--line);
}

.consent-request .field { flex: 1 1 14rem; }
.consent-request-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.consent-list { list-style: none; margin: 0; padding: 0; display: grid; }

.consent-row {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--line);
}

.consent-row:last-child { border-block-end: 0; }
.consent-row.is-inactive { opacity: 0.65; }
.consent-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.consent-row-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.consent-edit { display: grid; gap: 1rem; padding-block: 0.5rem 1.25rem; }
.consent-edit textarea { line-height: 2; }

.consent-warning { display: grid; gap: 0.625rem; }
.consent-warning p { margin: 0; }
.consent-warning-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- برگه‌ی چاپیِ رضایت‌نامه و مراقبت ---------- */

.consent-sheet,
.aftercare-sheet { color: #000; font-size: 10.5pt; line-height: 1.9; }

.consent-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5mm 6mm;
  margin: 4mm 0;
  padding: 3mm 4mm;
  border: 1px solid #000;
  border-radius: 2mm;
}

.consent-meta div { display: flex; gap: 2mm; }
.consent-meta dt { font-weight: 600; }
.consent-meta dd { margin: 0; }

.consent-body { white-space: pre-line; text-align: justify; margin-block: 4mm 8mm; }

.consent-sign {
  display: grid;
  grid-template-columns: 1fr 70mm;
  gap: 8mm;
  align-items: end;
  break-inside: avoid;
}

.consent-signer p { margin: 0 0 3mm; }

.consent-blank {
  display: inline-block;
  inline-size: 55mm;
  border-block-end: 1px dotted #000;
  vertical-align: bottom;
}

.consent-blank-short { inline-size: 30mm; }

.consent-signature-box {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 32mm;
  border: 1px solid #000;
  border-radius: 2mm;
}

.consent-signature-box img { max-inline-size: 95%; max-block-size: 26mm; object-fit: contain; }

.consent-signature-label {
  position: absolute;
  inset-block-start: -2.4mm;
  inset-inline-start: 4mm;
  padding-inline: 1.5mm;
  background: #fff;
  font-size: 8.5pt;
}

.consent-foot { margin-block-start: 6mm; padding-block-start: 2mm; border-block-start: 1px solid #000; font-size: 8.5pt; }

/* ---------- مقایسه‌ی قبل و بعد ---------- */

.compare-help { margin-block: 0.25rem 0.75rem; color: var(--ink-2); font-size: var(--fs-s); }

.compare { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }

.compare-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
  background: #000;
  aspect-ratio: 4 / 3;
}

.compare-stage img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* «بعد» روی «قبل» و بریده به اندازه‌ی لغزنده. جهتِ تصویر آناتومیک است نه متنی، پس
   بریدن از چپ است، در هر زبانی. */
.compare-after { clip-path: inset(0 0 0 calc(100% - var(--split, 50) * 1%)); }

.compare-divider {
  position: absolute;
  inset-block: 0;
  left: calc(100% - var(--split, 50) * 1%);
  inline-size: 2px;
  background: var(--cyan-400);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35);
  pointer-events: none;
}

.compare-slider input { inline-size: 100%; accent-color: var(--fill); }
.compare-caption { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-2); font-size: var(--fs-s); }

.doc-card { position: relative; }
.doc-card.is-picked { outline: 3px solid var(--cyan-500); outline-offset: 2px; }

.doc-pick {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 1;
  padding: 0.125rem 0.625rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--fill-ink);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.doc-pick[aria-pressed="false"] { background: rgb(0 0 0 / 0.55); }

/* ---------- لینکِ ثبت‌نام ---------- */

.reg-link-list-title { margin: 1.25rem 0 0.5rem; font-size: var(--fs-m); }
.reg-link-list { list-style: none; margin: 0; padding: 0; display: grid; }

.reg-link-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--line);
}

.reg-link-who { flex: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }

/* ---------- اقساط ---------- */

.pill-danger { background: var(--alert-50); border: 1px solid var(--alert-200); color: var(--alert-700); }

.installment-form {
  display: grid;
  gap: 1rem;
  padding-block-end: 1.25rem;
  margin-block-end: 1rem;
  border-block-end: 1px solid var(--line);
}

.installment-edit input { inline-size: 100%; min-inline-size: 7rem; }

.installment-plan {
  display: grid;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  margin-block-end: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.installment-plan.is-cancelled { opacity: 0.7; }
.installment-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }

.installment-progress {
  block-size: 0.375rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.installment-progress span { display: block; block-size: 100%; background: var(--ok-700); border-radius: inherit; }

.installment-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }

.installment-item {
  display: grid;
  grid-template-columns: 1.75rem minmax(6rem, auto) minmax(7rem, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--r-s);
}

.installment-item.state-overdue { background: var(--alert-50); }
.installment-item.state-duesoon { background: var(--amber-50); }

.installment-seq {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: var(--fs-xs);
}

.chip-row { margin: 0; }
.chip-row .chip { display: inline-flex; align-items: center; gap: 0.375rem; padding-block: 0.125rem; }

.chip-x {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.row-attention { background: var(--amber-50); }

@media (max-width: 36rem) {
  .installment-item { grid-template-columns: 1.75rem 1fr auto; }
  .installment-item > :nth-child(3) { grid-column: 2; }
}

/* ---------- پایانِ روز ---------- */

.close-verdict {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.875rem 1.125rem;
  border-radius: var(--r-m);
  background: var(--amber-50);
  color: var(--amber-700);
  font-weight: 600;
}

.close-verdict.is-clear { background: var(--ok-50); color: var(--ok-700); }

.close-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  align-items: start;
}

.close-card { border-block-start: 4px solid var(--line-strong); }
.close-card.is-clear { border-block-start-color: var(--ok-700); }
.close-card.is-attention { border-block-start-color: var(--amber-500); }
.close-card.is-urgent { border-block-start-color: var(--alert-600); }

.close-count {
  min-inline-size: 2rem;
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  text-align: center;
  font-weight: 600;
}

.close-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; }

.close-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--line);
}

.close-list li:last-child { border-block-end: 0; }
.close-list li > a:first-of-type,
.close-list li > span:first-child + a { font-weight: 500; }

.close-ok { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--ok-700); }

.close-figures { display: grid; gap: 0.375rem; margin: 0 0 0.75rem; }
.close-figures div { display: flex; justify-content: space-between; gap: 1rem; }
.close-figures dt { color: var(--ink-2); }
.close-figures dd { margin: 0; font-weight: 600; }

/* ---------- نوبت‌ها: خطرِ نیامدن، تأیید، صفحه‌کلید ---------- */

.risk-pill { gap: 0.25rem; }
.risk-high { background: var(--alert-50); border: 1px solid var(--alert-200); color: var(--alert-700); }
.risk-medium { background: var(--amber-50); border: 1px solid var(--amber-100); color: var(--amber-700); }

.btn.is-confirmed { background: var(--ok-50); border-color: var(--ok-700); color: var(--ok-700); }

.appointment-row:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-m); }

.keyboard-hint { margin: 0 0 0.5rem; font-size: var(--fs-xs); }

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;
  line-height: 1.6;
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
}

.view-toggle { margin-inline-start: auto; }

/* ---------- فهرستِ انتظار و جای خالی ---------- */

.waitlist-add {
  display: grid;
  gap: 0.875rem;
  padding-block-end: 1.25rem;
  margin-block-end: 1rem;
  border-block-end: 1px solid var(--line);
}

.gap-fill { border-inline-start: 4px solid var(--cyan-500); margin-block-start: 1rem; }
.gap-group { margin: 1rem 0 0.25rem; font-size: var(--fs-s); color: var(--ink-2); }
.gap-list { list-style: none; margin: 0; padding: 0; display: grid; }

.gap-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-block: 0.375rem;
  border-block-end: 1px solid var(--line);
}

.gap-list .check-row { flex: 1; }
.gap-list .check-row span { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }

/* ---------- برنامه‌ی ستونی ---------- */

/* هر دقیقه ۱٫۶ پیکسل: نوبتِ نیم‌ساعته ۴۸ پیکسل — جای ساعت و نامِ بیمار در دو سطرِ خوانا.
   با ۱٫۲ پیکسل، کارتِ نیم‌ساعته فقط ساعت را نشان می‌داد و نام بریده می‌شد. */
.day-columns {
  --minute: 1.6px;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 3.25rem;
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: 0.5rem;
  overflow-x: auto;
  padding-block-end: 0.5rem;
}

.day-hours { position: relative; block-size: calc(var(--rows) * var(--minute) + 2.25rem); }

.day-hour {
  position: absolute;
  inset-block-start: calc(var(--at) * var(--minute) + 2.25rem - 0.6em);
  inset-inline: 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.day-column { display: grid; grid-template-rows: 2.25rem 1fr; min-inline-size: 0; }

.day-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding-inline: 0.5rem;
  border-radius: var(--r-s) var(--r-s) 0 0;
  background: var(--surface-2);
  font-size: var(--fs-s);
}

.day-column-body {
  position: relative;
  block-size: calc(var(--rows) * var(--minute));
  border: 1px solid var(--line);
  border-block-start: 0;
}

.day-gridline {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--at) * var(--minute));
  border-block-start: 1px dashed var(--line);
}

.day-card {
  position: absolute;
  inset-inline: 0.25rem;
  inset-block-start: calc(var(--at) * var(--minute));
  min-block-size: calc(var(--len) * var(--minute));
  z-index: 1;
}

.day-card.is-open { z-index: 5; }

/* (قاعده‌ی یک‌ستونه کردنِ چیدمان در نمای ستونی برداشته شد: برنامه را زیرِ فرم می‌پراند.
   چیدمانِ ثابتِ .appt-layout جایش را گرفته.) */

.day-card-main {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 0.375rem;
  inline-size: 100%;
  block-size: calc(var(--len) * var(--minute) - 2px);
  min-block-size: 1.75rem;
  overflow: hidden;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--navy-700);
  border-inline-start-width: 4px;
  border-radius: var(--r-s);
  background: var(--cyan-50);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: start;
  cursor: pointer;
}

.day-card.status-checkedin .day-card-main { border-color: var(--amber-500); background: var(--amber-50); }
.day-card.status-inchair .day-card-main { border-color: var(--ok-700); background: var(--ok-50); }
.day-card.status-completed .day-card-main { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink-2); }
.day-card.is-released .day-card-main { border-style: dashed; background: transparent; color: var(--ink-3); text-decoration: line-through; }

.day-card-pop {
  display: grid;
  gap: 0.5rem;
  margin-block-start: 0.25rem;
  padding: 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: 0 0.75rem 1.5rem rgb(var(--shadow-hue) / 0.18);
}

.risk-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: 0.45rem;
  border-radius: 50%;
  background: var(--alert-600);
}

/* ---------- حالتِ یونیت ---------- */

.chair { display: grid; gap: 1rem; }
.chair-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.chair-head h1 { margin: 0; margin-inline-end: auto; }

.chair-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) 1fr;
  gap: 1rem;
  align-items: start;
}

.chair-queue { display: grid; gap: 0.5rem; position: sticky; inset-block-start: 1rem; }

.chair-patient {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.125rem 0.75rem;
  align-items: center;
  min-block-size: 4rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.chair-patient .pill { grid-column: 2; justify-self: start; }
.chair-patient.status-inchair { border-inline-start-color: var(--ok-700); }
.chair-patient.status-checkedin { border-inline-start-color: var(--amber-500); }
.chair-patient.is-selected { background: var(--cyan-50); border-color: var(--navy-700); }
.chair-patient-time { grid-row: span 2; font-size: var(--fs-l); font-weight: 600; color: var(--navy-900); }

.chair-main { display: grid; gap: 1rem; min-inline-size: 0; }
.chair-empty { padding: 3rem 1rem; text-align: center; color: var(--ink-3); }
.chair-who h2 { margin: 0; font-size: var(--fs-2xl); }
.chair-status { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* دستِ دستکش‌دار، روی تبلت: ۴۸ پیکسل کمترین ناحیه‌ی لمس. */
.btn-chair { min-block-size: 3rem; padding-inline: 1.25rem; font-size: var(--fs-l); }

.chair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  align-items: start;
}

.chair-items { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }

.chair-items li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.chair-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.chair-recent li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }

@media (max-width: 48rem) {
  .chair-layout { grid-template-columns: 1fr; }
  .chair-queue { position: static; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); overflow-x: auto; }
}

/* ---------- نمایشگرِ اتاق انتظار ---------- */

/* تلویزیون از دور دیده می‌شود: نوشته‌ی درشت، کنتراستِ زیاد، و هیچ چیزِ اضافه. */
.waiting-screen {
  display: grid;
  gap: 2rem;
  inline-size: min(100%, 90rem);
  min-block-size: calc(100vh - 5rem);
  align-content: start;
}

.waiting-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.waiting-head h1 { margin: 0; font-size: clamp(1.75rem, 3.5vw, 3rem); color: var(--navy-900); }
.waiting-clock { font-size: clamp(1.75rem, 3.5vw, 3rem); color: var(--ink-2); }

.waiting-columns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem; }

.waiting-col {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.25rem;
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
}

.waiting-col h2 { margin: 0 0 0.5rem; font-size: clamp(1.25rem, 2.2vw, 2rem); color: var(--ink-2); }
.waiting-col-chair { background: var(--ok-50); border-color: var(--ok-700); }

.waiting-card {
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid var(--line);
}

.waiting-card strong { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.5; }
.waiting-card span { color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.375rem); }
.waiting-empty { color: var(--ink-3); font-size: clamp(1.125rem, 2vw, 1.5rem); margin: 0; }
.waiting-foot { color: var(--ink-3); text-align: center; font-size: clamp(1rem, 1.6vw, 1.375rem); }

@media (max-width: 48rem) { .waiting-columns { grid-template-columns: 1fr; } }

/* ---------- راهنمای میان‌برها و جست‌وجوی سراسری ---------- */

.shortcut-help {
  position: fixed;
  inset-block-start: 4rem;
  inset-inline: 50%;
  translate: 50% 0;
  inline-size: min(30rem, calc(100vw - 2rem));
  z-index: 41;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
}

.shortcut-list { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.shortcut-list div { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 1rem; }
.shortcut-list dt { display: flex; gap: 0.25rem; align-items: center; }
.shortcut-list dd { margin: 0; }

.me-kbd { margin-inline-start: auto; }

.palette-group {
  margin: 0;
  padding: 0.75rem 1rem 0.25rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-block-start: 1px solid var(--line);
}

.palette-command { grid-template-columns: auto 1fr auto; color: var(--navy-800); }

.palette-row-links {
  display: flex;
  gap: 0.75rem;
  margin-block: -0.5rem 0.25rem;
  padding-inline: 1rem;
  font-size: var(--fs-xs);
}

/* ---------- دندان‌ها: انتخابِ گروهی ---------- */

.tooth-bulk { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-end: 0.5rem; }
.tooth-bulk .btn.is-on { background: var(--cyan-50); border-color: var(--navy-700); }
.tooth-chart.is-dragging { user-select: none; cursor: crosshair; }

.icon-btn-inline { inline-size: 1.75rem; block-size: 1.75rem; vertical-align: middle; margin-inline-start: 0.25rem; }

/* ---------- قطعِ اتصال و صفِ ارسال ---------- */

/* قرمز فقط برای خطا: موردی که سرور نپذیرفت، کاری است که ثبت نشده و بررسی می‌خواهد. */
.banner-danger { background: var(--alert-50); border: 1px solid var(--alert-200); color: var(--alert-700); }

.outbox-banner-text { display: grid; gap: 0.125rem; flex: 1 1 16rem; }
.outbox-banner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.outbox-panel {
  position: fixed;
  inset-block-start: 4rem;
  inset-inline: 50%;
  translate: 50% 0;
  inline-size: min(40rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 6rem);
  overflow-y: auto;
  z-index: 41;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
}

.outbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.outbox-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}

.outbox-item-main { display: grid; gap: 0.25rem; justify-items: start; min-inline-size: 0; flex: 1 1 16rem; }
.outbox-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.outbox-error { margin: 0; color: var(--alert-700); font-size: var(--fs-s); }
.outbox-confirm { color: var(--alert-700); font-size: var(--fs-s); }

/* نوارِ کناری تیره است؛ هشدارِ خروج کارتی روشن رویش است تا خوانده شود، نه اینکه گم شود. */
.logout-warning {
  display: grid;
  gap: 0.5rem;
  margin-block: 0.25rem 0.5rem;
  padding: 0.75rem;
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-s);
}
.logout-warning p { margin: 0; }

.queued-panel { display: grid; gap: 0.75rem; border-color: var(--amber-100); background: var(--amber-50); }
.queued-panel h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--amber-700); font-size: var(--fs-l); }
.queued-panel p { margin: 0; }
.queued-panel.is-arrived { border-color: var(--line); background: var(--ok-50); }
.queued-panel.is-arrived h2 { color: var(--ok-700); }

/* متنِ بلند نوار را می‌شکست و آیکون تنها در سطرِ خودش می‌ماند؛ آیکون کنارِ سطرِ اول می‌نشیند. */
.offline-banner, .outbox-fix, .moadian-panel .banner { flex-wrap: nowrap; align-items: flex-start; }
.offline-banner > span, .outbox-fix > span, .moadian-panel .banner > span { flex: 1; min-inline-size: 0; }
.offline-banner > .icon, .outbox-banner > .icon, .outbox-fix > .icon, .moadian-panel .banner > .icon { flex: none; margin-block-start: 0.2em; }
.outbox-banner { align-items: flex-start; }
.outbox-panel .hint { margin-block: 0 0.75rem; }
.outbox-fix-reason { display: block; margin-block-end: 0.125rem; }

/* ---------- سامانه‌ی مؤدیان (تنظیمات مرکز) ---------- */

.moadian-panel { margin-block-start: 1.25rem; }
.moadian-facts { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.moadian-facts > div { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
.moadian-facts dt { color: var(--ink-3); font-size: var(--fs-s); min-inline-size: 12rem; }
.moadian-facts dd { margin: 0; min-inline-size: 0; }
/* شناسه‌ی مرکز بلند است؛ روی موبایل باید بشکند نه صفحه را پهن کند. */
.moadian-key { overflow-wrap: anywhere; font-size: var(--fs-s); }

/* ---------- نمایشگرِ رادیوگرافی ---------- */

/* رادیوگرافی روی زمینه‌ی تیره خوانده می‌شود — در هر دو حالتِ روشن و تیره‌ی برنامه. رنگ‌ها توکن‌اند
   و فقط همین‌جا به کار می‌روند؛ زردِ خطِ اندازه روی خاکستریِ تصویر بیشترین تمایز را دارد. */
:root {
  --viewer-bg: #0E141B;
  --viewer-panel: #16202B;
  --viewer-line: #2A3947;
  --viewer-ink: #E6EDF5;
  --viewer-ink-2: #A9B8C8;
  --viewer-accent: #5CC8E8;
  --viewer-measure: #FFD24A;
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--viewer-bg);
  color: var(--viewer-ink);
}
.viewer:focus { outline: none; }

.viewer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 1rem;
  border-block-end: 1px solid var(--viewer-line);
}
.viewer-heading { display: flex; align-items: baseline; gap: 0.75rem; min-inline-size: 0; }
.viewer-heading h2 { margin: 0; font-size: var(--fs-m); color: var(--viewer-ink); overflow-wrap: anywhere; }
.viewer-count, .viewer-zoom { color: var(--viewer-ink-2); font-size: var(--fs-s); }
.viewer-zoom { min-inline-size: 3.5rem; text-align: center; }
.viewer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.viewer-sep { inline-size: 1px; block-size: 1.5rem; margin-inline: 0.25rem; background: var(--viewer-line); }

.viewer .icon-btn, .viewer .btn-ghost { color: var(--viewer-ink); }
.viewer .icon-btn:hover, .viewer .btn-ghost:hover { border-color: var(--viewer-line); background: var(--viewer-panel); color: #fff; }
.viewer .icon-btn[aria-pressed="true"], .viewer .btn[aria-pressed="true"] {
  border-color: var(--viewer-accent);
  background: rgb(92 200 232 / 0.15);
  color: var(--viewer-accent);
}
.viewer .icon-btn:disabled { opacity: 0.4; cursor: default; }
.viewer .icon-btn:focus-visible, .viewer .btn:focus-visible { outline: 2px solid var(--viewer-accent); outline-offset: 2px; }

.viewer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  min-block-size: 0;
}

/* صحنه جهتِ ltr دارد: مرکز کردن و جابه‌جاییِ تصویر فیزیکی است، نه متنی. */
.viewer-stage {
  position: relative;
  overflow: hidden;
  direction: ltr;
  touch-action: none;
  user-select: none;
}
.viewer-stage.is-pan { cursor: grab; }
.viewer-stage.is-pan.is-dragging { cursor: grabbing; }
.viewer-stage.is-measure { cursor: crosshair; }

.viewer-canvas {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform-origin: 50% 50%;
}
.viewer-canvas img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  -webkit-user-drag: none;
}

.viewer-overlay { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.viewer-stage.is-measure .viewer-overlay { pointer-events: auto; }
.viewer-line line { stroke: var(--viewer-measure); stroke-linecap: round; }
.viewer-line circle, .viewer-pending { fill: var(--viewer-measure); }
.viewer-line.is-calibration line { stroke: var(--viewer-accent); stroke-dasharray: 6 4; }
.viewer-line.is-calibration circle { fill: var(--viewer-accent); }
.viewer-line text {
  fill: #fff;
  stroke: rgb(0 0 0 / 0.8);
  paint-order: stroke;
  text-anchor: middle;
  direction: rtl;
  unicode-bidi: plaintext;
  font-family: var(--font);
}

.viewer-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--viewer-ink-2);
  direction: rtl;
}
.viewer-message p { margin: 0; max-inline-size: 32rem; }
.viewer-skeleton { inline-size: 12rem; block-size: 8rem; opacity: 0.3; margin-inline: auto; }

.viewer-side {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1rem;
  overflow-y: auto;
  border-inline-start: 1px solid var(--viewer-line);
  background: var(--viewer-panel);
}
.viewer-side label, .viewer-side h3 { color: var(--viewer-ink); }
.viewer-side h3 { margin: 0 0 0.25rem; font-size: var(--fs-s); }
.viewer-side .hint { color: var(--viewer-ink-2); margin: 0; }
.viewer-slider input[type="range"] { inline-size: 100%; accent-color: var(--viewer-accent); }
.viewer-slider label { display: flex; justify-content: space-between; }
.viewer-measures { display: grid; gap: 0.5rem; }
.viewer-measure-list { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; list-style-type: persian; }
.viewer-calibrate { display: grid; gap: 0.375rem; }
.viewer-calibrate-row { display: flex; gap: 0.5rem; }
.viewer-calibrate-row input { flex: 1; min-inline-size: 0; }
.viewer-facts { display: grid; gap: 0.375rem; margin: 0; font-size: var(--fs-s); }
.viewer-facts > div { display: flex; gap: 0.75rem; }
.viewer-facts dt { color: var(--viewer-ink-2); min-inline-size: 4.5rem; }
.viewer-facts dd { margin: 0; overflow-wrap: anywhere; }
.viewer .field-error { color: #FFB4A8; }

/* تبلت و گوشی: پنلِ کناری زیرِ تصویر، و تصویر بیشترِ صفحه. */
@media (max-width: 56rem) {
  .viewer-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(16rem, 1fr) auto; }
  .viewer-side { max-block-size: 40vh; border-inline-start: 0; border-block-start: 1px solid var(--viewer-line); }
  .viewer-bar { padding-inline: 0.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .viewer-canvas { transition: transform 0.12s ease-out; }
  .viewer-stage.is-dragging .viewer-canvas { transition: none; }
}

/* کارتِ سند: کلِ تصویر دکمه‌ی «باز کردن در نمایشگر» است. */
.doc-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-s, 6px);
}
.doc-open:disabled { cursor: default; }
.doc-open:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.doc-filter { justify-content: space-between; }

@media print { .viewer { display: none !important; } }

/* ---------- مرکزِ راهنما ----------
   راهنما یک کتابچه است، نه داشبورد: ستونِ متن باریک (حدودِ ۴۲ واژه در سطر) با فاصله‌ی خطِ
   فارسی، و کنارش فهرستِ همان دسته که هنگامِ خواندن سرِ جایش می‌ماند. رنگِ تازه‌ای نمی‌آورد؛
   نکته‌ها فیروزه‌ای و «حواستان باشد» کهربایی — قرمز فقط برای هشدارِ پزشکی و خطا می‌ماند. */

.help-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.help-crumbs a { color: var(--ink-2); text-decoration: none; }
.help-crumbs a:hover { color: var(--navy-700); text-decoration: underline; }

.help-search { max-inline-size: 44rem; }

/* نتیجه‌های جست‌وجو */
.help-hits { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }

.help-hit {
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.help-hit:hover { border-color: var(--line-strong); background: var(--surface-2); }
.help-hit:focus-visible { outline: none; box-shadow: var(--ring); }
.help-hit strong { font-weight: 600; }
.help-hit-cat { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-3); font-size: var(--fs-xs); }
.help-hit-summary { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.8; }
.help-subhead { margin: 0 0 0.75rem; font-size: var(--fs-m); }

/* صفحه‌ی اول: پیشنهادِ نقش، دسته‌ها، پرسش‌ها */
.help-starters { margin-block-end: 2rem; }
.help-starters h2, .help-faq h2 { margin: 0 0 0.75rem; font-size: var(--fs-l); }

.help-starters ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-starter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  block-size: 100%;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s;
}

.help-starter:hover { border-color: var(--navy-700); }
.help-starter:focus-visible { outline: none; box-shadow: var(--ring); }
.help-starter strong { display: block; margin-block-end: 0.25rem; font-weight: 600; }
.help-starter-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--fs-s);
  line-height: 1.8;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.help-starter-icon, .help-cat-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-800);
}

/* ستون‌ها، نه grid: دسته‌ها طولِ متفاوت دارند (پنج تا ده موضوع) و در grid هر ردیف به بلندترینش
   کش می‌آمد و زیرِ دسته‌ی کوتاه جای خالی می‌ماند. ترتیبِ خواندن ستون‌به‌ستون است، از راست. */
.help-cats {
  columns: 2 21rem;
  column-gap: 1rem;
  margin-block-end: 2.5rem;
}

.help-cats > .help-cat { break-inside: avoid; margin-block-end: 1rem; }

.help-cat {
  padding: 1.125rem 1.25rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  scroll-margin-block-start: 1rem;
}

.help-cat-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; margin-block-end: 0.5rem; }
.help-cat-head h2 { margin: 0; font-size: var(--fs-m); }
.help-cat-head p { margin: 0.125rem 0 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.8; }

.help-cat ul { margin: 0; padding: 0; list-style: none; }
.help-cat li + li { border-block-start: 1px solid var(--line); }

.help-cat a {
  display: block;
  padding-block: 0.5rem;
  color: var(--navy-700);
  font-size: var(--fs-s);
  text-decoration: none;
}

.help-cat a:hover { text-decoration: underline; }

.help-faq { max-inline-size: 48rem; margin-block-end: 1.5rem; }

.faq-list { display: grid; gap: 0.5rem; }

.faq {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-block-size: 2.75rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; color: var(--ink-3); transition: rotate 0.15s; }
.faq[open] summary .icon { rotate: 180deg; }
.faq summary:focus-visible { outline: none; border-radius: var(--r-m); box-shadow: var(--ring); }
.faq p { margin: 0; padding: 0 1rem 0.875rem; color: var(--ink-2); line-height: 1.9; }
.faq-more { margin-inline-start: 0.375rem; white-space: nowrap; }

.help-foot { display: flex; align-items: center; gap: 0.375rem; }

/* صفحه‌ی موضوع: فهرستِ دسته در شروع (راست)، متن در میان */
.help-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 44rem);
  align-items: start;
  gap: 2.5rem;
}

.help-side {
  position: sticky;
  inset-block-start: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.help-side-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.375rem;
  padding-inline: 0.5rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.help-side ul { margin: 0 0 0.5rem; padding: 0; list-style: none; }

.help-side li a {
  display: block;
  padding: 0.375rem 0.5rem;
  border-inline-start: 3px solid transparent;
  border-radius: var(--r-s);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  color: var(--ink);
  font-size: var(--fs-s);
  line-height: 1.7;
  text-decoration: none;
}

.help-side li a:hover { background: var(--surface-2); }
.help-side li a:focus-visible { outline: none; box-shadow: var(--ring); }

/* موضوعِ جاری: نوارِ رنگی در لبه‌ی شروع، هم‌جهتِ خواندن */
.help-side li a[aria-current="page"] {
  background: var(--cyan-50);
  border-inline-start-color: var(--navy-700);
  color: var(--navy-900);
  font-weight: 600;
}

.help-side-all {
  display: block;
  padding: 0.375rem 0.5rem 0.125rem;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-xs);
}

.help-article { min-inline-size: 0; }
.help-article h2 { margin: 0 0 0.625rem; font-size: var(--fs-l); }

.help-summary { margin: 0 0 1rem; color: var(--ink); font-size: var(--fs-l); line-height: 1.9; }

.help-go { margin-block-end: 1.75rem; }

.help-flow { margin-block-end: 1.75rem; }
.help-flow p { margin: 0; line-height: 2; }

/* گام‌های شماره‌دار: عددِ فارسی درون دایره، خطِ باریکی که گام‌ها را به هم وصل می‌کند. */
.help-steps {
  counter-reset: help-step;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.help-steps li {
  position: relative;
  counter-increment: help-step;
  padding-block: 0 1rem;
  padding-inline-start: 2.75rem;
  line-height: 2;
}

.help-steps li::before {
  content: counter(help-step, persian);
  position: absolute;
  inset-block-start: 0.125rem;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy-800);
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1;
}

.help-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 2.125rem 0.25rem;
  inset-inline-start: calc(0.9375rem - 0.5px);
  inline-size: 1px;
  background: var(--line);
}

.help-note {
  margin-block-end: 1.25rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--r-l);
}

.help-note h2 { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.375rem; font-size: var(--fs-m); }
.help-note ul { display: grid; gap: 0.375rem; margin: 0; padding-inline-start: 1.25rem; line-height: 1.9; }

.help-tips { border: 1px solid var(--cyan-100); background: var(--cyan-50); color: var(--navy-900); }
.help-cautions { border: 1px solid var(--amber-100); background: var(--amber-50); color: var(--amber-700); }

.help-related { margin-block: 1.75rem; }
.help-related h2 { font-size: var(--fs-m); }
.help-related ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.help-related a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--navy-700);
  font-size: var(--fs-s);
  text-decoration: none;
}

.help-related a:hover { border-color: var(--navy-700); }
.help-related a:focus-visible { outline: none; box-shadow: var(--ring); }

.help-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--line);
}

.help-pager a {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.help-pager a:hover { border-color: var(--line-strong); background: var(--surface-2); }
.help-pager a:focus-visible { outline: none; box-shadow: var(--ring); }
.help-pager-label { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.help-next { grid-column: 2; text-align: end; }
.help-next .help-pager-label { justify-content: end; }

@media (max-width: 56rem) {
  .help-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

  /* در صفحه‌ی باریک، فهرستِ دسته بعد از متن می‌آید: کسی که از «راهنما» آمده دنبالِ همین موضوع است. */
  .help-side { position: static; order: 2; }
  .help-summary { font-size: var(--fs-m); }
}

@media (prefers-reduced-motion: reduce) {
  .help-starter, .faq summary .icon { transition: none; }
}

/* تور: نوارِ پیشرفت، نکته‌های هر گام و لینکِ راهنمای کامل */
.tour-progress { block-size: 3px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.tour-progress > span { display: block; block-size: 100%; border-radius: inherit; background: var(--cyan-500); transition: inline-size 0.2s; }
.tour-points { display: grid; gap: 0.25rem; margin: 0; padding-inline-start: 1.125rem; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.8; }
.tour-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.tour-links:empty { display: none; }
.tour-more { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-s); }

@media (prefers-reduced-motion: reduce) {
  .tour-progress > span { transition: none; }
}

/* ---------- پیشخوان: جست‌وجو در نوارِ «الان» ----------
   یک ردیفِ تمام‌عرض در پایینِ نوارِ تیره. خانه روشن می‌ماند تا روی زمینه‌ی سرمه‌ای اولین چیزی
   باشد که چشم برای تایپ پیدا می‌کند. */
.pulse { flex-wrap: wrap; }
.pulse-search { flex: 1 1 100%; min-inline-size: 0; }
.pulse-search form { margin: 0; }

.pulse-search .search-field input {
  min-block-size: 2.875rem;
  border-color: transparent;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-m);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
}

.pulse-search .search-field input::placeholder { color: var(--ink-3); }
.pulse-search .search-field input:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgb(47 207 226 / 0.45); }

/* ---------- پیشخوان: میان‌بُرها ---------- */
/* کاشی‌های ایستاده (آیکون بالا، نام زیر): هفت کاشی در یک ردیف جا می‌شوند و هیچ‌کدام تنها در
   ردیفِ دوم نمی‌ماند. */
.quick-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(6.25rem, 100%), 1fr));
  gap: 0.625rem;
  margin-block-end: 1.25rem;
}

.quick-tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.375rem;
  min-block-size: 5.25rem;
  padding: 0.75rem 0.5rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.quick-tile:hover {
  border-color: var(--navy-700);
  box-shadow: 0 6px 16px -10px rgb(var(--shadow-hue) / 0.35);
  transform: translateY(-1px);
}

.quick-tile:focus-visible { outline: none; box-shadow: var(--ring); }

.quick-tile-icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-800);
}

.quick-tile:hover .quick-tile-icon { background: var(--cyan-100); }
.quick-tile-label { max-inline-size: 100%; overflow: hidden; font-size: var(--fs-s); font-weight: 600; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }

.quick-tile-kbd {
  position: absolute;
  inset-block-start: 0.375rem;
  inset-inline-end: 0.5rem;
  padding: 0 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink-3);
  font-family: inherit;
  font-size: 0.6875rem;
  line-height: 1.5;
}

/* بی صفحه‌کلید (گوشی و تبلت) نشانِ کلید معنایی ندارد. */
@media (hover: none) { .quick-tile-kbd { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .quick-tile { transition: none; }
  .quick-tile:hover { transform: none; }
}

/* ---------- پیشخوان: کارهای امروز با آیکون ---------- */
.today-action { align-items: center; }

.today-action-icon {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-800);
}

.today-action[data-action-item="noshow"] .today-action-icon { background: var(--amber-100); color: var(--amber-700); }
.today-action[data-action-item="waiting"] { border-color: var(--navy-700); }

/* ---------- پیشخوان: سرتیترِ ویجت با آیکونِ خودش ----------
   هر ویجت یک نشانه دارد تا در صفحه‌ی پُر، چشم «پول» را از «انتظار» بی‌خواندن جدا کند. */
.widget-title { display: flex; align-items: center; gap: 0.5rem; }

.widget-title-icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-800);
}

.home-grid .panel { box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05); }

/* ---------- حسابداری ---------- */
/* همه با پیشوندِ acc- تا با کلاس‌های صندوق و انبار قاطی نشوند. رنگِ «هزینه» و «زیان» کهربایی است، نه
   قرمز: قرمز در این سامانه فقط برای هشدار پزشکی و خطاست. */

.acc-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-block-end: 1rem;
}

.acc-branch { min-inline-size: 11rem; }
/* پنج بازه روی گوشی جا نمی‌شوند؛ کلِ دکمه به ردیفِ بعد می‌رود، نه نیمی از متنش. */
.acc-filters .segmented { flex-wrap: wrap; max-inline-size: 100%; }
.acc-filters .segment span { white-space: nowrap; }
.acc-period-label { margin-inline-start: auto; color: var(--navy-900); }

.acc-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-block: -0.25rem 1rem;
}
.acc-custom .field { flex: 0 1 12rem; }

.acc-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* عملکردِ بازه: سه عددِ اصلی؛ سود روی سطحِ پر، چون جوابِ «ماه چطور گذشت» همین است. */
.acc-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.75rem;
  margin-block-end: 0.75rem;
}

.acc-figure {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}
.acc-figure-label { color: var(--ink-2); font-size: var(--fs-s); }
.acc-figure strong { color: var(--navy-900); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.acc-figure small { color: var(--ink-3); font-size: var(--fs-xs); }

.acc-figure-result { border-color: var(--fill); background: var(--fill); }
.acc-figure-result .acc-figure-label,
.acc-figure-result strong,
.acc-figure-result small { color: var(--fill-ink); }
.acc-figure-result small { opacity: 0.85; }
.acc-figure-result.is-loss { border-color: var(--amber-100); background: var(--amber-50); }
.acc-figure-result.is-loss .acc-figure-label,
.acc-figure-result.is-loss strong,
.acc-figure-result.is-loss small { color: var(--amber-700); }

.acc-collected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-block-end: 1rem;
  color: var(--ink-2);
  font-size: var(--fs-s);
}
.acc-collected strong { color: var(--navy-900); }

.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}
.acc-trend-panel { grid-column: 1 / -1; }

.acc-legend { display: flex; gap: 0.75rem; color: var(--ink-2); font-size: var(--fs-xs); }
.acc-key { display: inline-flex; align-items: center; gap: 0.375rem; }
.acc-key::before { content: ""; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 2px; }
.acc-key-revenue::before { background: var(--fill); }
.acc-key-expense::before { background: var(--amber-500); }

/* روندِ دوازده ماه: ستونِ جفت برای هر ماه — درآمد و هزینه کنار هم، ارتفاع نسبت به بزرگ‌ترین عدد. */
.acc-trend {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.375rem;
  block-size: 11rem;
  padding-block-start: 0.5rem;
}
.acc-trend-col { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.25rem; min-inline-size: 0; }
.acc-trend-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  border-block-end: 1px solid var(--line-strong);
}
.acc-bar {
  inline-size: min(0.875rem, 45%);
  border-start-start-radius: 3px;
  border-start-end-radius: 3px;
}
.acc-bar-revenue { background: var(--fill); }
.acc-bar-expense { background: var(--amber-500); }
.acc-trend-col.is-loss .acc-trend-month { color: var(--amber-700); font-weight: 600; }
.acc-trend-month {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 0.6875rem;
  text-align: center;
  white-space: nowrap;
}

.acc-breakdown { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.acc-breakdown li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.25rem 0.75rem; }
.acc-meter {
  grid-column: 1 / -1;
  block-size: 0.375rem;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.acc-meter span { display: block; block-size: 100%; border-radius: var(--r-pill); background: var(--amber-500); }

.acc-balance-group { margin: 0.75rem 0 0.25rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.acc-balance-group:first-of-type { margin-block-start: 0; }
.acc-balance-list { display: grid; margin: 0; }
.acc-balance-list > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border-block-end: 1px dashed var(--line);
}
.acc-balance-list > div:last-child { border-block-end: 0; }
.acc-balance-list dd { margin: 0; color: var(--ink); font-weight: 600; }

/* صورت‌ها و تراز: سرگروه، جمعِ گروه و جمعِ کل سه سطحِ وزن‌اند، نه سه رنگ. */
.acc-statement-switch { margin-block-end: 1rem; }

.data .acc-section th {
  padding-block: 0.375rem;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: 600;
  text-align: start;
}
/* سرسطرِ جمع‌ها th است (برای صفحه‌خوان)، ولی نباید ظاهر و چسبندگیِ سرِ جدول را بگیرد. */
.data .acc-section th,
.data .acc-subtotal th,
.data .acc-total th { position: static; white-space: normal; }
.data .acc-subtotal th { background: none; }
.data .acc-subtotal th,
.data .acc-subtotal td { border-block-start: 1px solid var(--line-strong); font-weight: 600; text-align: start; }
.data .acc-subtotal td.col-money { text-align: end; }
.data .acc-total th,
.data .acc-total td { border-block-start: 2px solid var(--navy-700); color: var(--navy-900); font-weight: 700; text-align: start; }
.data .acc-total td.col-money { text-align: end; }
.data .acc-total.is-loss th,
.data .acc-total.is-loss td { color: var(--amber-700); }

.acc-code { margin-inline: 0.375rem; color: var(--ink-3); font-size: var(--fs-xs); }
.acc-trial .acc-code { margin-inline: 0 0.5rem; }
.acc-trial tr.is-inactive td { color: var(--ink-3); }

.acc-sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}

.acc-ledger-pick { max-inline-size: 30rem; margin-block-end: 0.75rem; }
.acc-ledger-facts { margin-block-end: 0.75rem; }
.acc-ledger-desc { min-inline-size: 12rem; }

/* دفتر روزنامه: هر سند یک کارتِ سبک داخلِ پنل؛ ابطال‌شده خط‌خورده، ابطال با خطِ‌چین. */
[data-journal] .journal-entry {
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
[data-journal] .journal-entry.is-reversed { background: var(--surface-2); }
[data-journal] .journal-entry.is-reversed .acc-journal-lines td { text-decoration: line-through; text-decoration-color: var(--line-strong); }
[data-journal] .journal-entry.is-reversal { border-style: dashed; }
.journal-total { margin-inline-start: auto; color: var(--navy-900); font-weight: 600; }
.journal-actions { display: flex; justify-content: flex-end; }
.acc-more { display: flex; justify-content: center; margin-block-start: 1rem; }

.acc-entry-kinds { flex-wrap: wrap; margin-block-end: 1rem; }
.acc-entry form { display: grid; gap: 0.75rem; }
.acc-lines select { inline-size: 100%; min-inline-size: 12rem; }
.acc-lines .cell-input { inline-size: 9rem; }

.acc-account-form {
  display: grid;
  gap: 0.75rem;
  margin-block-end: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.acc-account-form h3 { font-size: var(--fs-m); }

.acc-chart-group { margin: 1.25rem 0 0.375rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.acc-chart { display: grid; margin: 0; padding: 0; list-style: none; }
.acc-chart li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.25rem;
  border-block-end: 1px solid var(--line);
}
.acc-chart li.is-inactive { color: var(--ink-3); }
.acc-chart .acc-code { margin: 0; font-size: var(--fs-s); }
.acc-chart-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.acc-chart-balance { font-weight: 600; }
.acc-chart-actions { display: flex; gap: 0.25rem; }

.acc-print-head { display: none; }

@media (max-width: 40rem) {
  .acc-period-label { flex-basis: 100%; margin-inline-start: 0; }
  .acc-figure strong { font-size: var(--fs-xl); }
  .acc-trend { gap: 0.125rem; }
  /* دوازده برچسب در عرض گوشی جا نمی‌شوند؛ یکی در میان، طوری که آخرین ماه (تازه‌ترین) همیشه برچسب دارد. */
  .acc-trend-col:nth-child(odd) .acc-trend-month { visibility: hidden; }
  .acc-chart li { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .acc-chart-balance, .acc-chart-actions { grid-column: 2; }
  /* ردیف‌های سند و سندِ مرکب روی گوشی: فاصله‌ی کمتر تا جدولِ سه‌ستونه بی‌اسکرول جا شود. */
  [data-journal] .journal-entry { padding: 0.625rem 0.5rem; }
  .acc-journal-lines th, .acc-journal-lines td { padding-inline: 0.375rem; }
  .acc-lines select { min-inline-size: 9rem; }
  .acc-lines .cell-input { inline-size: 6.5rem; }
  .acc-ledger-desc { min-inline-size: 9rem; }
}

@media print {
  /* گزارشِ کاغذی: سربرگ با نامِ مرکز و بازه، بی فیلتر و دکمه. */
  .acc-print-head { display: flex; justify-content: space-between; gap: 1rem; margin-block-end: 0.75rem; }
  .acc-filters, .acc-custom, .acc-statement-switch, .acc-journal-filters, .acc-more, .journal-actions,
  .acc-head-actions, [data-trial-balance] .check-row, .acc-ledger-pick { display: none !important; }
  .link-button { color: inherit; text-decoration: none; }
  .acc-figure-result { border-color: #000; background: none; }
  .acc-figure-result .acc-figure-label, .acc-figure-result strong, .acc-figure-result small { color: #000; }
}

/* ---------- صندوق روز ---------- */
/* کاشی‌های قدیمیِ بالای صفحه حالا خانه‌های «صندوق روز در یک نگاه»اند (CashboxGlance). */

.cash-methods th, .cash-methods td { padding-inline: 0.625rem; }
.cash-subhead { margin: 1.25rem 0 0.5rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.cash-subhead .muted { font-weight: 400; }

/* صورتِ صندوق: مثل برگه‌ی تطبیق — هر سطر یک گردش، خطِ آخر جمع. */
.cash-statement { display: grid; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.cash-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.875rem;
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-s);
}
.cash-line:last-child { border-block-end: 0; }
.cash-line .num { font-weight: 600; white-space: nowrap; }
.cash-line-opening { background: var(--surface-2); }
.cash-line-in .num { color: var(--ok-700); }
.cash-line-out .num { color: var(--amber-700); }
.cash-line-total { background: var(--surface-2); border-block-start: 2px solid var(--navy-700); font-weight: 700; color: var(--navy-900); }
.cash-line-total .num { color: var(--navy-900); }

.cash-cashiers { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.cash-cashiers li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border-block-end: 1px dashed var(--line); font-size: var(--fs-s); }
.cash-cashiers li:last-child { border-block-end: 0; }

/* شمارشِ اسکناس: جمع خودش حساب می‌شود و با یک دکمه در «پول شمرده‌شده» می‌نشیند. */
.cash-counter { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.cash-counter summary {
  padding: 0.5rem 0.875rem;
  color: var(--navy-700);
  font-size: var(--fs-s);
  font-weight: 600;
  cursor: pointer;
}
.cash-counter[open] summary { border-block-end: 1px solid var(--line); }
.cash-notes { display: grid; gap: 0.375rem; padding: 0.75rem 0.875rem; }
.cash-note {
  display: grid;
  grid-template-columns: minmax(6.5rem, 1fr) 5rem minmax(6rem, 1fr);
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-s);
}
.cash-note input { min-block-size: 2.25rem; padding: 0.25rem 0.5rem; text-align: center; }
.cash-note-coins { grid-template-columns: minmax(6.5rem, 1fr) minmax(5rem, 11rem) minmax(0, 1fr); }
.cash-note-coins input { text-align: start; }
.cash-note-face { color: var(--ink-2); }
.cash-note-sum { color: var(--ink-3); text-align: end; }
.cash-counter-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-s);
}

.cash-receipts tr.is-voided td { color: var(--ink-3); }
/* خطِ خوردگی فقط روی ساعت، شماره، نام و مبلغ — نه روی دلیلِ ابطال که زیرِ نام می‌آید. */
.cash-receipts tr.is-voided td:nth-child(1), .cash-receipts tr.is-voided td:nth-child(2),
.cash-receipts tr.is-voided td:nth-child(3) a, .cash-receipts tr.is-voided td:nth-child(5) { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.cash-refund { color: var(--amber-700); }
.cash-receipts .cash-void-reason { color: var(--amber-700); }
.cash-short { color: var(--amber-700); font-weight: 600; }

/* چهار نوعِ گردش در شبکه‌ی دوبه‌دو، نه سه‌تا و یکی — پنلِ کشو نصفِ صفحه است. */
.segmented.drawer-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  inline-size: 100%;
  margin-block-end: 0.75rem;
}
.drawer-kinds .segment span { text-align: center; }
.drawer-kinds .segment span { white-space: nowrap; }
.drawer-entries { display: grid; margin: 0; padding: 0; list-style: none; }
.drawer-entries > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.625rem 0;
  border-block-end: 1px solid var(--line);
}
.drawer-entries > li:last-child { border-block-end: 0; }
.drawer-entries > li.is-reversed .drawer-entry-main strong,
.drawer-entries > li.is-reversed .drawer-entry-amount { text-decoration: line-through; color: var(--ink-3); }
.drawer-entries > li.is-reversal { color: var(--ink-2); }
.drawer-entry-main { display: grid; min-inline-size: 0; }
.drawer-entry-amount { font-weight: 600; white-space: nowrap; }
.drawer-entry-amount.is-in { color: var(--ok-700); }
.drawer-entry-amount.is-out { color: var(--amber-700); }
.drawer-reverse { grid-column: 1 / -1; }

@media (max-width: 40rem) {
  .cash-methods th, .cash-methods td { padding-inline: 0.375rem; }
  .cash-note { grid-template-columns: minmax(5.5rem, 1fr) 4.25rem minmax(4.5rem, 1fr); gap: 0.5rem; }
}

@media print {
  .day-bar, .cash-counter, [data-close-panel] form, .drawer-kinds, [data-drawer-form] form,
  [data-action='void-receipt'], [data-action='reverse-drawer'], #receipt-q, [data-method-filter] { display: none !important; }
}

/* ---------- دفتر چک‌ها ---------- */
/* کاشی‌ها هم خلاصه‌اند هم فیلتر: روی هر کدام بزنید همان وضعیت می‌آید. «سررسید گذشته» اگر چیزی دارد
   کهربایی می‌شود — همان جایی که کار مانده. */

.cheque-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 0.625rem;
  margin-block-end: 1rem;
}

.cheque-tile {
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.cheque-tile:hover { border-color: var(--line-strong); }
.cheque-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.cheque-tile-label { color: var(--ink-2); font-size: var(--fs-s); }
.cheque-tile strong { color: var(--navy-900); font-size: var(--fs-l); font-weight: 700; font-variant-numeric: tabular-nums; }
.cheque-tile small { color: var(--ink-3); font-size: var(--fs-xs); }
.cheque-tile.is-attention { border-color: var(--amber-100); background: var(--amber-50); }
.cheque-tile.is-attention strong, .cheque-tile.is-attention .cheque-tile-label { color: var(--amber-700); }
.cheque-tile.is-active { border-color: var(--fill); box-shadow: inset 0 0 0 1px var(--fill); }

.cheque-toolbar { align-items: center; }
.cheque-view-title { margin-inline-start: auto; color: var(--navy-900); }

.data .cheque-group th {
  position: static;
  padding-block: 0.375rem;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: 600;
  text-align: start;
}
.cheque-late { color: var(--amber-700); font-weight: 600; }
/* چهار کار، دو‌به‌دو؛ ستونی شدنشان ردیف را بلند و فهرست را ناخوانا می‌کرد. */
.cheque-table .col-actions { min-inline-size: 12.5rem; }
.cheque-actions { display: grid; grid-template-columns: repeat(2, auto); justify-content: end; gap: 0.25rem; }
.cheque-actions .btn { white-space: nowrap; }

@media (max-width: 40rem) {
  .cheque-view-title { flex-basis: 100%; margin-inline-start: 0; }
  .cheque-tile strong { font-size: var(--fs-m); }
}

@media print {
  .cheque-tiles, .cheque-toolbar, .cheque-actions { display: none !important; }
}

/* ---------- تسویه‌ی پزشکان ---------- */
/* هر پزشک یک کارت: سه عدد که مدیر هر ماه دنبالشان است — کارِ تسویه‌نشده، بدهیِ ثبت‌شده، پرداختِ اخیر.
   کارتی که بدهیِ پرداخت‌نشده دارد لبه‌ی کهربایی می‌گیرد؛ همان جایی که کار مانده. */

.settle-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.625rem;
  margin: 0 0 0.75rem;
}

.settle-stat {
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}
.settle-stat dt { color: var(--ink-2); font-size: var(--fs-s); }
.settle-stat dd { display: grid; gap: 0.125rem; margin: 0; }
.settle-stat strong { color: var(--navy-900); font-size: var(--fs-l); font-weight: 700; font-variant-numeric: tabular-nums; }
.settle-stat small { color: var(--ink-3); font-size: var(--fs-xs); }
.settle-stat.is-attention { border-color: var(--amber-100); background: var(--amber-50); }
.settle-stat.is-attention strong, .settle-stat.is-attention dt { color: var(--amber-700); }

.settle-doctors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}

.settle-doctor {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}
.settle-doctor.has-owed { border-inline-start: 3px solid var(--amber-500); }

.settle-doctor-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.settle-doctor-head h2 { margin: 0; font-size: var(--fs-m); }
.settle-doctor-last { margin-inline-start: auto; color: var(--ink-3); font-size: var(--fs-xs); }

.settle-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: 0.5rem;
  margin: 0;
}
.settle-figures > div { padding: 0.5rem 0.625rem; border-radius: var(--r-m); background: var(--surface-2); }
.settle-figures dt { color: var(--ink-3); font-size: var(--fs-xs); }
.settle-figures dd { display: grid; margin: 0; }
.settle-figures strong { color: var(--navy-900); font-size: var(--fs-m); font-weight: 700; font-variant-numeric: tabular-nums; }
.settle-figures small { color: var(--ink-3); font-size: var(--fs-xs); }
.settle-figures .is-owed { background: var(--amber-50); }
.settle-figures .is-owed strong { color: var(--amber-700); }

.settle-warn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0.5rem 0.625rem;
  border-radius: var(--r-m);
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: var(--fs-s);
}
.settle-warn span { flex: 1 1 12rem; }
.settle-no-rule { color: var(--amber-700); font-weight: 600; }
/* روی گوشی ستونِ تاریخ کنار می‌رود تا ستونِ «سهم» — که کلِ جدول برای آن است — از صفحه بیرون نزند. */
.settle-line-date { display: none; color: var(--ink-3); font-size: var(--fs-xs); }

.settle-doctor-actions, .settle-ranges { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.settle-commit {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin-block-start: 1rem;
}
.settle-commit .field { flex: 1 1 16rem; }

.data .settle-total-row th,
.data .settle-total-row td { position: static; background: var(--surface-2); font-weight: 700; }
.data .settle-total-row th { text-align: start; }

.settle-row-actions { display: flex; justify-content: end; gap: 0.25rem; }
.settle-row-actions .btn { white-space: nowrap; }
.settle-panel-head { flex-wrap: wrap; }
.settle-status-cell .settle-row-actions { justify-content: start; flex-wrap: wrap; margin-block-start: 0.375rem; }

.settle-detail { margin-block-end: 1rem; border-color: var(--navy-700); }
.settle-detail .panel-head { flex-wrap: wrap; }
.settle-detail-actions { display: flex; flex-shrink: 0; gap: 0.375rem; }
.settle-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
  color: var(--ink-2);
  font-size: var(--fs-s);
}

.field-inline { display: flex; align-items: center; gap: 0.5rem; }
.field-inline label { margin: 0; white-space: nowrap; }
.field-inline select { min-inline-size: 10rem; }

@media (max-width: 40rem) {
  .settle-stat strong { font-size: var(--fs-m); }
  .settle-doctor-last { margin-inline-start: 0; flex-basis: 100%; }
  .settle-line-date { display: block; }
  /* دو دکمه‌ی کنارِ هم ستونِ کارها را آن‌قدر پهن می‌کرد که جدولِ قواعد روی گوشی از صفحه بیرون می‌زد. */
  .settle-row-actions-stack { flex-direction: column; align-items: stretch; }
  .settlement-lines th, .settlement-list th, .rules-table th { white-space: normal; }
  .field-inline { flex: 1 1 100%; }
  .field-inline select { flex: 1; min-inline-size: 0; }
}

@media print {
  .settle-doctor-actions, .settle-row-actions, .settle-toolbar, .settle-ranges, .settle-detail-actions,
  .settle-line-date { display: none !important; }
}

/* ---------- بیمه ---------- */
/* سنِ طلبِ باز: نوار از تازه (کم‌رنگ) به قدیمی (پررنگ) می‌رود و فقط بیش از شصت روز کهربایی است —
   همان جایی که باید پیگیری کرد. قرمز نه؛ قرمز مالِ هشدار پزشکی و خطاست. */

.ins-aging { display: grid; gap: 0.375rem; }
.ins-aging-bar {
  display: flex;
  gap: 2px;
  block-size: 0.5rem;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--surface-2);
}
.ins-aging-seg { flex-basis: 0; min-inline-size: 0.375rem; }
.is-a30 { background: var(--cyan-300); }
.is-a60 { background: var(--navy-700); }
.is-a90 { background: var(--amber-500); }
.is-a90p { background: var(--amber-700); }

.ins-aging-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem 0.875rem;
  margin: 0;
  padding: 0;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  list-style: none;
}
.ins-aging-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ins-aging-dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; }

.ins-deduct-title { margin: 0.75rem 0 0; font-size: var(--fs-m); }
.ins-deduct-cell { display: grid; gap: 0.375rem; min-inline-size: 9rem; }
.ins-deduct-cell input { inline-size: 100%; }
.ins-settle-sum { margin: 0.5rem 0 0; color: var(--ink-2); }
.ins-settle-sum strong { color: var(--navy-900); }

@media (max-width: 40rem) {
  .claim-cases th, .claim-list th, .claim-lines th, .ins-deduct-table th, .payers-table th { white-space: normal; }
  .ins-deduct-cell { min-inline-size: 7rem; }
}

/* ---------- لابراتوار ---------- */

.lab-tiles .cheque-tile strong { font-size: var(--fs-xl); }
.lab-shade { margin-inline: 0.25rem; color: var(--ink-2); }
.lab-row-actions { flex-wrap: wrap; justify-content: start; margin-block-start: 0.375rem; }
.lab-case-form { margin-block-end: 1rem; }
.lab-cost-sm { display: none; }
.settle-doctor.is-inactive { opacity: 0.7; }
.settle-doctor-head h3 { margin: 0; font-size: var(--fs-m); }

/* برگه‌ی سفارش: A5، یک نگاه — شرح کار، دندان، رنگ و موعد درشت، چون لابراتوار از دور هم باید بخواندش. */
.lab-order-work th { inline-size: 28mm; color: #333; font-weight: 600; }
.lab-order-work td { font-size: 11.5pt; }
.lab-order-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 40rem) {
  .lab-cases th { white-space: normal; }
  .lab-cost-sm { display: block; }
  .lab-row-actions .btn { flex: 1 1 auto; padding-inline: 0.5rem; }
}

@media print {
  .lab-tiles, .lab-row-actions { display: none !important; }
}

/* ---------- خدمات و تعرفه‌ها ---------- */

.service-toolbar .filter-chips { flex-basis: 100%; }
.service-toolbar .filter-chip small { margin-inline-start: 0.25rem; color: var(--ink-3); }
.service-features { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.bulk-price { margin-block-end: 1rem; border-color: var(--navy-700); }

@media (max-width: 40rem) {
  .service-table th, .bulk-preview-table th { white-space: normal; }
}

/* ---------- کارکنان ---------- */

.staff-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 0.875rem;
  align-items: start;
}

/* لینکِ نام (`.row-link`) لایه‌ی کلیکِ کلِ کارت است؛ بی `position: relative` آن لایه تا قابِ صفحه کش می‌آمد و لایه‌ی
   آخرین کارت روی همه‌ی کارت‌ها می‌افتاد — هر کلیکی همان یک نفر را باز می‌کرد. دکمه‌ها و پیوندهای درونِ کارت بالای لایه‌اند. */
.staff-card {
  position: relative;
  display: grid;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}
.staff-card :is(a, button, input, select, label):not(.row-link) { position: relative; z-index: 1; }
.staff-card.has-attention { border-inline-start: 3px solid var(--amber-500); }
.staff-card.is-inactive { opacity: 0.65; }
.staff-card-head { display: flex; align-items: center; gap: 0.625rem; }
.staff-card-title { display: grid; flex: 1; min-inline-size: 0; }
.staff-card-title h2 { margin: 0; font-size: var(--fs-m); }
.staff-card-meta { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }

.staff-avatar {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-900);
  font-weight: 700;
}

.staff-edit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1rem;
  align-items: start;
}
.staff-access { position: sticky; inset-block-start: 1rem; display: grid; gap: 0.5rem; }
.access-group { border-block-start: 1px solid var(--line); padding-block: 0.375rem; }
.access-group summary { display: flex; justify-content: space-between; gap: 0.5rem; cursor: pointer; font-weight: 500; }
.access-group ul { display: grid; gap: 0.25rem; margin: 0.375rem 0 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.access-group li { display: flex; align-items: center; gap: 0.375rem; color: var(--ink-3); }
.access-group li.is-granted { color: var(--ink); }
.access-count { color: var(--ink-2); font-size: var(--fs-xs); font-weight: 400; }
.access-count.is-all { color: var(--ok-700); }
.access-count.is-none { color: var(--ink-3); }
.access-sensitive { margin-inline-start: auto; font-size: var(--fs-xs); }
.role-members { color: var(--ink-3); }

@media (max-width: 56rem) {
  .staff-edit-layout { grid-template-columns: minmax(0, 1fr); }
  .staff-access { position: static; }
}

/* ---------- نقش‌ها ---------- */

.roles-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.roles-list { display: grid; gap: 0.5rem; position: sticky; inset-block-start: 1rem; }
.role-card { inline-size: 100%; }
.role-card-name { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 600; }
.role-new { display: grid; gap: 0.5rem; }
.role-members-line { margin: 0 0 0.75rem; color: var(--ink-2); font-size: var(--fs-s); }
.role-rename { margin-block-end: 0.5rem; }
.perm-group legend { display: flex; align-items: center; gap: 0.5rem; }
.perm-group-actions { display: flex; gap: 0.75rem; margin-block-end: 0.375rem; font-size: var(--fs-s); }
.perm-group .check.is-added { background: var(--ok-50); border-radius: var(--r-s); }
.perm-group .check.is-removed { background: var(--amber-50); border-radius: var(--r-s); }

.role-save-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}
.role-save-bar > span { flex: 1 1 12rem; color: var(--ink-2); }
.role-save-bar.is-dirty { border-color: var(--amber-500); background: var(--amber-50); }
.role-save-bar.is-dirty > span { color: var(--amber-700); font-weight: 600; }

@media (max-width: 56rem) {
  .roles-layout { grid-template-columns: minmax(0, 1fr); }
  .roles-list { position: static; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
}

/* تفویض دستیار: تابلوی پزشکان (مدیر) + فهرست دستیار و شیفت */
.deleg-board { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); margin-block-end: 1.25rem; }
.deleg-card { gap: 0.375rem; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.deleg-card:hover { border-color: var(--navy-700); }
.deleg-card.is-selected { border-color: var(--navy-700); background: var(--cyan-50); box-shadow: 0 0 0 2px var(--cyan-100); }
.deleg-shifts { display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: var(--fs-s); }
.deleg-title { margin: 0 0 0.75rem; font-size: var(--fs-l); }
.deleg-assistants { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.deleg-assistants li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem;
  padding-block: 0.25rem; border-block-end: 1px solid var(--line); }
.deleg-assistants li:last-child { border-block-end: 0; }
.deleg-assistants .note-line { display: inline; margin-inline-start: 0.375rem; }
.shift-table .settle-row-actions { margin-block-start: 0.375rem; }

/* ---------- کارکرد و حقوق ---------- */

/* جدول کارکردِ ماه: ستونِ نام چسبان، خانه‌های هم‌اندازه، رنگِ هر نوع روز از خانواده‌ی رنگ‌های سامانه.
   قرمز فقط برای هشدار پزشکی است؛ غیبت کهربایی است، نه قرمز. */
.ts-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-end: 0.75rem; }
.ts-month { display: flex; align-items: center; gap: 0.25rem; }
.ts-month h2 { min-inline-size: 8.5rem; margin: 0; font-size: var(--fs-l); text-align: center; }
.ts-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ts-search { inline-size: 12rem; min-block-size: 2.25rem; padding: 0.25rem 0.625rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font: inherit; }
.ts-stats { margin-block-end: 1rem; }

.ts-wrap { max-block-size: none; }
.ts-grid { border-collapse: separate; border-spacing: 0; font-size: var(--fs-s); }
.ts-grid th, .ts-grid td { padding: 0.125rem; text-align: center; }
.ts-grid thead th { padding-block: 0.375rem; }
.ts-grid .ts-name {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  min-inline-size: 9rem;
  max-inline-size: 12rem;
  padding-inline: 0.75rem;
  background: var(--surface);
  text-align: start;
  white-space: normal;
}
.ts-grid thead .ts-name { z-index: 3; background: var(--surface-2); }
.ts-grid tbody th.ts-name { inset-block-start: auto; border-block-end: 1px solid var(--line); font-weight: 500; }
.ts-grid tbody th.ts-name span { display: block; }
.ts-missing-count { display: block; color: var(--amber-700); font-size: var(--fs-xs); font-weight: 400; }
.ts-day { min-inline-size: 2rem; }
.ts-day span { display: block; font-variant-numeric: tabular-nums; }
.ts-day small { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.2; }
.ts-day.is-friday, .ts-cell-td.is-friday { background: var(--surface-2); }
.ts-day.is-today { color: var(--navy-900); box-shadow: inset 0 -2px 0 var(--navy-700); }
.ts-total { min-inline-size: 2.75rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ts-grid tbody tr:hover { background: transparent; }
.ts-grid tbody tr:hover .ts-name { background: var(--cyan-50); }

.ts-cell {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
button.ts-cell:hover:not(:disabled) { border-color: var(--navy-700); }
button.ts-cell:focus-visible { outline: none; box-shadow: var(--ring); }
button.ts-cell:disabled { cursor: default; opacity: 0.35; }
.ts-cell.ts-work { background: var(--cyan-50); border-color: var(--cyan-100); color: var(--navy-900); font-weight: 600; }
.ts-cell.has-ot::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--navy-700);
}
.ts-cell.ts-leave, .ts-cell.ts-sick { background: var(--ok-50); color: var(--ok-700); font-weight: 600; }
.ts-cell.ts-absent { background: var(--amber-50); border-color: var(--amber-100); color: var(--amber-700); font-weight: 700; }
.ts-cell.ts-holiday { background: var(--surface-2); color: var(--ink-3); }
.ts-cell.is-missing::after {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--amber-500);
}
.ts-cell.is-locked { border-style: dashed; border-color: var(--ink-3); }
.ts-cell.is-editing { box-shadow: 0 0 0 2px var(--navy-700); }

.ts-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0.75rem 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: var(--fs-xs); }
.ts-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.ts-legend .ts-cell { inline-size: 1.375rem; block-size: 1.375rem; cursor: default; }

.ts-editor, .ts-bulk { margin-block-end: 1rem; padding: 1rem; border: 1px solid var(--navy-700); border-radius: var(--r-l); background: var(--surface); }
.ts-editor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ts-editor-head h3, .ts-bulk h3 { margin: 0; font-size: var(--fs-m); }
.ts-bulk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 0.25rem 0.75rem; }
.choice-field legend .link-button { margin-inline-start: 0.5rem; font-size: var(--fs-s); font-weight: 400; }

/* قراردادها */
.hr-contracts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 1rem; align-items: start; }
.hr-contract { display: grid; gap: 0.625rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.hr-contract.is-missing { border-inline-start: 3px solid var(--amber-500); }
.hr-contract.is-focused { box-shadow: 0 0 0 2px var(--cyan-100); border-color: var(--navy-700); }
.hr-contract-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.hr-contract-head h3 { margin: 0; font-size: var(--fs-m); }
.hr-contract-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.hr-contract-figures dt { color: var(--ink-3); font-size: var(--fs-xs); }
.hr-contract-figures dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.hr-contract-warn { margin: 0; color: var(--amber-700); font-size: var(--fs-s); }
.hr-contract-form { margin-block-start: 0.25rem; border-block-start: 1px solid var(--line); padding-block-start: 0.75rem; }
.hr-contract-form h4 { margin: 0 0 0.5rem; font-size: var(--fs-m); }
.hr-contract .settle-row-actions { flex-wrap: wrap; }

/* لیست حقوق */
.hr-skipped { flex-wrap: nowrap; align-items: flex-start; }
.hr-skipped > div { flex: 1 1 auto; min-inline-size: 0; }
.hr-skipped .link-button { margin-inline-start: 0.5rem; }
.hr-payroll .form-actions { margin-block-start: 0.75rem; }
.hr-payroll .panel-head { flex-wrap: wrap; gap: 0.5rem; }
.hr-payroll .panel-head h2 { white-space: nowrap; }
.stats-compact { grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); }
.hr-skipped p { margin: 0; }
.hr-skipped p + p { margin-block-start: 0.25rem; }
.payroll-table .cell-input + .cell-input { margin-block-start: 0.25rem; }
.payroll-table .payroll-note { font-size: var(--fs-xs); min-block-size: 1.875rem; }

/* فیش حقوق، A5: هر نفر یک برگ */
.payslip + .payslip { break-before: page; }
.payslip-table td:first-child { inline-size: 70%; }
.payslip-sum td { border-block-start: 1px solid #000; font-weight: 600; }

@media (max-width: 56rem) {
  .ts-toolbar { align-items: stretch; }
  .ts-tools { inline-size: 100%; }
  .ts-search { flex: 1 1 10rem; inline-size: auto; }
  .ts-grid .ts-name { min-inline-size: 7rem; max-inline-size: 8rem; padding-inline: 0.5rem; }
  .hr-contract-figures { gap: 0.375rem 0.75rem; }
}
.ts-stats { grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); }
@media (max-width: 40rem) {
  .hr-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-tabs .role-tab { padding-inline: 0.375rem; text-align: center; }
}

/* ---------- گزارش‌ها ---------- */

/* قاب: تیتر و کنش‌ها، زبانه‌های گزارش (اسکرولِ افقی روی گوشی، نه شکستنِ نامرتب)، نوارِ بازه. */
.report-head { align-items: flex-start; }
.report-lead { margin: 0.25rem 0 0; color: var(--ink-2); font-size: var(--fs-s); }
.report-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.report-nav {
  display: flex;
  gap: 0.25rem;
  margin-block-end: 1rem;
  padding-block-end: 0.25rem;
  overflow-x: auto;
  border-block-end: 1px solid var(--line);
  scrollbar-width: thin;
}
.report-nav-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-m) var(--r-m) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-s);
  text-decoration: none;
  white-space: nowrap;
}
.report-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.report-nav-link.active { color: var(--navy-900); font-weight: 600; box-shadow: inset 0 -3px 0 var(--navy-700); }
.report-nav-link:focus-visible { outline: none; box-shadow: var(--ring); }
.report-period { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-block-end: 1rem; }
.report-period .acc-filters { margin-block-end: 0; }
.report-compare { font-size: var(--fs-s); }
.report-search { inline-size: min(22rem, 100%); margin-block-end: 0.75rem; }
.report-panel { margin-block-end: 1rem; }
.report-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1rem; align-items: start; }
.report-columns .report-panel { margin-block-end: 0; }
.report-columns + .report-panel, .report-columns + .report-catalog { margin-block-start: 1rem; }
.report-table td .note-line { display: block; }
.report-table tbody td:first-child, .report-table tbody th:first-child { min-inline-size: 8.5rem; }
.report-table .btn { white-space: nowrap; }
.data tr.is-overdue td:first-child { box-shadow: inset -3px 0 0 var(--amber-500); }
.print-only { display: none; }

/* کارتِ شاخص: عدد بزرگ، تغییر نسبت به دوره‌ی قبل. سبز = بهتر، کهربایی = بدتر؛ قرمز نه. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: 0.625rem; margin-block-end: 1rem; }
.kpi-grid-tight { grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); margin-block-end: 0.75rem; }
.kpi {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}
.kpi.is-link:hover { border-color: var(--navy-700); }
.kpi-link { position: absolute; inset: 0; border-radius: inherit; }
.kpi-link:focus-visible { outline: none; box-shadow: var(--ring); }
.kpi-label { color: var(--ink-2); font-size: var(--fs-s); }
.kpi-value { color: var(--navy-900); font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.kpi-grid-tight .kpi-value { font-size: var(--fs-l); }
.kpi-hint { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.6; }
.kpi-delta { display: inline-flex; align-items: center; gap: 0.25rem; justify-self: start; padding: 0 0.5rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; }
.kpi-delta.is-good { background: var(--ok-50); color: var(--ok-700); }
.kpi-delta.is-bad { background: var(--amber-50); color: var(--amber-700); }
.kpi-delta.is-flat { background: var(--surface-2); color: var(--ink-3); }
.kpi-attention { border-color: var(--amber-100); background: var(--amber-50); }
.kpi-attention .kpi-value { color: var(--amber-700); }

/* نکته‌های نمای کلی: جمله، نه عدد — «چه خبر است». */
.insights ul { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.insight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-inline-start-width: 4px;
  border-radius: var(--r-m);
  background: var(--surface);
  font-size: var(--fs-s);
}
.insight > span { flex: 1 1 16rem; }
.insight-attention { border-inline-start-color: var(--amber-500); }
.insight-attention .icon { color: var(--amber-700); }
.insight-good { border-inline-start-color: var(--ok-700); }
.insight-good .icon { color: var(--ok-700); }
.insight-info { border-inline-start-color: var(--navy-700); }
.insight-info .icon { color: var(--navy-700); }
.insight-link { font-weight: 600; white-space: nowrap; }

/* نمودارِ روند: شکل‌ها در SVG کش می‌آیند، برچسب‌ها HTML‌اند تا همه‌جا یک اندازه بمانند. */
.trend-chart { margin: 0; }
.trend-plot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline-start: 4.75rem;
  padding-block: 0.5rem 0;
}
.trend-plot svg { display: block; inline-size: 100%; block-size: 13.5rem; overflow: visible; }
.trend-axis { position: absolute; inset-block: 0.5rem 1.75rem; inset-inline-start: 0; inline-size: 4.25rem; }
.trend-axis span {
  position: absolute;
  inset-inline-start: 0;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trend-labels { display: flex; margin-block-start: 0.375rem; }
.trend-labels span { flex: 1 1 0; min-inline-size: 0; overflow: hidden; color: var(--ink-2); font-size: var(--fs-xs); text-align: center; white-space: nowrap; }
.trend-labels span.is-hidden { visibility: hidden; }
@media (max-width: 40rem) {
  .trend-labels.is-dense span:nth-child(even) { visibility: hidden; }
  .trend-plot { padding-inline-start: 4rem; }
  .trend-plot svg { block-size: 11rem; }
}
.trend-grid { stroke: var(--line); stroke-width: 1; }
.trend-bar { fill: var(--cyan-400); }
.trend-bar:hover { fill: var(--cyan-500); }
.trend-line { fill: none; stroke: var(--navy-700); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-line-2 { stroke: var(--amber-500); stroke-dasharray: 6 4; stroke-width: 2; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-block-start: 0.5rem; color: var(--ink-2); font-size: var(--fs-xs); }
.trend-key { display: inline-flex; align-items: center; gap: 0.375rem; }
.trend-key::before { content: ""; display: inline-block; inline-size: 0.875rem; block-size: 0.625rem; border-radius: 2px; }
.trend-key-bar::before { background: var(--cyan-400); }
.trend-key-line::before { block-size: 3px; background: var(--navy-700); }
.trend-key-line-2::before { block-size: 3px; background: var(--amber-500); }

/* رتبه‌بندیِ افقی */
.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; font-variant-numeric: tabular-nums; 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); }

/* نوارِ سهم‌ها */
.share-track { display: flex; block-size: 0.875rem; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.share-part { block-size: 100%; }
.share-part + .share-part { border-inline-start: 2px solid var(--surface); }
.share-legend { display: grid; gap: 0.375rem; margin: 0.75rem 0 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.share-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; }
.share-legend strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.share-legend small { min-inline-size: 2.5rem; color: var(--ink-3); text-align: end; }
.share-swatch { inline-size: 0.75rem; block-size: 0.75rem; border-radius: 3px; }
.share-0 { background: var(--navy-700); }
.share-1 { background: var(--cyan-400); }
.share-2 { background: var(--cyan-300); }
.share-3 { background: var(--amber-500); }
.share-4 { background: var(--navy-900); }
.share-5 { background: var(--ink-3); }
.share-ok { background: var(--ok-700); }
.share-warn { background: var(--amber-500); }
.share-late { background: var(--amber-700); }

/* مانده‌ها در نمای کلی */
.snapshot { display: grid; gap: 0.5rem; margin: 0; }
.snapshot div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.375rem; border-block-end: 1px solid var(--line); }
.snapshot div:last-child { border-block-end: 0; }
.snapshot dt { font-size: var(--fs-s); }
.snapshot dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.snapshot dd small { color: var(--ink-3); font-weight: 400; }

/* فهرستِ گزارش‌ها */
.report-catalog h2 { margin: 0 0 0.75rem; font-size: var(--fs-l); }
.report-catalog ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.catalog-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.625rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.catalog-card .icon { grid-row: span 2; color: var(--navy-700); }
.catalog-card span { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }
.catalog-card:hover { border-color: var(--navy-700); }
.catalog-card:focus-visible { outline: none; box-shadow: var(--ring); }

/* کارتِ پزشک */
.doctor-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); gap: 1rem; margin-block-end: 1rem; }
.doctor-card { padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.doctor-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-block-end: 0.75rem; }
.doctor-card h3 { margin: 0; font-size: var(--fs-l); }
.doctor-card .kpi { padding: 0.625rem 0.75rem; }
.doctor-facts { display: grid; gap: 0.375rem; margin: 0; font-size: var(--fs-s); }
.doctor-facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; }
.doctor-facts dt { color: var(--ink-3); }
.doctor-facts dd { margin: 0; }
.doctor-facts small { color: var(--ink-3); }
.fact-warn { color: var(--amber-700); font-weight: 600; }

/* حاشیه‌ی سودِ خدمت */
.margin-pill { display: inline-block; min-inline-size: 3.25rem; padding: 0 0.5rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.margin-pill.is-healthy { background: var(--ok-50); color: var(--ok-700); }
.margin-pill.is-thin { background: var(--amber-50); color: var(--amber-700); }
.margin-pill.is-loss { background: var(--amber-100); color: var(--amber-700); }

/* نقشه‌ی شلوغی */
.heatmap-wrap { overflow-x: auto; }
.heatmap { border-collapse: separate; border-spacing: 3px; font-size: var(--fs-xs); }
.heatmap th { padding: 0 0.25rem; color: var(--ink-3); font-weight: 400; white-space: nowrap; }
.heatmap tbody th { text-align: start; }
.heat-cell { min-inline-size: 2rem; block-size: 2rem; border-radius: var(--r-s); text-align: center; font-variant-numeric: tabular-nums; }
.heat-0 { background: var(--surface-2); }
.heat-1 { background: var(--cyan-50); color: var(--navy-900); }
.heat-2 { background: var(--cyan-100); color: var(--navy-900); }
.heat-3 { background: var(--cyan-300); color: var(--navy-950); }
.heat-4 { background: var(--cyan-500); color: #fff; font-weight: 700; }
.heat-cell.has-no-show { box-shadow: inset 0 0 0 2px var(--amber-500); }

@media (max-width: 56rem) {
  .report-head { flex-wrap: wrap; }
  .kpi-value { font-size: var(--fs-l); }
  .doctor-facts div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

@media print {
  .no-print, .report-nav, .report-period, .report-actions, .kpi-link { display: none !important; }
  .print-only { display: block; }
  .report-print-period { margin: 0 0 4mm; font-weight: 600; }
  .kpi, .report-panel, .doctor-card, .insight { break-inside: avoid; }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .report-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-catalog { display: none; }
}

/* ---------- مرکز تنظیمات ---------- */

/* فهرستِ بخش‌ها کنارِ محتوا و چسبان؛ روی صفحه‌ی باریک بالای محتوا و افقی. */
.settings {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.settings-side {
  position: sticky;
  inset-block-start: 1rem;
  display: grid;
  gap: 0.5rem;
  max-block-size: calc(100dvh - 2rem);
  overflow-y: auto;
  padding-inline-end: 0.25rem;
}

.settings-search input { min-block-size: 2.5rem; padding-inline: 2.5rem 0.75rem; font-size: var(--fs-s); }
.settings-search .icon { inset-inline-start: 0.75rem; }

.settings-group {
  margin: 0.875rem 0 0.25rem;
  padding-inline-start: 0.875rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* نشانِ صفحه‌خوانِ نقطه‌ها absolute است؛ بی زمینه‌ی positioned از فهرستِ اسکرول‌دار بیرون می‌زد و کلِ صفحه
   روی گوشی اسکرول افقی می‌گرفت. */
.settings-nav, .settings-link { position: relative; }

.settings-nav ul, .settings-results { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }

.settings-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.75rem;
  border-inline-start: 3px solid transparent;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: var(--fs-s);
  text-decoration: none;
}

.settings-link:hover { background: var(--surface-2); color: var(--ink); }
.settings-link:focus-visible { outline: none; box-shadow: var(--ring); }
.settings-link.is-active { border-inline-start-color: var(--cyan-500); background: var(--cyan-50); color: var(--navy-900); font-weight: 600; }
.settings-link .icon { flex: none; }

.settings-dot { flex: none; inline-size: 0.5rem; block-size: 0.5rem; margin-inline-start: auto; border-radius: 50%; }
.settings-dot.is-attention { background: var(--amber-500); }
.settings-dot.is-dirty { background: var(--navy-700); box-shadow: 0 0 0 3px var(--cyan-100); }

.settings-result {
  display: grid;
  gap: 0.125rem;
  inline-size: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-s);
  text-align: start;
  cursor: pointer;
}

.settings-result small { color: var(--ink-3); font-size: var(--fs-xs); }
.settings-result:hover, .settings-result:focus-visible { outline: none; border-color: var(--navy-700); background: var(--cyan-50); }
.settings-noresult { padding-inline: 0.75rem; font-size: var(--fs-s); }

.settings-body { display: grid; gap: 1.25rem; min-inline-size: 0; }
.settings-head h2 { margin: 0; font-size: var(--fs-xl); color: var(--navy-900); }
.settings-head p { margin: 0.25rem 0 0; color: var(--ink-3); font-size: var(--fs-s); }

/* جستجو کاربر را روی خودِ کنترل می‌نشاند؛ ردیفش روشن می‌شود تا چشم پیدایش کند. */
.toggle-row:has(input:focus) { background: linear-gradient(to left, var(--cyan-50), transparent); }

/* نوار ذخیره‌ی هر بخش: تا تغییری هست، پایینِ صفحه می‌چسبد تا فراموش نشود. */
.save-bar { display: grid; gap: 0.75rem; }
.save-bar.is-dirty {
  position: sticky;
  inset-block-end: 0.75rem;
  z-index: 3;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: 0 8px 24px -12px rgb(var(--shadow-hue) / 0.35);
}
.save-bar .banner { margin: 0; }
.dirty-note { color: var(--amber-700); font-size: var(--fs-s); font-weight: 600; }
.leave-warning { justify-content: space-between; }

/* آمادگی مرکز: عدد بزرگ، نوارِ یک‌خانه‌برای‌هر‌بند، و فهرستی که کارِ مانده را اول می‌آورد. */
.readiness {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}

.readiness-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.readiness-score { display: flex; align-items: baseline; gap: 0.625rem; margin: 0; font-weight: 400; }
.readiness-number { color: var(--navy-900); font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.readiness-of { color: var(--ink-2); font-size: var(--fs-m); }
.readiness-note { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }

.readiness-bar { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.readiness-cell { flex: 1; block-size: 0.625rem; border-radius: 3px; background: var(--line); }
.readiness-cell.is-ok { background: var(--cyan-500); }
.readiness-cell.is-attention { background: var(--amber-500); }
.readiness-cell.is-info { background: var(--line-strong); }

.readiness-group { margin: 0.5rem 0 0; color: var(--ink-2); font-size: var(--fs-s); }
.readiness-list { display: grid; margin: 0; padding: 0; list-style: none; }

.readiness-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--line);
}

.readiness-item:last-child { border-block-end: 0; }
.readiness-item > .icon { margin-block-start: 0.25rem; }
.readiness-item.is-attention > .icon { color: var(--amber-700); }
.readiness-item.is-info > .icon { color: var(--navy-700); }
.readiness-item.is-ok > .icon { color: var(--ok-700); }
.readiness-text { display: grid; gap: 0.125rem; }
.readiness-text span { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.8; }
.readiness-tag { margin-inline-start: 0.375rem; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.readiness-done summary { color: var(--ink-2); font-size: var(--fs-s); cursor: pointer; }

.change-list { display: grid; margin: 0; padding: 0; list-style: none; }
.change-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-s);
}
.change-list li:last-child { border-block-end: 0; }

/* درگاه پیامک و متن پیامک */
.sms-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.625rem; margin: 0 0 0.75rem; }
.sms-facts div { padding: 0.625rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.sms-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.sms-facts dd { margin: 0.125rem 0 0; font-size: var(--fs-l); font-weight: 600; font-variant-numeric: tabular-nums; }
.sms-facts dd small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.sms-facts dd.is-warn { color: var(--amber-700); }

.sms-template { display: grid; gap: 0.5rem; margin-block-start: 1rem; }
.sms-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

.token {
  padding: 0.0625rem 0.625rem;
  border: 1px dashed var(--navy-700);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--navy-900);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.token:hover { background: var(--cyan-50); }
.token:focus-visible { outline: none; box-shadow: var(--ring); }

/* پیش‌نمایش به شکلِ حبابِ پیامکِ دریافتی — همان چیزی که بیمار می‌بیند. */
.sms-bubble {
  max-inline-size: 26rem;
  padding: 0.75rem 1rem;
  border-radius: 1.125rem;
  border-end-start-radius: 0.25rem;
  background: var(--cyan-50);
  color: var(--ink);
}
.sms-bubble p { margin: 0; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.sms-meter { display: block; margin-block-start: 0.375rem; color: var(--ink-3); font-size: var(--fs-xs); }

/* ردیف‌ها و ابزارهای کوچک */
.panel-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.select-small, .input-inline {
  min-block-size: 2rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-s);
}
.input-inline { inline-size: 100%; max-inline-size: 16rem; }
.select-small:focus, .input-inline:focus { outline: none; border-color: var(--navy-700); box-shadow: var(--ring); }

.inline-add { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin-block-start: 1rem; }
.inline-add .field { flex: 1 1 14rem; max-inline-size: 22rem; }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
.branch-picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

.official-list { display: grid; gap: 0.375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.official-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }

.pref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 0.875rem;
  border-block-end: 1px solid var(--line);
}
.pref-row:last-of-type { border-block-end: 0; }
.pref-row > div:first-child { flex: 1 1 18rem; }
.pref-row strong { display: block; font-weight: 600; }
.pref-row small { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.8; }
.pref-row .segment span { display: inline-flex; align-items: center; gap: 0.3rem; }

.link-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; color: var(--ink-3); font-size: var(--fs-s); list-style: none; }
.link-list a { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; }

/* پاورقیِ برگه‌های بیمار: یک تا سه سطر، وسط، زیرِ امضاها. */
.doc-footer {
  margin-block-start: 4mm;
  padding-block-start: 2mm;
  border-block-start: 1px solid #999;
  color: #333;
  font-size: 8.5pt;
  line-height: 1.8;
  text-align: center;
  white-space: pre-line;
}

.letterhead-preview .doc-footer {
  margin: 0;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: #fff;
  color: #333;
}

@media (max-width: 68rem) {
  .settings { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .settings-side { position: static; max-block-size: none; overflow: visible; padding: 0; }

  /* فهرستِ بخش‌ها افقی می‌شود و خودش (نه صفحه) اسکرول می‌خورد. */
  .settings-nav { display: flex; gap: 0.375rem; overflow-x: auto; padding-block-end: 0.375rem; scrollbar-width: thin; }
  .settings-nav .settings-group { display: none; }
  .settings-nav ul { display: flex; gap: 0.375rem; }
  .settings-link { border: 1px solid var(--line); border-radius: var(--r-pill); white-space: nowrap; }
  .settings-link.is-active { border-color: var(--cyan-500); }
}

@media (max-width: 40rem) {
  .readiness { padding: 1rem; }
  .readiness-number { font-size: 2.25rem; }
  .readiness-item { grid-template-columns: auto minmax(0, 1fr); }
  .readiness-item > .btn { grid-column: 2; justify-self: start; }
  .change-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .change-list li time { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  .settings-link, .settings-result, .token { transition: background-color 120ms ease, border-color 120ms ease; }
}

/* =====================================================================
   درمانگاه — روزِ پذیرش: جست‌وجوی بیمار، ساعت‌های خالی، ستونی و هفته،
   پایانِ روز، درخواست‌ها، صفِ تأیید و حالتِ یونیت
   ===================================================================== */

/* ---------- انتخابِ بیمار ---------- */

.patient-picker { display: grid; gap: 0.25rem; }
.picker-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; color: var(--ink-2); font-size: var(--fs-s); }
.picker-results button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--navy-700); }
.picker-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0.25rem 0 0; }

/* ---------- ساعت‌های خالی ---------- */

.free-slots { display: grid; gap: 0.375rem; }
.free-slots:empty { display: none; }
.free-slots .hint { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.free-slots-head { margin: 0; font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.free-slots-head .muted { font-weight: 400; }

.free-slots-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.free-slots-part { min-inline-size: 4.5rem; color: var(--ink-3); font-size: var(--fs-xs); }

.slot-chip {
  min-inline-size: 3.5rem;
  min-block-size: 2rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}

.slot-chip:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.slot-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.slot-chip.is-chosen { border-color: var(--navy-800); background: var(--navy-800); color: #fff; }

/* ---------- برنامه‌ی ستونی: جای خالی، بیرون از ساعت، اکنون ---------- */

.day-offhours {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--at) * var(--minute));
  block-size: calc(var(--len) * var(--minute));
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px);
  pointer-events: none;
}

.col-free {
  position: absolute;
  inset-inline: 0.25rem;
  inset-block-start: calc(var(--at) * var(--minute) + 1px);
  block-size: calc(var(--len) * var(--minute) - 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px dashed transparent;
  border-radius: var(--r-s);
  background: transparent;
  color: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.col-free:hover,
.col-free:focus-visible { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-800); }
.col-free:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* لمسی: hover نیست، پس جای خالی همیشه کم‌رنگ پیداست. */
@media (hover: none) {
  .col-free { border-color: var(--line); color: var(--ink-3); }
}

.col-now {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--at) * var(--minute));
  z-index: 2;
  border-block-start: 2px solid var(--cyan-500);
  pointer-events: none;
}

.empty-inline p { margin: 0; }

/* ---------- نمای هفته ---------- */

.week-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
  gap: 0.5rem;
  overflow-x: auto;
  padding-block-end: 0.5rem;
}

.week-day {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  min-inline-size: 0;
  padding: 0.375rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}

.week-day.is-today { border-color: var(--cyan-500); box-shadow: inset 0 3px 0 var(--cyan-500); }
.week-day.is-selected { border-color: var(--navy-700); }
.week-day.is-closed { background: var(--surface-2); }

.week-day-head {
  display: grid;
  gap: 0.125rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.week-day-head:hover { background: var(--cyan-50); }
.week-day-head:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.week-day-head span { font-size: var(--fs-xs); color: var(--ink-2); }
.week-day-count { font-weight: 600; color: var(--navy-800) !important; }
.week-day-tag { justify-self: start; }

.week-day-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }

.week-item a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.375rem;
  padding: 0.25rem 0.375rem;
  border-inline-start: 3px solid var(--navy-700);
  border-radius: var(--r-s);
  background: var(--cyan-50);
  color: var(--ink);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.week-item a:hover { background: var(--surface-2); }
.week-item small { grid-column: 2; }
.week-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-item.status-checkedin a { border-inline-start-color: var(--amber-500); background: var(--amber-50); }
.week-item.status-inchair a { border-inline-start-color: var(--ok-700); background: var(--ok-50); }
.week-item.status-completed a { border-inline-start-color: var(--line-strong); background: var(--surface-2); color: var(--ink-2); }
.week-item.status-cancelled a,
.week-item.status-noshow a { border-inline-start-style: dashed; background: transparent; color: var(--ink-3); text-decoration: line-through; }

/* ---------- پایانِ روز ---------- */

.close-verdict { display: grid; gap: 0.375rem; }
.close-verdict p { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.close-todo { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; font-weight: 400; }
.close-todo a {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--amber-100);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--amber-700);
  text-decoration: none;
}
.close-todo a:hover { border-color: var(--amber-500); }
.close-actions { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-inline-start: auto; }
.close-card:target, .close-card.is-revealed { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- درخواست‌های نوبت ---------- */

.quick-replies { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.quick-replies .btn { white-space: normal; text-align: start; }

/* ---------- صفِ تأیید ---------- */

.confirm-day { margin-block-end: 1rem; }
.confirm-list { list-style: none; margin: 0; padding: 0; display: grid; }

.confirm-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 0.5rem 0.75rem;
  padding-block: 0.625rem;
  border-block-end: 1px solid var(--line);
}

.confirm-row:last-child { border-block-end: 0; }
.confirm-row.is-selected { background: var(--cyan-50); }
.confirm-pick { padding-block-start: 0.25rem; }
.confirm-pick input { inline-size: 1.125rem; block-size: 1.125rem; }
.confirm-main { display: grid; gap: 0.125rem; }
.confirm-what, .confirm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; margin: 0; }
.confirm-meta { font-size: var(--fs-s); }
.confirm-price { font-weight: 600; white-space: nowrap; }

@media (max-width: 40rem) {
  .confirm-row { grid-template-columns: auto minmax(0, 1fr); }
  .confirm-price, .confirm-row > .btn { grid-column: 2; justify-self: start; }
}

/* ---------- حالتِ یونیت ---------- */

.chair-fresh { font-size: var(--fs-s); }
.chair-note { display: flex; align-items: center; gap: 0.375rem; margin: 0; }
.chair-finished { display: grid; gap: 0.5rem; }
.chair-finished summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-s); padding-block: 0.25rem; }
.chair-finished[open] { gap: 0.5rem; }

/* دکمه‌ای که فقط در صفحه‌ی باریک معنا دارد (فرمِ نوبت زیرِ برنامه است، نه کنارش). مرز همان جایی است
   که قابِ برنامه — با نوار کناری — به ۵۶rem می‌رسد و فرم کنارِ برنامه می‌نشیند. */
@media (min-width: 75rem) {
  .only-narrow { display: none !important; }
}

/* هفته روی گوشی: هفت ستونِ افقی فقط با اسکرول دیده می‌شد؛ روزها زیرِ هم، سرِ هر روز کنارِ فهرستش. */
@container appt (max-width: 44rem) {
  .week-board { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .week-day { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: start; }
  .week-day-head { grid-row: span 2; }
  .week-day-tag, .week-day-list { grid-column: 2; }
  .week-day:not(:has(.week-day-list)) { grid-template-columns: minmax(0, 1fr); }
  .week-day:not(:has(.week-day-list)) .week-day-head { grid-template-columns: auto auto 1fr; align-items: baseline; gap: 0.5rem; }
  .week-day:not(:has(.week-day-list)) .week-day-count { justify-self: end; }
}

.list-more { display: flex; justify-content: center; margin-block: 1rem 0.5rem; }

/* ---------- پرونده: پرش به بخش‌ها و حذفِ کنارِ ردیف ---------- */

.file-jump { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block: 0 1rem; }

.chip-link {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}

.chip-link:hover { border-color: var(--navy-700); color: var(--navy-800); background: var(--cyan-50); }
.chip-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.void-row > td { padding: 0.5rem 0 1rem; background: var(--surface-2); }
.care-void { list-style: none; margin-block: 0.5rem; }
.panel.is-revealed, section.is-revealed { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- طرح درمان: سربرگ و پرسش‌ها ---------- */

.plan-header-fields { margin-block: 0.75rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.plan-header-fields summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.plan-header-fields[open] summary { margin-block-end: 0.75rem; }
.void-row[data-cancel-item-confirm] td { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; }
/* =====================================================================
   سرصفحه‌ی همه‌ی صفحه‌ها — همان سطحِ تیره‌ی پیشخوان و بیماران
   هر صفحه‌ی پنل (page-head)، سرِ پرونده‌ی بیمار (file-head)، حالتِ یونیت (chair-head) و سرِ صفحه‌های
   پورتالِ بیمار یک سطح دارند: گرادیانِ سرمه‌ای با دو هاله‌ی فیروزه‌ای، بافتِ نقطه‌ای و یک دندانِ کم‌رنگ
   در گوشه. متن سفید، دکمه‌ها شیشه‌ای، و کنشِ اصلی فیروزه‌ای — تنها رنگِ پُرِ روی نوار. پیشخوان و
   بیماران چیدمانِ خودشان را دارند و سطح را از همین‌جا می‌گیرند.

   overflow عمداً hidden نیست: تقویمِ «پایان روز» و منوهای بازشو داخلِ همین نوارند و بریده می‌شدند.
   بافت و دندان با border-radius: inherit داخلِ لبه‌ها می‌مانند.
   ===================================================================== */

.page-head, .file-head, .chair-head, .portal-hello, .portal-page-head {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: calc(var(--r-l) + 4px);
  background:
    radial-gradient(110% 130% at 100% 0%, rgb(10 175 196 / 0.28) 0%, transparent 52%),
    radial-gradient(80% 120% at 0% 100%, rgb(47 207 226 / 0.14) 0%, transparent 58%),
    linear-gradient(140deg, var(--fill-strong) 0%, var(--fill-deep) 100%);
  color: #fff;
  box-shadow: 0 1.25rem 2.75rem -1rem rgb(var(--shadow-hue) / 0.45);
}

/* بافتِ نقطه‌ای، رو به پایین محو — «سطح» است نه «رنگ». */
:is(.page-head, .file-head, .chair-head, .portal-hello, .portal-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;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
  pointer-events: none;
}

/* دندانِ کم‌رنگ در گوشه‌ی انتهایی — امضای برنامه روی هر صفحه، آن‌قدر کم‌رنگ که خوانده نشود. */
.page-head::after {
  content: "";
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.75rem;
  z-index: -1;
  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 24 24' fill='none' stroke='white' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M8 3.5c-2.6 0-4.5 2-4.5 5 0 2.6 1 4.2 1.8 6.6.8 2.4 1.2 5.4 2.9 5.4 1.6 0 1.8-3.6 2.6-5.2.5-.9 1.9-.9 2.4 0 .8 1.6 1 5.2 2.6 5.2 1.7 0 2.1-3 2.9-5.4.8-2.4 1.8-4 1.8-6.6 0-3-1.9-5-4.5-5-1.7 0-2.6.9-4 .9s-2.3-.9-4-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

/* پیشخوان و بیماران محتوای پُری در آن گوشه دارند؛ دندان آن‌جا فقط شلوغی است. */
.page-head.pulse::after, .page-head.people-hero::after { display: none; }

.page-head { padding: 1.375rem 1.625rem; }

/* متن روی سطحِ تیره */
:is(.page-head, .file-head, .chair-head, .portal-hello, .portal-page-head) :is(h1, h2) { color: #fff; }
.page-head h1, .file-head h1 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); line-height: 1.35; }
.page-head .eyebrow { color: #9FC3EA; }
.page-head :is(.lead, .report-lead, .muted, .hint) { color: #CFE0F3; }
.page-head .lead { margin-block: 0.375rem 0; }
.page-head .back { color: #A9C2E4; }
.page-head .back:hover { color: #fff; }
.page-head .help-crumbs a { color: #CFE0F3; }
.page-head .help-crumbs a:hover { color: #fff; }
.page-head a:not(.btn, .back) { color: #fff; }

/* دکمه‌ها: شیشه‌ای؛ کنشِ اصلی فیروزه‌ای با متنِ سرمه‌ایِ تیره. */
:is(.page-head, .file-head, .chair-head, .portal-page-head) .btn {
  border-radius: var(--r-pill);
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}

:is(.page-head, .file-head, .chair-head, .portal-page-head) .btn:hover { border-color: rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.16); color: #fff; }
:is(.page-head, .file-head, .chair-head, .portal-page-head) .btn-ghost { border-color: transparent; background: transparent; color: #CFE0F3; }
:is(.page-head, .file-head, .chair-head, .portal-page-head) .btn-ghost:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
:is(.page-head, .file-head, .chair-head, .portal-page-head) .btn-primary { border-color: transparent; background: #2FCFE2; color: #06213F; font-weight: 700; }
:is(.page-head, .file-head, .chair-head, .portal-page-head) .btn-primary:hover { background: #7FE3EE; color: #06213F; }
:is(.page-head, .file-head, .chair-head, .portal-page-head) .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(47 207 226 / 0.55); }
:is(.page-head, .file-head, .chair-head, .portal-page-head) .btn:disabled { opacity: 0.5; }

/* فیلدِ داخلِ نوار (تقویمِ «پایان روز»، پزشکِ «حالت یونیت») سفید می‌ماند تا خوانا باشد. */
:is(.page-head, .chair-head) :is(select, input:not([type="checkbox"], [type="radio"])) {
  border-color: transparent;
  background-color: var(--surface);
  color: var(--ink);
}

/* تقویمِ فیلدِ داخلِ نوار (پایانِ روز) کنارِ لبه‌ی انتهاییِ صفحه است؛ از همان لبه باز شود تا بیرون نزند. */
.page-head .jdate-pop { inset-inline-start: auto; inset-inline-end: 0; }

/* «بیمار: …» در سرِ برنامه‌ی روز */
.page-head .file-chip {
  padding-block: 0.125rem;
  padding-inline: 0.75rem 0.125rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08);
}

/* سرِ پرونده‌ی بیمار: برچسبِ شماره‌ی پرونده شیشه‌ای می‌شود، چون سرمه‌ایِ پُر روی سرمه‌ای گم می‌شد. */
.file-head { padding: 1.125rem 1.375rem; }
.file-head .file-tab { border: 1px solid rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.1); }
.file-head .file-tab-label { color: #7FE3EE; }
.file-head .facts dt { color: #9FC3EA; }
.file-head .facts dd { color: #fff; }

.chair-head { padding: 1rem 1.25rem; }
.chair-head .muted { color: #CFE0F3; }

/* پورتالِ بیمار: همان سطح، جمع‌وجورتر — صفحه‌ی گوشی است. */
.portal-hello { padding: 1.25rem 1.375rem; }
.portal-hello .portal-hello-time { color: #9FC3EA; }
.portal-page-head { margin-block-end: 1rem; padding: 0.875rem 1.125rem; }
.portal-page-head h1 { font-size: var(--fs-xl); }

html[data-density="compact"] .page-head { padding: 1rem 1.25rem; }

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

/* روی کاغذ: بی رنگ، فقط یک خطِ زیر — نوارِ تیره جوهرِ چاپگر را می‌خورد. */
@media print {
  .page-head, .file-head, .chair-head, .portal-hello, .portal-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;
  }

  :is(.page-head, .file-head, .chair-head, .portal-hello, .portal-page-head)::before,
  .page-head::after { display: none !important; }

  :is(.page-head, .file-head, .chair-head, .portal-hello, .portal-page-head) * { color: #000 !important; }
}


/* =====================================================================
   پیشخوان — بازطراحی: «صفحه‌ی فرمانِ روز»
   یک جای پرجسارت (نوارِ بالا با حلقه‌ی روز)، بقیه آرام و منظم. رنگِ هر بخش از یک توکنِ
   --accent می‌آید تا کارت، نمودار و نشانِ همان بخش یک رنگ بگویند. قرمز فقط برای هشدارِ پزشکی.
   ===================================================================== */

/* ---------- نوارِ بالا ---------- */

.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;
  /* سطح (گرادیان، بافت، سایه) از «سرصفحه‌ی همه‌ی صفحه‌ها» می‌آید. */
}

.pulse-main { grid-area: main; display: grid; gap: 0.5rem; min-inline-size: 0; }
.pulse .eyebrow { margin: 0; color: #9FC3EA; font-size: var(--fs-s); }
.pulse h1 { margin: 0; color: #fff; 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: #CFE0F3; }

.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: #E3EEF9; font-size: var(--fs-m); }

.pulse-search { margin-block-start: 0.25rem; }
.pulse-search .search-field { max-inline-size: 34rem; }
.pulse-search .search-field input {
  border-color: transparent;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgb(0 0 0 / 0.45);
}

.pulse-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-items: start;
  gap: 0.5rem 0.75rem;
  margin-block-start: 0.25rem;
}

.pulse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.pulse .pulse-btn { text-decoration: none; }
.pulse-btn:hover { background: rgb(255 255 255 / 0.16); }
.pulse-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* دکمه‌ی اصلی: فیروزه‌ای با متنِ سرمه‌ایِ تیره — تنها رنگِ پُرِ روی نوار. */
.pulse-btn-primary { border-color: transparent; background: #2FCFE2; color: #06213F; }
.pulse-btn-primary:hover { background: #7FE3EE; }
.pulse .pulse-action-more { color: #9FC3EA; font-size: var(--fs-s); }

/* ---------- حلقه‌ی روز ---------- */

.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-arc { transition: stroke-dasharray 0.6s ease, stroke-dashoffset 0.6s ease; }

.arc-done { stroke: #5EDDA0; background: #5EDDA0; }
.arc-chair { stroke: #2FCFE2; background: #2FCFE2; }
.arc-waiting { stroke: #F5B544; background: #F5B544; }
.arc-booked { stroke: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.55); }
.arc-noshow { stroke: #8FA0B8; background: #8FA0B8; }

.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: #A9C8EA; font-size: var(--fs-s); }

.pulse .pulse-progress-note { margin: 0; color: #CFE0F3; 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: #CFE0F3;
  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 .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);
  border-block-start: 0;
}

.pulse-now-title { margin: 0; color: #9FC3EA; font-size: var(--fs-xs); font-weight: 700; }

.pulse .pulse-line { gap: 0.4rem; color: #E8F1FB; line-height: 1.8; }
.pulse .pulse-line .icon { color: #7FE3EE; flex: none; }

/* کسی که روی یونیت است، روشن‌ترین سطرِ نوار. */
.pulse .pulse-line-live {
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-m);
  background: rgb(47 207 226 / 0.14);
  font-size: var(--fs-m);
}

.pulse-wait {
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.1);
  font-size: var(--fs-xs);
}

.pulse-wait.wait-long, .pulse-wait.wait-bad { background: rgb(245 181 68 / 0.22); color: #FFD89A; }
.pulse-wait.wait-bad { font-weight: 700; }

@media (max-width: 72rem) {
  .pulse {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main ring" "now now";
  }

  .pulse .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 .pulse-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .day-ring svg { animation: none; }
  .day-ring-arc { transition: none; }
}

/* ---------- کارهای امروز ---------- */

.today-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1rem 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 0.15s ease, box-shadow 0.15s ease;
}

.today-action:hover { border-color: var(--accent); box-shadow: 0 0.375rem 1rem -0.5rem rgb(var(--shadow-hue) / 0.35); }
.today-action:focus-visible { outline: none; box-shadow: var(--ring); }

.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[data-action-item="waiting"] { --accent: var(--amber-700); }
.today-action[data-action-item="requests"] { --accent: var(--cyan-500); }
.today-action[data-action-item="queue"] { --accent: var(--navy-700); }
.today-action[data-action-item="noshow"] { --accent: var(--amber-700); border-color: var(--line); background: var(--surface); }
.today-action[data-action-item="noshow"] strong { color: var(--amber-700); }
.today-action[data-action-item="unrecorded"] { --accent: var(--amber-700); }
.today-action[data-action-item="tomorrow"] { --accent: var(--ok-700); }

.today-actions.is-clear { margin-block: 0.875rem 0; }

.today-actions-clear {
  padding: 0.375rem 0.875rem;
  border-radius: var(--r-pill);
  background: var(--ok-50);
}

/* ---------- میان‌بُرها: نوارِ فشرده ---------- */

.quick-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1rem;
  grid-template-columns: none;
}

.quick-tile {
  display: inline-flex;
  flex-direction: row;
  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);
  text-align: start;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.quick-tile:hover { 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 {
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border-radius: 50%;
}

.quick-tile-label { font-size: var(--fs-s); }

.quick-tile-kbd {
  position: static;
  margin-inline-start: 0.125rem;
}

/* روی گوشی یک ردیفِ لغزان، نه چهار ردیفِ کاشی که نیمِ صفحه را می‌گرفت. */
@media (max-width: 40rem) {
  .quick-tiles {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: 0.25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }

  .quick-tile { flex: none; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-tile, .today-action { transition: none; }
  .quick-tile:hover { transform: none; }
}

/* ---------- ردیفِ شاخص‌ها ---------- */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin-block: 0.5rem 1.25rem;
}

.kpi-tile {
  --accent: var(--navy-700);
  display: grid;
  align-content: start;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
  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 0.15s ease, box-shadow 0.2s ease, transform 0.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));
}

.kpi-tile:hover {
  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:focus-visible { outline: none; box-shadow: var(--ring); }

.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-warn { color: var(--amber-700); font-weight: 600; }
.kpi-tile .delta { justify-self: start; margin: 0.125rem 0 0; padding: 0 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); }
.kpi-tile .delta-up { background: var(--ok-50); }
.kpi-tile .delta-down { background: var(--amber-50); }
.kpi-tile-note { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink-2); font-size: var(--fs-xs); }

.kpi-appointments { --accent: var(--cyan-500); }
.kpi-money { --accent: var(--ok-700); }
.kpi-week { --accent: var(--navy-700); }
.kpi-waiting { --accent: var(--navy-700); }
.kpi-waiting.wait-long, .kpi-waiting.wait-bad { --accent: var(--amber-500); }
.kpi-waiting.wait-long .kpi-tile-value, .kpi-waiting.wait-bad .kpi-tile-value { color: var(--amber-700); }

/* دایره‌های منتظرانِ کارتِ «اتاق انتظار»: رنگ = مدتِ انتظار. قرمز فقط برای هشدارِ پزشکی است، پس
   انتظارِ طولانی کهربایی می‌شود و طولانی‌ترش کهربایی‌ِ پُر. */
.queue-dots { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-block-start: 0.625rem; }

.queue-dot {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: var(--cyan-50, var(--surface-2));
  color: var(--navy-900);
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cyan-500) 55%, transparent);
}

.queue-dot.wait-long { background: var(--amber-50); box-shadow: inset 0 0 0 2px var(--amber-500); color: var(--amber-700); }
.queue-dot.wait-bad { background: var(--amber-500); box-shadow: none; color: #fff; }
.queue-dot.queue-more { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }

/* ---------- نمودارهای کوچک ---------- */

.sparkline {
  inline-size: 100%;
  block-size: 2.75rem;
  margin-block-start: 0.5rem;
  overflow: visible;
}

.sparkline-line { fill: none; stroke: var(--accent, var(--navy-700)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sparkline-area { fill: color-mix(in srgb, var(--accent, var(--navy-700)) 14%, transparent); }
.sparkline-dot { fill: var(--accent, var(--navy-700)); stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.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);
  transition: block-size 0.5s ease;
}

.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; }
.mini-bars .is-highlight small { color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .kpi-tile { transition: none; }
  .kpi-tile:hover { transform: none; }
  .mini-bar { transition: none; }
}

/* ---------- ویجت‌ها: پوسته‌ی تازه ---------- */

.home-grid { gap: 1.125rem; }

.home-grid .widget > .panel {
  border-color: var(--line);
  border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.home-grid .widget:hover > .panel { box-shadow: 0 0.75rem 1.75rem -1.25rem rgb(var(--shadow-hue) / 0.45); }

.widget { --accent: var(--navy-700); }
.widget[data-widget-slot="today"] { --accent: var(--cyan-500); }
.widget[data-widget-slot="waiting"] { --accent: var(--amber-500); }
.widget[data-widget-slot="money"] { --accent: var(--ok-700); }
.widget[data-widget-slot="reminders"] { --accent: var(--cyan-500); }
.widget[data-widget-slot="nextVisits"] { --accent: var(--amber-500); }
.widget[data-widget-slot="nextPatient"] { --accent: var(--cyan-500); }
.widget[data-widget-slot="dues"] { --accent: var(--ok-700); }
.widget[data-widget-slot="inventory"] { --accent: var(--amber-500); }

.home-grid .widget-title { font-size: var(--fs-l); }

.home-grid .widget-title-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .home-grid .widget > .panel { transition: none; }
}

/* ---------- امروز در یک نگاه: ردیفِ هر پزشک ---------- */

.day-lanes { display: grid; gap: 0.5rem; }

.day-lane {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.day-lane-who { display: grid; min-inline-size: 0; line-height: 1.5; }
.day-lane-who strong { overflow: hidden; font-size: var(--fs-s); text-overflow: ellipsis; white-space: nowrap; }
.day-lane-who small { color: var(--ink-3); font-size: var(--fs-xs); }

.day-lane .day-strip {
  block-size: 2.5rem;
  border-color: transparent;
  border-radius: var(--r-m);
  background:
    repeating-linear-gradient(to left, transparent 0 calc(100% / 12 - 1px), var(--line) calc(100% / 12 - 1px) calc(100% / 12)),
    var(--surface-2);
}

.day-lane .day-slot {
  inset-block: 5px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.day-lane .day-slot:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.day-lane .day-slot:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--navy-900); }
.day-lane .day-slot.is-open { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--navy-900); }

.day-slot-name {
  display: block;
  overflow: hidden;
  padding-inline: 0.375rem;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: calc(2.5rem - 10px);
  text-align: start;
  text-overflow: clip;
  white-space: nowrap;
}

.day-lane .slot-checkedin { background: var(--amber-500); }
.day-lane .slot-inchair { background: var(--cyan-500); }
.day-lane .slot-scheduled { background: var(--fill); opacity: 0.55; }
.day-lane .slot-noshow { background: var(--line-strong); }
.day-lane .slot-noshow .day-slot-name { color: var(--ink-2); text-decoration: line-through; }

.day-lane .day-now { inline-size: 2px; background: var(--cyan-500); }
.day-lane .day-now::before { background: var(--cyan-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan-500) 30%, transparent); }

.day-panel .day-scale {
  position: relative;
  display: block;
  block-size: 1.25rem;
  margin-inline-start: calc(9.5rem + 0.75rem);
}

.day-panel .day-scale span { position: absolute; inset-block-start: 0.125rem; translate: 50% 0; }
.day-panel .day-scale span:first-child { translate: 0 0; }
.day-panel .day-scale span:last-child { translate: 100% 0; }

.day-legend .slot-checkedin { background: var(--amber-500); }
.day-legend .slot-noshow { background: var(--line-strong); }

@media (max-width: 40rem) {
  .day-lane { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .day-lane-who { display: flex; align-items: baseline; gap: 0.5rem; }
  .day-panel .day-scale { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .day-lane .day-slot { transition: none; }
}

/* روی گوشی کارت‌های شاخص دوتادو: چهار کارتِ تمام‌عرض زیرِ هم یک صفحه‌ی کامل را می‌گرفت. */
@media (max-width: 40rem) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); 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); }
  .kpi-tile .delta { font-size: 0.6875rem; }
  .mini-bars { block-size: 2.75rem; gap: 0.2rem; }
}

/* روزِ بی‌نوبت: حلقه‌ی خط‌چینِ آرام با نشانِ دندان، نه «۰ از ۰». */
.day-ring.is-empty .day-ring-track { stroke-dasharray: 3 5; stroke: rgb(255 255 255 / 0.28); }
.day-ring-idle { display: grid; justify-items: center; gap: 0.25rem; color: #CFE0F3; font-size: var(--fs-s); }
.day-ring-idle .icon { color: #7FE3EE; }

/* چهار کارت کنارِ هم وقتی جا هست؛ در عرضِ متوسط دوتادو — نه «سه‌تا و یکی تنها». */
.kpi-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

@media (max-width: 52rem) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* پیشرفتِ هر پزشک در کارتِ «پزشکان امروز». */
.doctor-progress {
  display: block;
  flex-basis: 100%;
  block-size: 0.3125rem;
  margin-block-start: 0.375rem;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--line);
}

.doctor-progress > span { display: block; block-size: 100%; border-radius: var(--r-pill); background: var(--accent, var(--navy-700)); }
.doctor-now { display: inline-flex; flex-basis: 100%; align-items: center; gap: 0.375rem; color: var(--ink-2); font-size: var(--fs-s); }
.doctor-now a { color: var(--navy-900); font-weight: 600; }

/* سهمِ هر روشِ پرداخت در «پول امروز» — یک نوارِ نازک زیرِ هر ردیف. */
.money-methods li { flex-wrap: wrap; }
.money-share { flex-basis: 100%; block-size: 0.25rem; overflow: hidden; border-radius: var(--r-pill); background: var(--surface-2); }
.money-share > span { display: block; block-size: 100%; background: var(--ok-700); opacity: 0.75; }

/* ---------- ورودِ کارکنان — بازطراحی ---------- */

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

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

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

.login-brand { display: flex; align-items: center; gap: 0.625rem; color: var(--navy-900); font-size: var(--fs-l); font-weight: 700; }
.login-brand .brand-mark { background: linear-gradient(140deg, var(--fill-strong), var(--fill-deep)); color: var(--cyan-400); box-shadow: 0 0.5rem 1.25rem -0.5rem rgb(var(--shadow-hue) / 0.5); }

.login-form { gap: 1.125rem; }
.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); line-height: 1.35; }
.login-intro p { margin: 0; line-height: 1.9; }
.login-eyebrow { color: var(--cyan-500); font-size: var(--fs-s); font-weight: 600; }

/* ورودی با آیکونِ شروع و جای خالیِ پایان (تیک یا دکمه‌ی نمایش رمز). ورودی‌های LTR (موبایل و رمز)
   فاصله‌ی دوطرفه‌ی برابر دارند تا هم آیکونِ راست و هم دکمه‌ی چپ جا شوند، فارغ از جهتِ خودِ ورودی. */
.login-input { position: relative; }

.login-form .login-input input {
  min-block-size: 3.125rem;
  padding-inline: 2.875rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
  font-size: 1.0625rem;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.login-form .login-input input:hover { border-color: color-mix(in srgb, var(--navy-700) 40%, var(--line-strong)); }
.login-form .login-input input:focus { background: var(--surface); }

.login-input-icon, .login-input-ok {
  position: absolute;
  inset-block: 0;
  display: grid;
  place-items: center;
  inline-size: 2.875rem;
  pointer-events: none;
}

.login-input-icon { inset-inline-start: 0; color: var(--ink-3); }
.login-input:focus-within .login-input-icon { color: var(--navy-700); }
.login-input-ok { inset-inline-end: 0; color: var(--ok-700); }
.login-input .password-toggle { inset-inline-end: 0.25rem; }

.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);
}

/* «مرا به خاطر بسپار» به شکلِ کلید. خودِ checkbox دیده نمی‌شود ولی فوکوس‌پذیر و خواندنی می‌ماند. */
.login-remember {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  cursor: pointer;
}

.login-remember:has(.login-switch-input:checked) { border-color: color-mix(in srgb, var(--navy-700) 45%, var(--line)); background: var(--cyan-50); }

.login-switch-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }

.login-switch {
  position: relative;
  flex: none;
  inline-size: 2.5rem;
  block-size: 1.4rem;
  margin-block-start: 0.125rem;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color 0.2s ease;
}

.login-switch::after {
  content: "";
  position: absolute;
  inset-block-start: 0.2rem;
  inset-inline-start: 0.2rem;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  transition: inset-inline-start 0.2s ease;
}

.login-switch-input:checked + .login-switch { background: var(--fill); }
.login-switch-input:checked + .login-switch::after { inset-inline-start: calc(100% - 1.2rem); }
.login-switch-input:focus-visible + .login-switch { box-shadow: var(--ring); }

.login-remember-text { display: grid; gap: 0.125rem; font-weight: 500; }
.login-remember-text small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; line-height: 1.7; }

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  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);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}

.login-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 1rem 1.75rem -0.75rem rgb(var(--shadow-hue) / 0.65); }
.login-submit:disabled { cursor: progress; opacity: 0.85; }

.login-spinner {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-block-start-color: #fff;
  border-radius: 50%;
  animation: login-spin 0.8s linear infinite;
}

@keyframes login-spin { to { rotate: 360deg; } }

.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 .hint { margin: 0; font-size: var(--fs-s); line-height: 1.9; }
.login-help strong { display: block; color: var(--ink); 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); }

/* مرحله‌ی «کدام مرکز؟» */
.login-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  justify-self: start;
  margin-block-end: 0.25rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--navy-700);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}

.login-back:hover { background: var(--cyan-50); }
.login-back:focus-visible { outline: none; box-shadow: var(--ring); }

.tenant-card { position: relative; gap: 0.875rem; min-block-size: 3.75rem; padding: 0.625rem 0.875rem; border-color: var(--line); transition: border-color 0.15s ease, background-color 0.15s ease; }
.tenant-card:hover { border-color: color-mix(in srgb, var(--navy-700) 45%, var(--line)); }
.tenant-card input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.tenant-card:has(input:focus-visible) { box-shadow: var(--ring); }

.tenant-avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--r-m);
  background: linear-gradient(140deg, var(--fill-strong), var(--fill-deep));
  color: #fff;
  font-weight: 700;
}

.tenant-name { display: grid; flex: 1; gap: 0.125rem; font-weight: 600; }
.tenant-name small { color: var(--cyan-500); font-size: var(--fs-xs); font-weight: 500; }

.tenant-check {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: transparent;
}

.tenant-card:has(input:checked) .tenant-check { border-color: var(--fill); background: var(--fill); color: var(--fill-ink); }

/* نیمه‌ی تیره */
.login-art {
  grid-area: art;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.5rem);
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(10 175 196 / 0.32) 0%, transparent 55%),
    radial-gradient(70% 60% at 0% 100%, rgb(47 207 226 / 0.18) 0%, transparent 60%),
    linear-gradient(150deg, var(--fill-strong) 0%, var(--fill-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-head { display: grid; gap: 0.625rem; max-inline-size: 30rem; }
.login-art-head h2 { margin: 0; color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.35; }
.login-art-head p { margin: 0; color: #BFD3EC; line-height: 1.9; }

.login-art-stage { position: relative; display: grid; place-items: center; min-block-size: 18rem; color: var(--cyan-400); }
.login-art-stage .arch { inline-size: min(72%, 24rem); block-size: auto; filter: drop-shadow(0 0 1.5rem rgb(47 207 226 / 0.25)); }

.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.09);
  color: #fff;
  box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.5);
  backdrop-filter: blur(10px);
}

.login-float > span:last-child { display: grid; line-height: 1.5; }
.login-float strong { font-size: var(--fs-m); }
.login-float small { color: #BFD3EC; font-size: var(--fs-xs); }

.login-float-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--r-m); background: rgb(47 207 226 / 0.2); color: #7FE3EE; }
.login-float-icon.is-ok { background: rgb(94 221 160 / 0.2); color: #5EDDA0; }

.login-float-a { inset-block-start: 8%; inset-inline-start: 2%; }
.login-float-b { inset-block-end: 10%; inset-inline-end: 0; }
.login-float-c { inset-block-start: 42%; 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: #5EDDA0; stroke-linecap: round; }

.login-art-points { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; color: #D6E4F5; }
.login-art-points li { display: flex; align-items: center; gap: 0.625rem; }
.login-art-points svg { color: var(--cyan-400); }

@media (prefers-reduced-motion: no-preference) {
  .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 0.5s ease-out both; }
}

@keyframes login-float { 50% { translate: 0 -8px; } }
@keyframes login-in { from { opacity: 0; translate: 0 8px; } }

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

/* تبلت: نیمه‌ی تیره باریک‌تر و بی کارتِ سوم. */
@media (max-width: 72rem) {
  .login { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .login-float-c { display: none; }
}

/* گوشی: نیمه‌ی تیره نوارِ بالای فرم می‌شود — فقط تیتر؛ چارت و کارت‌ها جا ندارند. */
@media (max-width: 52rem) {
  .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 { display: none; }
  .login-art-head h2 { font-size: 1.375rem; }
  .login-art-head p { font-size: var(--fs-s); }
  .login-panel { position: relative; z-index: 1; align-content: start; margin-block-start: -1.5rem; padding-block-start: 0; }
  .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-art-head.is-pending, .login-art-points.is-pending { visibility: hidden; }

.login-art-clinic {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-self: start;
  margin: 0 0 0.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.08);
  color: #D6E4F5;
  font-size: var(--fs-s);
  font-weight: 600;
}

.login-art-clinic svg { color: var(--cyan-400); }

/* پیش‌نمایشِ تنظیمات: همان نیمه، فقط متن‌ها، در یک کارت. */
.login-art.is-compact {
  grid-area: auto;   /* «art» فقط در شبکه‌ی صفحه‌ی ورود معنا دارد؛ این‌جا ستونِ ضمنی می‌ساخت */
  grid-template-rows: auto auto;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: var(--r-l);
  box-shadow: 0 1rem 2.25rem -1.25rem rgb(var(--shadow-hue) / 0.55);
}

.login-art.is-compact .login-art-head h2 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); }
.login-art.is-compact .login-art-head p { font-size: var(--fs-s); }

/* نوارِ گوشیِ صفحه‌ی ورود ویژگی‌ها را پنهان می‌کند؛ پیش‌نمایش باید همه را نشان دهد. */
.login-art.is-compact .login-art-points { display: grid; }

/* پیش‌نمایشِ متنِ صفحه‌ی ورود هنگامِ پایین رفتن در فرم جلوی چشم می‌ماند. */
@media (min-width: 56.01rem) {
  .login-page-preview { position: sticky; inset-block-start: 1rem; }
}

/* ---------- بیماران — بازطراحی ---------- */

/* سرِ صفحه همان سطحِ تیره‌ی پیشخوان و ورود است. سه ناحیه: عنوان و جمله، جست‌وجو (پهن‌ترین چیزِ صفحه —
   اولین کار این‌جاست)، کاشی‌های برش، و کنش‌ها در پایین با کنشِ اصلی در لبه‌ی انتهایی. */
.page-head.people-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
  grid-template-areas:
    "main    scopes"
    "search  scopes"
    "actions actions";
  align-items: start;
  gap: 1rem 2rem;
  padding: 1.625rem 1.875rem 1.25rem;
  /* سطح (گرادیان، بافت، سایه) از «سرصفحه‌ی همه‌ی صفحه‌ها» می‌آید. */
}

.page-head.people-hero > :first-child { margin-inline-end: 0; }

.people-hero-main { grid-area: main; display: grid; gap: 0.375rem; min-inline-size: 0; }
.people-hero .eyebrow { margin: 0; color: #9FC3EA; }
.people-hero h1 { margin: 0; color: #fff; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.3; }
.people-sentence { margin: 0; color: #CFE0F3; line-height: 1.9; }

.people-search { grid-area: search; margin: 0; }
.people-search form { margin: 0; }

.people-search .search-field input {
  border-color: transparent;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 0 0.75rem 1.75rem -1rem rgb(0 0 0 / 0.45);
}

.people-search .search-field input:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgb(47 207 226 / 0.45); }
.people-search .search-hint { color: #A9C2E4; }

/* کاشی‌های برش: هم عدد، هم دکمه. کاشیِ روشن همان برشی است که فهرست نشان می‌دهد. */
.people-scopes { grid-area: scopes; display: grid; gap: 0.5rem; align-self: stretch; align-content: start; }

.people-scope {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-l);
  background: rgb(255 255 255 / 0.07);
  color: #E4EEF9;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.people-scope:hover { background: rgb(255 255 255 / 0.13); }
.people-scope:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(47 207 226 / 0.55); }

.people-scope-icon {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-m);
  background: rgb(47 207 226 / 0.18);
  color: #7FE3EE;
}

.people-scope-label { font-size: var(--fs-s); font-weight: 600; }
.people-scope strong { color: #fff; font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }

.people-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); }
.people-scope.is-active strong { color: var(--navy-900); }
.people-scope.is-active .people-scope-icon { background: var(--cyan-50); color: var(--navy-700); }
.people-scope.scope-today .people-scope-icon { background: rgb(94 221 160 / 0.18); color: #5EDDA0; }
.people-scope.scope-today.is-active .people-scope-icon { background: var(--ok-50); color: var(--ok-700); }

/* کنش‌ها زیرِ خطی نازک؛ رنگِ دکمه‌ها از «سرصفحه‌ی همه‌ی صفحه‌ها» می‌آید. */
.people-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); }

@media (max-width: 60rem) {
  .page-head.people-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "search" "scopes" "actions";
    padding: 1.25rem 1.125rem 1rem;
  }

  .people-scopes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people-scope { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0.25rem; padding: 0.625rem 0.75rem; }
  .people-scope-icon { display: none; }
  .people-scope strong { font-size: var(--fs-l); }
}

@media (max-width: 30rem) {
  .people-hero .page-actions { justify-content: stretch; }
  .people-hero .page-actions .btn-primary { flex: 1 1 100%; justify-content: center; }
}

/* کارت: بیمارِ امروز نوارِ فیروزه‌ای بالای کارت را دارد؛ هشدارِ پزشکی همچنان لبه‌ی قرمز. */
.patient-card { overflow: hidden; border-radius: calc(var(--r-l) + 2px); transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s; }
.patient-card:hover { transform: translateY(-2px); box-shadow: 0 0.875rem 2rem -1rem rgb(var(--shadow-hue) / 0.4); }

.patient-card.has-today::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: linear-gradient(to left, var(--cyan-500), color-mix(in srgb, var(--cyan-500) 25%, transparent));
}

.patient-card .avatar { inline-size: 2.75rem; block-size: 2.75rem; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); }

.pc-new, .people-table .pc-new {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  background: var(--cyan-50);
  color: var(--navy-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.7;
}

/* جدول: سرِ ستون چسبان، ردیفِ امروز با ته‌رنگِ فیروزه‌ای، کنش‌ها کنارِ ردیف. */
.people-table-wrap { border-radius: var(--r-l); box-shadow: 0 1px 2px rgb(var(--shadow-hue) / 0.05); }
.people-table thead th { position: sticky; inset-block-start: 0; z-index: 1; }
.people-table tbody tr { transition: background-color 0.12s ease; }
.people-table tbody tr:hover { background: var(--surface-2); }
.people-table tbody tr.is-today { background: color-mix(in srgb, var(--cyan-50) 70%, transparent); }
.people-table tbody tr.is-today td:first-child { box-shadow: inset -3px 0 0 var(--cyan-500); }
.people-table .row-link { font-weight: 600; }

.people-today {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  background: var(--cyan-100);
  color: var(--navy-900);
  font-size: var(--fs-s);
  font-weight: 700;
}

.people-actions-col { inline-size: 1%; white-space: nowrap; }
.people-row-actions { display: inline-flex; gap: 0.25rem; opacity: 0.35; transition: opacity 0.15s ease; }
.people-table tr:hover .people-row-actions, .people-row-actions:focus-within { opacity: 1; }

@media (hover: none) {
  .people-row-actions { opacity: 1; }
}

/* حالتِ خالی: یک جمله که می‌گوید چرا خالی است و قدمِ بعد چیست. */
.people-empty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
  padding: 2rem 1.25rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  text-align: center;
}

.people-empty p { margin: 0; max-inline-size: 34rem; line-height: 1.9; }

.people-empty-icon {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: 0.25rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-700);
}

.people-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-start: 0.5rem; }

/* پنجره‌ی لینکِ ثبت‌نام */
.reg-link-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.75rem; }
.reg-link-head h2 { margin: 0; }
.reg-link-head .panel-sub { margin: 0.125rem 0 0; }

.reg-link-mark {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--r-m);
  background: linear-gradient(140deg, var(--fill-strong), var(--fill-deep));
  color: var(--cyan-400);
}

.reg-link-result {
  display: grid;
  gap: 0.5rem;
  margin-block: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--ok-700) 30%, var(--line));
  border-radius: var(--r-m);
  background: var(--ok-50);
}

.reg-link-result.is-simulated { border-color: color-mix(in srgb, var(--amber-500) 40%, var(--line)); background: var(--amber-50); }
.reg-link-result-title { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0; color: var(--ink); line-height: 1.8; }
.reg-link-result-title .icon { flex: none; margin-block-start: 0.3em; color: var(--ok-700); }
.reg-link-result.is-simulated .reg-link-result-title .icon { color: var(--amber-700); }

.reg-link-copy { display: flex; gap: 0.5rem; }

.reg-link-copy input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 2.375rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink-2);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs-s);
}

.reg-link-actions { margin-block-start: 0.5rem; }
.reg-link-list li { gap: 0.75rem; }
.reg-link-who small { font-size: var(--fs-xs); }

/* ---------- فهرستِ بیماران — ردیف‌ها ----------
   هر بیمار یک ردیفِ کارت‌مانند: جلو دایره‌ی نام (یا در «امروز» ساعت و وضعیتِ نوبت)، بعد هویت و نشان‌ها، بعد
   «آخرین مراجعه / نوبت»، و ته کنش‌ها. کلِ ردیف لینکِ پرونده است (پوششِ ::after روی لینکِ نام) و کنش‌ها بالای
   پوشش می‌نشینند. لبه‌ی شروعِ ردیف رنگ می‌گیرد: قرمز فقط برای هشدارِ پزشکی، فیروزه‌ای برای بیمارِ امروز. */

.people-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-block: 1.75rem 1rem;
}

.people-list-title { display: grid; gap: 0.125rem; min-inline-size: 0; }
.people-list-title h2 { margin: 0; color: var(--navy-900); font-size: var(--fs-xl); line-height: 1.4; }
.people-list-title .result-count { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }

.people-list { display: grid; gap: 1.5rem; }
.people-group { display: grid; gap: 0.625rem; }

/* عنوانِ گروه هنگامِ پایین رفتن بالا می‌ماند تا معلوم باشد در کدام روز یا نیمه‌ی روزید. */
.people-group-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  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;
}

.people-group-head::after { content: ""; flex: 1; block-size: 1px; background: var(--line); }

.people-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;
}

.people-items { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.people-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 16rem) 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 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.people-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);
}

.people-item:has(.people-link:focus-visible) { border-color: var(--navy-700); box-shadow: var(--ring); }

/* لبه‌ی شروع: قرمزِ هشدار بر فیروزه‌ایِ امروز مقدم است. */
.people-item::before {
  content: "";
  position: absolute;
  inset-block: 0.75rem;
  inset-inline-start: -1px;
  inline-size: 3px;
  border-radius: var(--r-pill);
  background: transparent;
}

.people-item.has-today::before { background: var(--cyan-500); }
.people-item.has-medical-alert::before { background: var(--alert-600); }

.people-item .avatar { inline-size: 2.75rem; block-size: 2.75rem; font-size: var(--fs-s); }

/* ساعتِ نوبت در برشِ «امروز» جای دایره‌ی نام را می‌گیرد؛ رنگش وضعیت است. */
.people-time {
  display: grid;
  justify-items: center;
  align-content: center;
  min-inline-size: 4.25rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--navy-900);
  line-height: 1.3;
}

.people-time strong { font-size: var(--fs-l); font-weight: 700; }
.people-time small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.people-time.status-checkedin { background: var(--amber-50); }
.people-time.status-checkedin small { color: var(--amber-700); }
.people-time.status-inchair { background: var(--cyan-50); }
.people-time.status-inchair small { color: var(--navy-700); }
.people-time.status-completed { background: var(--ok-50); }
.people-time.status-completed small { color: var(--ok-700); }
.people-time.status-noshow { opacity: 0.7; }

.people-id { display: grid; gap: 0.125rem; min-inline-size: 0; }
.people-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; }

.people-link {
  color: var(--ink);
  font-size: var(--fs-m);
  font-weight: 700;
  text-decoration: none;
}

.people-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.people-link:focus-visible { outline: none; }
.people-item:hover .people-link { color: var(--navy-700); }

.people-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.8;
}

.people-badge.is-medical { background: var(--alert-50); color: var(--alert-700); }
.people-badge.is-new { background: var(--cyan-50); color: var(--navy-700); }
.people-badge.is-group { background: var(--surface-2); color: var(--ink-2); font-weight: 600; }

.people-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);
}

.people-meta .file-no { min-inline-size: 0; font-size: var(--fs-xs); }

.people-note {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.25rem 0 0;
  color: var(--amber-700);
  font-size: var(--fs-xs);
}

.people-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* دو ستونِ کوچک: کی آمد، کی می‌آید. */
.people-visits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.people-visits > div { display: grid; align-content: start; gap: 0.125rem; min-inline-size: 0; }
.people-visits dt { color: var(--ink-3); font-size: var(--fs-xs); }
.people-visits dd { display: grid; justify-items: start; margin: 0; font-size: var(--fs-s); line-height: 1.6; }
.people-visits dd strong { color: var(--ink); font-weight: 600; }
.people-visits dd small { color: var(--ink-3); font-size: var(--fs-xs); }
.people-none { color: var(--ink-3); }

/* «امروز ۱۰:۳۰ — در انتظار»: رنگِ وضعیتِ همان نوبت. */
.people-visits .people-today { display: inline-grid; justify-items: start; gap: 0; padding: 0.125rem 0.625rem; border-radius: var(--r-m); line-height: 1.6; }
.people-today small { font-size: var(--fs-xs); font-weight: 600; }
.people-today.status-checkedin { background: var(--amber-100); color: var(--amber-700); }
.people-today.status-completed { background: var(--ok-50); color: var(--ok-700); }
.people-today.status-noshow { background: var(--surface-2); color: var(--ink-3); }

.people-item .people-row-actions { position: relative; z-index: 1; align-items: center; opacity: 1; }
.people-item .people-row-actions .icon-btn { inline-size: 2.25rem; block-size: 2.25rem; border-color: var(--line); border-radius: 50%; }
.people-item .people-row-actions .icon-btn:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.people-go { display: inline-grid; place-items: center; inline-size: 1.5rem; color: var(--ink-3); transition: color 0.15s ease, translate 0.15s ease; }
.people-item:hover .people-go { color: var(--navy-700); translate: calc(var(--dir, -1) * 2px) 0; }

/* بخشِ پیداشده در جست‌وجو */
mark.hit { padding-inline: 1px; border-radius: 3px; background: var(--cyan-100); color: var(--navy-900); }

/* پایینِ فهرست */
.people-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-block: 1.5rem 0.5rem;
}

.people-progress { display: grid; gap: 0.375rem; justify-items: center; margin: 0; color: var(--ink-3); font-size: var(--fs-s); }

.people-progress-bar {
  display: block;
  inline-size: 12rem;
  block-size: 4px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--line);
}

.people-progress-bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--cyan-500); }
.people-more-btn { min-inline-size: 14rem; justify-content: center; border-radius: var(--r-pill); }
.people-more .list-pager { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }

@media (max-width: 64rem) {
  .people-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .people-visits { grid-column: 2 / -1; grid-row: 2; }
}

/* گوشی: هویت بالا، زیرش «آخرین مراجعه / نوبت» و کنش‌ها کنارشان — ردیفِ جدا برای دو دکمه کارت را بی‌دلیل بلند می‌کرد. */
@media (max-width: 40rem) {
  .people-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.625rem 0.75rem; padding: 0.75rem 0.875rem; }
  .people-id { grid-column: 2 / -1; }
  .people-visits { grid-column: 1 / 3; grid-row: 2; }
  .people-item .people-row-actions { grid-column: 3; grid-row: 2; align-self: end; }
  .people-go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .people-item, .people-item:hover { transform: none; }
}

@media print {
  .people-item { break-inside: avoid; box-shadow: none; }
  .people-row-actions, .people-more, .view-switch { display: none !important; }
}

/* ==========================================================================
   پیامک‌ها — «پیامک‌های امروز» روی پیشخوان، «پیام سریع» در پرونده، و متن‌ها
   ========================================================================== */

/* ---------- پیشخوان: پیامک‌های امروز ---------- */
.sms-gateway-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-m);
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: var(--fs-s);
  line-height: 1.8;
}
.sms-gateway-note .icon { flex: none; margin-block-start: 0.3rem; }

.sms-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.sms-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.sms-stats dt { color: var(--ink-3); font-size: var(--fs-xs); }
.sms-stats dd { margin: 0; color: var(--navy-900); font-size: var(--fs-l); font-weight: 600; font-variant-numeric: tabular-nums; }
.sms-stats > div[data-stat="ready"] { border-color: var(--cyan-300); background: var(--cyan-50); }
.sms-stats > div.is-warn { border-color: var(--amber-100); background: var(--amber-50); }
.sms-stats > div.is-warn dd { color: var(--amber-700); }

.sms-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sms-group { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.sms-group.is-open { border-color: var(--line-strong); }
.sms-group-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; }
.sms-group-pick { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-inline-size: 0; cursor: pointer; }
.sms-group-pick input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--navy-700); }
.sms-group-icon {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-800);
  flex: none;
}
.sms-group-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-group-count { color: var(--ink-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sms-group-blocked {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.5rem;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: var(--fs-xs);
}
.sms-group-hint { margin: 0; padding: 0 0.75rem 0.25rem; color: var(--ink-3); font-size: var(--fs-xs); }

.sms-items { list-style: none; margin: 0; padding: 0 0.75rem 0.5rem; }
.sms-items > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.375rem 0;
  border-block-start: 1px dashed var(--line);
}
.sms-item-pick { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.sms-item-pick input { accent-color: var(--navy-700); }
.sms-item-who { font-weight: 500; }
.sms-item-meta { color: var(--ink-3); font-size: var(--fs-xs); }
.sms-item-body {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  border-end-start-radius: 0.25rem;
  background: var(--cyan-50);
  font-size: var(--fs-s);
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy-700);
  font: inherit;
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  margin-inline-start: auto;
}
.link-btn:hover { color: var(--navy-900); }
.link-btn:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-s); }

.sms-blocked { margin: 0 0.75rem 0.625rem; padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--amber-50); }
.sms-blocked p { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.25rem; color: var(--amber-700); font-size: var(--fs-s); }
.sms-blocked ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--fs-s); }
.sms-blocked li { display: flex; gap: 0.375rem; align-items: baseline; }

.sms-send-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-block-start: 1rem;
  padding-block-start: 0.875rem;
  border-block-start: 1px solid var(--line);
}
.sms-progress { inline-size: min(14rem, 100%); block-size: 0.5rem; accent-color: var(--cyan-500); }
.sms-result { color: var(--ok-700); font-size: var(--fs-s); }

/* ---------- پرونده: پیام سریع ---------- */
.msg-panel h2 { display: flex; align-items: center; gap: 0.5rem; }
.msg-section-title { margin: 1.25rem 0 0.625rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }

.msg-suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 0.75rem;
}
.msg-suggestion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--cyan-300);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--cyan-50), var(--surface) 70%);
}
.msg-suggestion-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.msg-suggestion-head .muted { font-size: var(--fs-xs); }
.msg-kind-icon {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy-800);
  box-shadow: 0 0 0 1px var(--cyan-100);
}
.msg-suggestion-body {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-s);
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-suggestion-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: auto; }

.msg-composer {
  margin-block-start: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-2);
}
.msg-choices { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block-end: 0.875rem; }
.msg-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: 2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}
.msg-choice:hover:not(:disabled) { border-color: var(--navy-700); color: var(--navy-900); background: var(--cyan-50); }
.msg-choice.is-active { border-color: var(--navy-700); background: var(--navy-800); color: var(--fill-ink); }
.msg-choice:disabled { opacity: 0.5; cursor: not-allowed; }
.msg-choice:focus-visible { outline: none; box-shadow: var(--ring); }
.msg-choice-sent {
  display: inline-grid;
  place-items: center;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  background: var(--ok-50);
  color: var(--ok-700);
}
.msg-composer textarea { line-height: 1.9; }
.msg-leads { margin: 0.5rem 0 0; padding: 0; border: 0; }
.msg-leads legend { margin-block-end: 0.5rem; color: var(--ink-2); font-size: var(--fs-s); }
.msg-leads .segmented { flex-wrap: wrap; }
.msg-leads .segment.is-disabled { opacity: 0.45; }
.msg-leads .segment.is-disabled input { cursor: not-allowed; }

.msg-recent { list-style: none; margin: 0; padding: 0; }
.msg-recent > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.625rem 0;
  border-block-end: 1px solid var(--line);
}
.msg-recent > li:last-child { border-block-end: 0; }
.msg-recent-kind { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; }
.msg-recent-when { color: var(--ink-3); font-size: var(--fs-xs); margin-inline-start: auto; }
.msg-recent-cancel { margin-inline-start: auto; }
.sms-today .panel-link, .msg-panel .panel-link { white-space: nowrap; }
.msg-recent-body { flex-basis: 100%; margin: 0; color: var(--ink-2); font-size: var(--fs-s); line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-recent > li[data-message-status="Cancelled"] .msg-recent-body { text-decoration: line-through; color: var(--ink-3); }

/* ---------- متن‌ها: پیام‌های هوشمند ---------- */
.purpose-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.75rem; }
.purpose-card { padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.purpose-card.is-off { background: var(--surface-2); }
.purpose-card.is-off .purpose-body { color: var(--ink-3); }
.purpose-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.purpose-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-800);
}
.purpose-what { flex: 1; min-inline-size: 0; }
.purpose-what h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--fs-m); }
.purpose-body {
  margin: 0.625rem 0 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 1rem;
  border-end-start-radius: 0.25rem;
  background: var(--cyan-50);
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.toggle-inline { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-s); cursor: pointer; white-space: nowrap; }
.toggle-inline input[role="switch"] { margin: 0; }
.confirm-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: var(--fs-s); }

@media (max-width: 40rem) {
  .sms-group-head { flex-wrap: wrap; }
  .sms-send-bar { justify-content: stretch; }
  .sms-send-bar .btn { flex: 1; justify-content: center; }
  .purpose-head { flex-wrap: wrap; }
}

@media print {
  .msg-panel, [data-widget-sms] { display: none !important; }
}

/* ==========================================================================
   درمان در یک نگاه — بالای تبِ درمان (معاینه، طرح، ثبت)
   ========================================================================== */
.treat-glance {
  margin-block: 0 1rem;
  padding: 0.875rem 1rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.treat-glance-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem 1rem;
  margin-block-end: 0.625rem;
}
.treat-glance-head h2 { margin: 0; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.treat-glance-cats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.treat-glance-cats li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.0625rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--cyan-50);
  color: var(--navy-800);
  font-size: var(--fs-xs);
}
.treat-glance-cats .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.treat-glance-cells { margin-block-end: 0.75rem; }
.glance-sub { margin-inline-start: 0.375rem; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; }

/* معاینه‌ی کهنه (بیش از شش ماه) کاری را یادآوری می‌کند، پس رنگ می‌گیرد — همان کهربایی «بدهی». */
.glance-cell.is-stale { border-color: var(--amber-100); background: var(--amber-50); }
.glance-cell.is-stale .glance-note { color: var(--amber-700); }

.treat-progress {
  display: block;
  block-size: 0.375rem;
  margin-block-start: 0.375rem;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.treat-progress > span { display: block; block-size: 100%; border-radius: inherit; background: var(--cyan-500); }

@media print {
  .treat-glance { display: none !important; }
}

/* ==========================================================================
   طرح درمان — کارتِ پزشک، سطرِ جمع‌شده‌ی طرح، جستجو، و کارِ یک‌جا
   ========================================================================== */

/* ---------- کارتِ انتخابِ پزشک ---------- */
.dcard { margin-block-end: 0.75rem; }
.dcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); gap: 0.5rem; }
.dcard-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.dcard-card input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dcard-card:hover { border-color: var(--navy-700); }
.dcard-card:has(input:checked) { border-color: var(--navy-700); background: var(--cyan-50); box-shadow: inset 0 0 0 1px var(--navy-700); }
.dcard-card:has(input:focus-visible) { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.dcard-card:has(input:disabled) { cursor: default; }
.dcard-card:has(input:disabled:not(:checked)) { opacity: 0.55; }
.dcard-avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--fill-ink);
  font-size: var(--fs-m);
  font-weight: 700;
}
.dcard-card:has(input:checked) .dcard-avatar { background: var(--cyan-500); }
.dcard-text { display: grid; gap: 0.0625rem; min-inline-size: 0; }
.dcard-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.dcard-text small { color: var(--ink-3); font-size: var(--fs-xs); }
.dcard-badge {
  justify-self: start;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  background: var(--amber-50);
  color: var(--amber-700);
  font-size: var(--fs-xs);
}
.dcard-check {
  display: none;
  margin-inline-start: auto;
  place-items: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--fill-ink);
}
.dcard-card:has(input:checked) .dcard-check { display: grid; }

/* ---------- فهرستِ طرح‌ها ---------- */
.plan-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-end: 0.875rem; }
.plan-tools .segmented { flex-wrap: wrap; }
.plan-search {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1 14rem;
  padding-inline: 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink-3);
}
.plan-search:focus-within { border-color: var(--navy-700); box-shadow: var(--ring); }
.plan-search input { flex: 1; min-inline-size: 0; min-block-size: 2.25rem; border: 0; background: none; font: inherit; color: var(--ink); }
.plan-search input:focus { outline: none; }

.plan-card.is-folded { padding-block: 0.25rem; }
.plan-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  inline-size: 100%;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.plan-row:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; border-radius: var(--r-s); }
.plan-row-main { display: grid; gap: 0.125rem; flex: 1 1 16rem; min-inline-size: 0; }
.plan-row-title { color: var(--navy-900); font-size: var(--fs-m); font-weight: 600; }
.plan-row-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; color: var(--ink-3); font-size: var(--fs-xs); }
.plan-row-meta > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.plan-row-progress { display: inline-flex; align-items: center; gap: 0.375rem; inline-size: 7.5rem; }
.plan-row-progress .treat-progress { flex: 1; margin: 0; }
.plan-row-progress small { color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.plan-card.is-open .plan-row { margin-block-end: 0.5rem; padding-block-end: 0.75rem; border-block-end: 1px solid var(--line); }
.plan-body { display: grid; gap: 0.75rem; }

/* ---------- ثبت و نوبت‌دهیِ یک‌جا ---------- */
.batch-panel { display: grid; gap: 0.75rem; }
.batch-panel h3 { margin: 0; }
.batch-panel .hint { margin: 0; }
.batch-items, .batch-visits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.batch-items > li, .batch-visits > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.batch-items > li .check { flex: 1 1 14rem; margin: 0; }
.batch-items > li.is-done { background: var(--ok-50); border-color: transparent; }
.batch-items > li.is-refused { border-color: var(--amber-100); background: var(--amber-50); }
.batch-error { flex-basis: 100%; color: var(--amber-700); font-size: var(--fs-s); }
.batch-visits { counter-reset: visit; }
.batch-visits > li { counter-increment: visit; }
.batch-visits > li::before {
  content: counter(visit, persian);
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-800);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.batch-visit-what { flex: 1 1 12rem; }
.batch-visit-when { color: var(--navy-900); font-weight: 600; }

@media print {
  .plan-tools, .batch-panel { display: none !important; }
}

/* ==========================================================================
   تصاویر و مدارک — نوع‌های دسته‌بندی‌شده، فیلترِ نوع، فایلِ بی‌پیش‌نمایش، پیشرفتِ بارگذاری
   ========================================================================== */
.doc-kinds { display: grid; gap: 0.625rem; }
.doc-kind-group { display: grid; gap: 0.375rem; }
.doc-kind-group-title { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }

.doc-kind-filter { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block-end: 0.875rem; }
.doc-kind-filter .chip-link.is-active { border-color: var(--navy-700); background: var(--navy-800); color: var(--fill-ink); }
.doc-kind-filter .chip-link .num { margin-inline-start: 0.25rem; opacity: 0.8; }

.doc-format { display: grid; justify-items: center; gap: 0.375rem; color: var(--navy-800); }
.doc-format small { color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; }

.doc-progress {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.375rem;
}
.doc-progress-track { flex: 1; block-size: 0.5rem; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.doc-progress-track > span { display: block; block-size: 100%; border-radius: inherit; background: var(--cyan-500); }
.doc-progress small { color: var(--ink-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   طرح درمان: سازنده، شماره‌ی طرح، رضایت‌نامه، پذیرش؛ تاریخچه‌ی خدمات؛ خدماتِ در انتظار
   ========================================================================== */

/* شماره‌ی طرح — همان که روی برگه‌ی رضایت‌نامه و در بایگانی است */
.pnum {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--navy-900);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan-card.is-closed .pnum { border-color: var(--line-strong); color: var(--ink-3); }

.panel-head-action { margin-inline-start: auto; }

/* ---------- سازنده‌ی طرح ---------- */
.pb {
  display: grid;
  gap: 0.875rem;
  margin-block: 0.25rem 1rem;
  padding: 1rem;
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--navy-700);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.pb-add { margin-block: 0.5rem 0; }
.pb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.pb-head h3 { margin: 0; color: var(--navy-900); font-size: var(--fs-l); }
.pb-count {
  padding: 0.125rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--cyan-50);
  color: var(--navy-800);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.pb-adder {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
}
.pb-adder-grid { margin: 0; }
.pb-adder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.pb-adder-actions .hint { margin: 0; }
.pb-lines { margin: 0; }
.pb-lines tfoot th { text-align: start; color: var(--ink-2); font-weight: 600; }
.pb-lines tfoot td { color: var(--navy-900); font-weight: 700; }
.pb-empty { margin: 0; padding: 0.75rem; border-radius: var(--r-m); background: var(--surface); }
.pb .form-actions { margin: 0; }

/* ---------- جدولِ خدماتِ طرح ---------- */
.plan-table td { vertical-align: middle; }
/* «۱ از ۳» و مبلغ در موبایل دو خط نشوند؛ جدول خودش در قابش اسکرول می‌خورد. */
.plan-table td.num, .plan-table td .pill { white-space: nowrap; }
.plan-table tr.is-dropped td { color: var(--ink-3); }
.plan-table tr.is-dropped td:first-child { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.plan-item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem; }
.plan-next { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--navy-900); font-size: var(--fs-s); white-space: nowrap; }
a.pill { text-decoration: none; }
a.pill:hover { filter: brightness(0.97); text-decoration: underline; }
.void-reason { flex: 1 1 14rem; min-block-size: 2.25rem; padding-inline: 0.625rem; border: 1px solid var(--line-strong); border-radius: var(--r-s); font: inherit; }

.plan-actions { flex-wrap: wrap; }

/* «بیشتر»: کارهای کم‌تکرار زیرِ یک دکمه، تا نوار دکمه‌ها شلوغ نشود */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu-list {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-end: 0;
  z-index: 20;
  display: grid;
  gap: 0.125rem;
  min-inline-size: 11rem;
  padding: 0.375rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(var(--shadow-hue) / 0.14);
}
.more-menu-list .btn { justify-content: flex-start; inline-size: 100%; }

/* ---------- رضایت‌نامه‌ی طرح ---------- */
.pcs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.pcs-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--surface); color: var(--navy-800); flex-shrink: 0; }
.pcs-text { display: grid; gap: 0.125rem; flex: 1 1 18rem; min-inline-size: 0; font-size: var(--fs-s); }
.pcs-text strong { color: var(--navy-900); font-size: var(--fs-m); }
.pcs-text > span { color: var(--ink-2); }
.pcs-text > .pcs-warn { color: var(--amber-700); font-weight: 600; }
.pcs-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pcs-ok { border-color: transparent; background: var(--ok-50); }
.pcs-ok .pcs-icon { background: var(--ok-700); color: #fff; }
.pcs-pending, .pcs-none, .pcs-partial { border-color: var(--amber-100); background: var(--amber-50); }
.pcs-pending .pcs-icon, .pcs-none .pcs-icon, .pcs-partial .pcs-icon { color: var(--amber-700); }
.pcs-off { color: var(--ink-3); }

/* تیکِ «رضایت دارد» کنارِ هر خدمت */
.pcs-tick {
  display: inline-grid;
  place-items: center;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-inline-start: 0.375rem;
  border-radius: 50%;
  background: var(--ok-700);
  color: #fff;
  vertical-align: middle;
}

.accept-panel { display: grid; gap: 0.75rem; }
.accept-panel h3, .accept-panel .hint, .accept-panel .form-actions { margin: 0; }
.accept-channels .choice-card small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }

.consent-paper { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; padding: 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.consent-paper .field { margin: 0; }

/* ---------- برگه‌ی چاپیِ رضایت‌نامه‌ی طرح ---------- */
.consent-archive {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4mm;
  margin-block: 3mm 1mm;
  padding: 2mm 4mm;
  border: 1.5px solid #000;
  border-radius: 2mm;
}
.consent-archive-label { font-weight: 600; }
.consent-archive-number { font-size: 20pt; font-weight: 800; line-height: 1.2; }
.consent-archive-file { margin-inline-start: auto; font-size: 9.5pt; }
.consent-services { inline-size: 100%; margin-block: 3mm; border-collapse: collapse; font-size: 9.5pt; }
.consent-services th, .consent-services td { padding: 1.2mm 2mm; border: 1px solid #000; text-align: start; }
.consent-services .col-money { text-align: end; }
.consent-services tfoot th { font-weight: 600; }
.consent-sheet-plan .consent-sign { grid-template-columns: 1fr 55mm 55mm; }
.consent-sheet-plan .consent-fingerprint { grid-column: 3; block-size: 24mm; }
.consent-sheet-plan .consent-body { margin-block: 3mm 6mm; }

/* ---------- صفحه‌ی امضا: فهرستِ خدماتِ طرح ---------- */
.public-plan {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.public-plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; margin: 0; }
.public-plan-head strong { color: var(--navy-900); }
.public-plan-head span { color: var(--ink-3); font-size: var(--fs-s); }
.public-plan-lines { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; }
.public-plan-lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
.public-plan-lines small { color: var(--ink-3); }
.public-plan-total { margin: 0; padding-block-start: 0.5rem; border-block-start: 1px solid var(--line); font-weight: 600; color: var(--navy-900); }

/* ---------- جستجوی سراسری: طرح با شماره ---------- */
.palette-plan { grid-template-columns: auto 1fr; }
.palette-plan > small { grid-column: 2; }

/* ---------- تاریخچه‌ی خدمات ---------- */
.svc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: 0.5rem; margin-block-end: 0.875rem; }
.svc-tile {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.svc-tile:hover { border-color: var(--navy-700); }
.svc-tile:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.svc-tile-count { color: var(--navy-900); font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; }
.svc-tile-label { font-size: var(--fs-s); }
.svc-tile.is-warn { border-color: var(--amber-100); background: var(--amber-50); }
.svc-tile.is-warn .svc-tile-count { color: var(--amber-700); }
.svc-tile.is-on { border-color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--navy-700); background: var(--cyan-50); }

.svc-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; margin-block-end: 0.875rem; }
.field-compact { display: grid; gap: 0.25rem; margin: 0; }
.field-compact label { color: var(--ink-3); font-size: var(--fs-xs); }
.field-compact select { min-block-size: 2.25rem; }
.svc-filters .check { margin: 0; align-self: center; }

.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.svc-row { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.svc-row.is-open { border-color: var(--line-strong); box-shadow: 0 2px 10px rgb(var(--shadow-hue) / 0.06); }
.svc-row.svc-pending, .svc-row.svc-inprogress { border-inline-start: 3px solid var(--amber-500); }
.svc-row.svc-done { border-inline-start: 3px solid var(--ok-700); }
.svc-row.svc-cancelled, .svc-row.svc-rejected, .svc-row.svc-voided, .svc-row.svc-stalled { background: var(--surface-2); }
.svc-head {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: 0.5rem 0.875rem;
  inline-size: 100%;
  padding: 0.625rem 0.875rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.svc-head:focus-visible { outline: 2px solid var(--navy-700); outline-offset: -2px; border-radius: var(--r-m); }
.svc-date { display: grid; gap: 0; font-size: var(--fs-s); color: var(--navy-900); }
.svc-date small { font-size: var(--fs-xs); }
.svc-main { display: grid; gap: 0.125rem; min-inline-size: 0; }
.svc-name { color: var(--ink); font-weight: 600; }
.svc-tooth { margin-inline-start: 0.375rem; color: var(--navy-800); font-size: var(--fs-s); font-weight: 500; }
.svc-meta { color: var(--ink-3); font-size: var(--fs-xs); }
.svc-state { display: grid; justify-items: start; gap: 0.125rem; }
.svc-state small { color: var(--ink-3); font-size: var(--fs-xs); }
.svc-amount { color: var(--ink-2); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.pill-tiny { padding: 0 0.375rem; font-size: 0.6875rem; }
.svc-detail { display: grid; gap: 0.625rem; padding: 0 0.875rem 0.875rem; border-block-start: 1px dashed var(--line); }
.svc-events { list-style: none; margin: 0; padding: 0.625rem 0 0; display: grid; gap: 0.375rem; }
.svc-event {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  padding-inline-start: 1rem;
  font-size: var(--fs-s);
  line-height: 1.8;
}
.svc-event::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--line-strong);
}
.svc-event-performed::before, .svc-event-consentsigned::before, .svc-event-accepted::before { background: var(--ok-700); }
.svc-event-cancelled::before, .svc-event-voided::before, .svc-event-rejected::before, .svc-event-planclosed::before { background: var(--amber-500); }
.svc-event-booked::before { background: var(--cyan-500); }
.svc-event-when { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.svc-event-what { color: var(--ink); }
.svc-event-note { display: block; color: var(--amber-700); }
.svc-event-amount { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.svc-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.svc-empty { display: grid; justify-items: start; gap: 0.75rem; }

@media (max-width: 760px) {
  .svc-head { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-date { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
  .svc-consent, .svc-amount { justify-self: end; }
  .svc-event { grid-template-columns: minmax(0, 1fr) auto; }
  .svc-event-when { grid-column: 1 / -1; }
}

/* ---------- ویجتِ خدماتِ در انتظار ---------- */
.pend-actions { display: inline-flex; gap: 0.125rem; }
.pend-reminded { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; justify-self: start; }

@media print {
  .pb, .pcs-actions, .plan-item-actions, .plan-actions, .accept-panel, .svc-actions, .svc-tiles, .svc-filters { display: none !important; }
  .svc-row { break-inside: avoid; }
  .svc-head { cursor: default; }
}

/* ==========================================================================
   مهر ۱۴۰۵ — زیرتب‌های پرونده، نسخه‌ی سه‌بخشی، نوبتِ سریع و انتخابِ پزشک
   ========================================================================== */

/* ---------- زیرتب‌ها: چسبیده به نوارِ تب‌های پرونده ---------- */
/* یک طراحی برای «درمان» و «نسخه‌ها»: نواری آرام زیرِ تبِ اصلی که صفحه‌های همان تب را نشان می‌دهد؛ فقط نام، بی
   توضیح. روشن‌بودن با پرِ سرمه‌ای است، نه خطِ زیرین — خطِ زیرین مالِ سطحِ بالاتر است. */
.patient-subtabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-block-start: 0.5rem;
  padding: 0.25rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  scrollbar-width: thin;
}
.patient-subtab {
  flex: none;
  padding: 0.3125rem 1rem;
  border-radius: var(--r-s);
  color: var(--ink-2);
  font-size: var(--fs-s);
  font-weight: 500;
  line-height: 1.8;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}
.patient-subtab:hover { background: var(--cyan-50); color: var(--navy-900); }
.patient-subtab.active { background: var(--fill-strong); color: var(--fill-ink); }
.patient-subtab:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.patient-sticky .patient-subtabs { margin-block-end: 0.25rem; }

/* ---------- کارتِ پزشک: کوچک و «هیچ‌کدام» ---------- */
.dcard-compact .dcard-grid { grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 100%), 1fr)); gap: 0.375rem; }
.dcard-compact .dcard-card { gap: 0.5rem; padding: 0.4375rem 0.625rem; }
.dcard-compact .dcard-avatar { inline-size: 2rem; block-size: 2rem; font-size: var(--fs-s); }
.dcard-none .dcard-avatar { background: var(--surface-2); color: var(--ink-2); border: 1px dashed var(--line-strong); }
.dcard-card:has(input:checked).dcard-none .dcard-avatar { background: var(--cyan-500); color: var(--fill-ink); border-color: transparent; }
.dcard > .hint, .dcard > .field-error { margin-block-start: 0.375rem; }

/* ---------- تراشه‌ی پزشک (فیلتر) ---------- */
.doctor-chips { align-items: center; }
.doctor-chips-label { color: var(--ink-3); font-size: var(--fs-s); margin-inline-end: 0.25rem; }
.filter-chip .doctor-chip-avatar {
  display: inline-grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-end: 0.375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--fill-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.125rem;
}
.filter-chip input:checked + span .doctor-chip-avatar { background: var(--cyan-500); }
.chair-head .doctor-chips { flex: 1; justify-content: flex-start; }
.svc-filters .doctor-chips { flex-basis: 100%; }

/* ---------- تبِ نسخه: دو نیمه ---------- */
.rx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.rx-layout-single { grid-template-columns: minmax(0, 1fr); }
.rx-layout > .panel { margin: 0; }
@media (max-width: 64rem) { .rx-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- نوشتنِ نسخه ---------- */
.rx-composer { display: grid; gap: 0.875rem; }
.rx-composer .panel-head { margin-block-end: 0; }
.rx-composer .dcard { margin: 0; }

.rx-pick {
  display: grid;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.rx-pick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.rx-cats { display: flex; flex-wrap: wrap; gap: 0.375rem; flex: 1 1 20rem; }
.rx-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-s);
  line-height: 1.8;
  cursor: pointer;
}
.rx-cat:hover { border-color: var(--navy-700); color: var(--navy-900); }
.rx-cat.is-active { border-color: var(--navy-800); background: var(--fill-strong); color: var(--fill-ink); }
.rx-cat:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.rx-cat-count {
  min-inline-size: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-align: center;
}
.rx-cat.is-active .rx-cat-count { background: rgb(255 255 255 / 0.18); color: var(--fill-ink); }

.rx-search {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 1 15rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink-3);
}
.rx-search input { flex: 1; min-inline-size: 0; padding: 0.125rem 0; border: 0; background: transparent; box-shadow: none; }
.rx-search input:focus { outline: none; }
.rx-search:focus-within { border-color: var(--navy-700); box-shadow: 0 0 0 3px var(--ring); }

.rx-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); gap: 0.375rem; }
.rx-option {
  position: relative;
  display: grid;
  gap: 0.0625rem;
  padding: 0.5rem 0.75rem;
  padding-inline-end: 2.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.rx-option:hover:not(:disabled) { border-color: var(--navy-700); }
.rx-option:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.rx-option:disabled { cursor: default; opacity: 0.55; }
.rx-option-name { font-weight: 600; line-height: 1.6; }
.rx-option-sub { overflow: hidden; color: var(--ink-3); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.rx-option-mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.625rem;
  display: grid;
  place-items: center;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-block-start: -0.6875rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--navy-800);
}
.rx-option.is-added { border-color: var(--navy-700); background: var(--cyan-50); box-shadow: inset 0 0 0 1px var(--navy-700); }
.rx-option.is-added .rx-option-mark { background: var(--navy-700); color: var(--fill-ink); }
.rx-option-custom { border-style: dashed; background: transparent; color: var(--navy-900); }
.rx-option-custom .rx-option-name { display: inline-flex; align-items: center; gap: 0.25rem; }
.rx-options-empty { grid-column: 1 / -1; margin: 0; }

.rx-list { display: grid; gap: 0.75rem; }
.rx-list-title { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-size: var(--fs-m); color: var(--navy-900); }
.rx-list-title .muted { font-size: var(--fs-s); font-weight: 400; }
.rx-history [data-rx-count] { flex: none; white-space: nowrap; }
.rx-list-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  color: var(--ink-3);
  text-align: center;
}
.rx-lines { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.rx-line {
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--cyan-500);
  border-radius: var(--r-m);
  background: var(--surface);
}
.rx-line-top { display: flex; align-items: center; gap: 0.5rem; }
.rx-line-no {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background: var(--fill-strong);
  color: var(--fill-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.rx-line-name { flex: 1; min-inline-size: 0; font-weight: 600; }
.rx-line-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.75rem; }
.rx-line-fields .field { margin: 0; }
.rx-field-wide { grid-column: 1 / -1; }
@media (max-width: 40rem) { .rx-line-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.rx-quick { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-start: 0.375rem; }
.rx-quick-chip {
  padding: 0.0625rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.9;
  cursor: pointer;
}
.rx-quick-chip:hover { border-color: var(--navy-700); color: var(--navy-900); }
.rx-quick-chip.is-on { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); font-weight: 600; }
.rx-quick-chip:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 1px; }

.rx-teeth { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rx-teeth [data-line-teeth] { color: var(--navy-900); font-weight: 500; }
.rx-line .tooth-picker { margin-block-start: 0.5rem; }

/* ---------- تاریخچه‌ی نسخه‌ها ---------- */
.rx-rows { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.rx-row { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.rx-row.is-open { border-color: var(--navy-700); box-shadow: 0 1px 0 var(--line); }
.rx-row-head { display: flex; align-items: center; gap: 0.25rem; padding-inline-end: 0.375rem; }
.rx-row-main {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "no date doctor state chevron"
    "items items items items chevron";
  align-items: center;
  gap: 0.125rem 0.75rem;
  flex: 1;
  min-inline-size: 0;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.rx-row-main:focus-visible { outline: 2px solid var(--navy-700); outline-offset: -2px; border-radius: var(--r-m); }
.rx-row-no { grid-area: no; color: var(--navy-900); font-weight: 700; white-space: nowrap; }
.rx-row-date { grid-area: date; color: var(--ink-2); font-size: var(--fs-s); }
.rx-row-doctor { grid-area: doctor; overflow: hidden; color: var(--ink-3); font-size: var(--fs-s); text-overflow: ellipsis; white-space: nowrap; }
.rx-row-main .pill { grid-area: state; }
.rx-row-chevron { grid-area: chevron; color: var(--ink-3); }
.rx-row-items { grid-area: items; overflow: hidden; color: var(--ink); font-size: var(--fs-s); text-overflow: ellipsis; white-space: nowrap; }
.rx-row.is-cancelled .rx-row-no,
.rx-row.is-cancelled .rx-row-items { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }

.rx-detail { display: grid; gap: 0.625rem; padding: 0 0.75rem 0.75rem; }
.rx-detail .form-actions { margin: 0; }
.rx-detail .confirm-panel { margin: 0; }
/* پیش‌نمایشِ برگه: همان برگه‌ی A5 با اندازه‌ی واقعی‌اش، کوچک‌شده به اندازه‌ی ستون — پله‌ها با عرضِ خودِ قاب،
   نه عرضِ صفحه، چون ستونِ تاریخچه کنارِ فرم باریک‌تر از تمامِ صفحه است. برگه ۱۴۰ میلی‌متر (≈۵۲۹px) است. */
.rx-preview-frame {
  container-type: inline-size;
  overflow: auto;
  padding: 0.75rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.rx-sheet-preview {
  inline-size: 124mm;
  min-block-size: 150mm;
  margin-inline: auto;
  padding: 8mm;
  border-radius: 2px;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 6px 18px rgb(0 0 0 / 0.08);
  zoom: 0.5;
}
@container (min-width: 330px) { .rx-sheet-preview { zoom: 0.6; } }
@container (min-width: 380px) { .rx-sheet-preview { zoom: 0.7; } }
@container (min-width: 430px) { .rx-sheet-preview { zoom: 0.8; } }
@container (min-width: 510px) { .rx-sheet-preview { zoom: 0.95; } }
.rx-sheet-preview .rx-sheet-body { min-block-size: 40mm; }

.rx-sheet-title { margin: 0 0 3mm; font-size: 12pt; font-weight: 700; }
.rx-sheet-body-request { padding-inline-start: 0; }
.rx-sheet-body-request .rx-sheet-items { padding-inline-start: 6mm; }

/* ---------- ویرایشِ فهرستِ نسخه ---------- */
.rxcat-head-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.rxcat-kinds { margin-block-end: 0.75rem; }
.rxcat-layout {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
/* ستون‌ها با عرضِ خودِ ویرایشگر، نه صفحه: در تبِ نسخه تمام‌عرض است و در تنظیمات کنارِ فهرستِ بخش‌ها. */
.rxcat { container-type: inline-size; }
.rx-layout > .rxcat { grid-column: 1 / -1; }
@container (max-width: 44rem) { .rxcat-layout { grid-template-columns: minmax(0, 1fr); } }
.rxcat-sub { margin: 0 0 0.5rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.rxcat-cat-list, .rxcat-item-list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.rxcat-cat, .rxcat-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.rxcat-cat.is-selected { border-color: var(--navy-700); background: var(--cyan-50); }
.rxcat-cat.is-off, .rxcat-item.is-off { opacity: 0.65; }
.rxcat-cat-main {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0.5rem;
  min-inline-size: 0;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.rxcat-cat-main small { font-weight: 400; }
.rxcat-row-actions { display: inline-flex; flex: none; align-items: center; gap: 0.125rem; }
.rxcat-items-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.5rem; }
.rxcat-items-head .rxcat-sub { margin: 0; }
.rxcat-item { flex-wrap: wrap; padding-inline-start: 0.625rem; }
.rxcat-item-text { display: grid; flex: 1; gap: 0.0625rem; min-inline-size: 0; }
.rxcat-item-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rxcat-uses { color: var(--navy-800); font-size: var(--fs-xs); }
.rxcat-form { margin-block: 0.5rem 0.75rem; }

/* ---------- نوبتِ سریع ---------- */
.qbook-row > td { padding: 0 0.5rem 0.75rem; background: var(--surface-2); }
.qbook {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.06);
}
.qbook-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.qbook-head h3 { margin: 0; color: var(--navy-900); font-size: var(--fs-m); line-height: 1.7; }
.qbook .dcard { margin: 0; }
.qbook-when { display: grid; gap: 0.625rem; }
.qbook-days { display: flex; gap: 0.375rem; overflow-x: auto; padding-block-end: 0.125rem; scrollbar-width: thin; }
.qbook-day {
  display: grid;
  flex: none;
  justify-items: center;
  gap: 0;
  min-inline-size: 4.75rem;
  padding: 0.3125rem 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.qbook-day small { color: var(--ink-3); font-size: var(--fs-xs); }
.qbook-day:hover { border-color: var(--navy-700); }
.qbook-day.is-chosen { border-color: var(--navy-800); background: var(--fill-strong); color: var(--fill-ink); }
.qbook-day.is-chosen small { color: var(--fill-ink); opacity: 0.85; }
.qbook-day:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.qbook-day-name { font-weight: 600; font-size: var(--fs-s); }
.qbook-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 12rem)); gap: 0.5rem 0.75rem; }
.qbook-fields .field { margin: 0; }
@media (max-width: 40rem) { .qbook-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.qbook .free-slots { margin: 0; }
.qbook .form-actions { margin: 0; }

/* «بی‌نوبت» که خودش دکمه‌ی نوبت است: همان pill، با رفتارِ دکمه. */
.pill-button { border: 0; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.pill-button:hover { filter: brightness(0.96); text-decoration: underline; }
.pill-button:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

.pend-book { grid-column: 1 / -1; }
.svc-detail .qbook { margin-block-start: 0.5rem; }

@media print {
  .patient-subtabs, .qbook, .rx-composer, .rxcat { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .patient-subtab, .rx-option, .dcard-card { transition: none; }
}

/* ==========================================================================
   مهر ۱۴۰۵ — پرداخت و حساب: در یک نگاه، دریافتِ یک‌جا و دونه‌ای، کیف پول، تاریخچه، خانواده و کارتِ هدیه
   ========================================================================== */

/* ---------- در یک نگاه ---------- */
.acct-glance-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.acct-glance-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.0625rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--ok-50);
  color: var(--ok-700);
  font-size: var(--fs-xs);
}
/* بستانکاری کاری نمی‌خواهد ولی خبر است: سبزِ آرام، کنارِ کهربایی «بدهکار». */
.glance-cell.is-credit { border-color: var(--ok-700); background: var(--ok-50); }
.glance-cell.is-credit .glance-value { color: var(--ok-700); }
.acct-glance .glance-label { display: inline-flex; align-items: center; gap: 0.25rem; }
.acct-wallet.is-set .glance-value { color: var(--navy-800); }
.acct-progress > span { background: var(--ok-700); }

/* ---------- زیرتبِ دریافت: فرم بالا، درمان‌ها زیرش ---------- */
.account-take { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
/* بی این، جدولِ درمان‌ها کمینه‌ی ستون را می‌سازد و روی گوشی کلِ صفحه افقی اسکرول می‌خورد. */
.account-take > * { min-inline-size: 0; }
.account-take > .panel { margin: 0; }

.collect .panel-head { flex-wrap: wrap; gap: 0.5rem 1rem; }
.collect-payers { margin: 0; padding: 0; border: 0; }
.payer-card { display: grid; gap: 0.125rem; min-inline-size: 9rem; }
.payer-card .pill { margin-inline-start: 0.25rem; }

.collect-due {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-900);
}
.collect-due strong { font-size: var(--fs-l); font-variant-numeric: tabular-nums; }
.collect-due.is-empty { background: var(--surface-2); color: var(--ink-2); }
.collect-due-deposit { justify-content: flex-start; margin: 0; }

.collect-wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
}
.collect-wallet.is-on { border-style: solid; border-color: var(--ok-700); background: var(--ok-50); }
.collect-wallet .check { min-block-size: 0; padding: 0; border: 0; background: none; }
.collect-wallet-amount { inline-size: min(12rem, 100%); font-variant-numeric: tabular-nums; }

.collect-tenders { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.collect-tenders > .btn { justify-self: start; }
.tender-row {
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.tender-methods { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tender-method { position: relative; }
.tender-method input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tender-method span {
  display: block;
  padding: 0.125rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-s);
}
.tender-method.is-active span { border-color: var(--fill-strong); background: var(--fill-strong); color: var(--fill-ink); }
.tender-method input:focus-visible + span { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.tender-inputs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.tender-amount { flex: 1 1 11rem; min-inline-size: 0; font-size: var(--fs-l); font-weight: 600; font-variant-numeric: tabular-nums; }
.tender-ref { flex: 1 1 10rem; min-inline-size: 0; }
.tender-hint { margin: 0; }
.tender-cheque { margin: 0; }

/* فرم در یک ستون، «صورتِ دریافت» در ستونِ کنار — روی صفحه‌ی باریک زیرِ هم. */
.collect-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.collect-main { display: grid; gap: 0.875rem; min-inline-size: 0; }
.collect-main > .field, .collect-main > fieldset { margin: 0; }
@media (min-width: 64rem) {
  .collect-body { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); }
}
.collect-bill {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.collect-bill .collect-submit { inline-size: 100%; justify-content: center; }

.collect-summary {
  display: grid;
  gap: 0.375rem;
  margin: 0;
}
.collect-summary div { display: flex; justify-content: space-between; gap: 1rem; }
.collect-summary dt { color: var(--ink-2); }
.collect-summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.collect-summary .is-wallet dd { color: var(--ok-700); }
.collect-summary .is-short dd { color: var(--amber-700); }
.collect-summary div:last-child dd { font-size: var(--fs-l); }

/* ---------- دریافتی که همین حالا ثبت شد ---------- */
.collect-done {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-block-end: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ok-700);
  border-radius: var(--r-m);
  background: var(--ok-50);
}
.collect-done-text { display: grid; gap: 0.125rem; }
.collect-done-text strong { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ok-700); }
.collect-done-text span { color: var(--ink-2); font-size: var(--fs-s); }
.collect-done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.collect-done > .paymsg { grid-column: 1 / -1; margin: 0; }
@media (max-width: 40rem) { .collect-done { grid-template-columns: minmax(0, 1fr); } }

/* ---------- چیپِ دکمه‌ای (فیلتر، درصد، دلیلِ آماده) ---------- */
.acct-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-block-size: 2rem;
  padding: 0.0625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-s);
  cursor: pointer;
}
.acct-chip .num { color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.acct-chip:hover { border-color: var(--navy-700); color: var(--navy-900); }
.acct-chip.is-active { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); font-weight: 500; }
.acct-chip:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.acct-chip-soft { min-block-size: 1.75rem; border-style: dashed; font-size: var(--fs-xs); }

/* ---------- فهرستِ درمان‌ها با رنگِ وضعیت ---------- */
.charge-panel .panel-head { flex-wrap: wrap; gap: 0.5rem 1rem; }
/* روی گوشی جدول درونِ قابش افقی اسکرول می‌خورد، نه اینکه نامِ هر خدمت کلمه‌به‌کلمه بشکند. */
.charge-table { min-inline-size: 44rem; }
.charge-table .col-pick { inline-size: 2.5rem; text-align: center; }
.charge-table .col-pick input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--navy-700); }

/* نوارِ رنگیِ کنارِ هر ردیف همان وضعیت است — از دور هم خوانده می‌شود. */
.charge-row > td:first-child { border-inline-start: 4px solid transparent; }
.charge-row.is-paid > td:first-child { border-inline-start-color: var(--ok-700); }
.charge-row.is-partial > td:first-child { border-inline-start-color: var(--amber-100); }
.charge-row.is-unpaid > td:first-child { border-inline-start-color: var(--amber-500); }
.charge-row.is-free > td:first-child { border-inline-start-color: var(--line-strong); }
.data tbody tr.charge-row.is-picked { background: var(--cyan-50); }
.charge-row.is-open > td { border-block-end-color: transparent; }

.charge-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; }
.charge-was { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.charge-off { display: block; color: var(--ok-700); font-size: var(--fs-xs); }
.charge-amount {
  inline-size: 8.5rem;
  max-inline-size: 100%;
  padding-block: 0.25rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.pay-state {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  padding: 0.0625rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  line-height: 1.9;
  white-space: nowrap;
}
.pay-state.is-paid { background: var(--ok-50); color: var(--ok-700); }
.pay-state.is-partial { border-color: var(--amber-100); background: var(--amber-50); color: var(--amber-700); border-radius: var(--r-m); }
.pay-state.is-unpaid { border-color: var(--amber-500); background: var(--amber-100); color: var(--amber-700); font-weight: 600; }
.pay-state.is-free { border-color: var(--line); background: var(--surface-2); color: var(--ink-3); }
.pay-bar { display: block; block-size: 0.25rem; margin-block-end: 0.3rem; border-radius: var(--r-pill); background: var(--amber-100); overflow: hidden; }
.pay-bar > span { display: block; block-size: 100%; background: var(--ok-700); }

.acct-row-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 0.125rem; }

.data tbody tr.charge-detail-row:hover { background: transparent; }
.charge-detail-row > td { padding-block-start: 0; background: var(--surface-2); }
.charge-detail { display: grid; gap: 0.5rem; padding-block: 0.5rem; }
.charge-facts { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; margin: 0; }
.charge-facts div { display: flex; gap: 0.375rem; align-items: baseline; }
.charge-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.charge-facts dd { margin: 0; font-weight: 600; }
.charge-parts { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.charge-parts li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; font-size: var(--fs-s); }
.charge-part-source {
  padding-inline: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.8;
}
.charge-part-source.source-receipt { border-color: var(--cyan-300); background: var(--cyan-50); color: var(--navy-900); }
.charge-part-source.source-wallet { border-color: var(--ok-700); background: var(--ok-50); color: var(--ok-700); }
.charge-part-source.source-family { border-color: var(--amber-100); background: var(--amber-50); color: var(--amber-700); }

/* ---------- پیامکِ رسید و یادآوری ---------- */
.paymsg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.paymsg-head h3 { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; }
.paymsg-to { margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.paymsg textarea { line-height: 1.9; }

/* ---------- کیف پول ---------- */
.wallet-top {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: start;
}
@media (max-width: 48rem) { .wallet-top { grid-template-columns: minmax(0, 1fr); } }

/* کارتِ کیف پول به اندازه‌ی کارتِ بانکی: همان شیئی که بیمار می‌شناسد — «پولی که پیشِ ماست». */
.wallet-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  aspect-ratio: 1.586;
  padding: 1rem 1.25rem;
  overflow: hidden;
  border-radius: var(--r-l);
  background:
    radial-gradient(circle at 12% 18%, rgb(255 255 255 / 0.14) 0 22%, transparent 23%),
    radial-gradient(circle at 92% 110%, rgb(10 175 196 / 0.35) 0 34%, transparent 35%),
    linear-gradient(135deg, var(--fill-strong), var(--fill-deep));
  color: var(--fill-ink);
  box-shadow: 0 6px 20px rgb(var(--shadow-hue) / 0.22);
}
.wallet-card.is-short {
  background:
    radial-gradient(circle at 92% 110%, rgb(255 255 255 / 0.18) 0 34%, transparent 35%),
    linear-gradient(135deg, #9A5B0B, #5C3707);
}
.wallet-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-s); }
.wallet-card-label { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; }
.wallet-card-clinic { overflow: hidden; opacity: 0.85; text-overflow: ellipsis; white-space: nowrap; }
.wallet-card-amount { align-self: center; margin: 0; font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3; }
.wallet-card-amount .num { font-variant-numeric: tabular-nums; }
.wallet-card-amount small { margin-inline-start: 0.375rem; font-size: var(--fs-s); font-weight: 500; opacity: 0.85; }
.wallet-card-foot { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-s); opacity: 0.9; }

.wallet-facts { display: grid; gap: 0.75rem; align-content: start; }
.wallet-facts .banner { margin: 0; }
.wallet-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; margin: 0; }
.wallet-stats div { padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.wallet-stats dt { color: var(--ink-3); font-size: var(--fs-xs); }
.wallet-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.wallet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wallet-actions .btn.is-active { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); }
.wallet-panel .confirm-panel .chip-row { margin-block-start: 0.375rem; }

.card-code-row { display: flex; gap: 0.5rem; align-items: center; }
.card-code { flex: 1 1 14rem; min-inline-size: 0; font-size: var(--fs-l); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.gift-card-found {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ok-700);
  border-radius: var(--r-m);
  background: var(--ok-50);
  color: var(--ok-700);
}
.gift-card-found strong { font-size: var(--fs-l); }
.gift-card-found.is-used { border-color: var(--amber-500); background: var(--amber-50); color: var(--amber-700); }

.wallet-history, .wallet-grants { margin-block-start: 1.25rem; }
.wallet-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.wallet-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.25rem 0.75rem;
  padding: 0.625rem 0.25rem;
  border-block-end: 1px solid var(--line);
}
.wallet-line:last-child { border-block-end: 0; }
.wallet-line-icon {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-800);
}
.wallet-line.is-out .wallet-line-icon { background: var(--amber-50); color: var(--amber-700); }
.wallet-line-text { display: grid; gap: 0.0625rem; min-inline-size: 0; }
.wallet-line-money { display: grid; justify-items: end; gap: 0.0625rem; font-size: var(--fs-xs); }
.wallet-line-change { font-size: var(--fs-m); font-weight: 700; }
.wallet-line.is-in .wallet-line-change { color: var(--ok-700); }
.wallet-line.is-out .wallet-line-change { color: var(--amber-700); }

.wallet-grant-list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.wallet-grant-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.wallet-grant-list li.is-voided { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* ---------- تاریخچه‌ی دریافت‌ها ---------- */
.acct-history .panel-head { flex-wrap: wrap; gap: 0.5rem 1rem; }
.hist-main {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "icon when title amount chevron"
    "icon badges badges badges chevron";
}
.hist-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-800);
}
.hist-row.hist-wallet .hist-icon { background: var(--ok-50); color: var(--ok-700); }
.hist-row.hist-refund .hist-icon { background: var(--amber-50); color: var(--amber-700); }
.hist-when { grid-area: when; display: grid; line-height: 1.5; white-space: nowrap; }
.hist-title { grid-area: title; display: grid; min-inline-size: 0; line-height: 1.6; }
.hist-title small { font-size: var(--fs-xs); }
.hist-amount { grid-area: amount; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-badges { grid-area: badges; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.hist-badges:empty { display: none; }
.hist-row .rx-row-chevron { grid-area: chevron; }
.hist-row.is-cancelled .hist-amount,
.hist-row.is-cancelled .hist-title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }
@media (max-width: 40rem) {
  .hist-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title chevron"
      "icon when amount"
      "icon badges badges";
  }
}

/* رسیدِ باطل فقط در پیش‌نمایشِ تاریخچه دیده می‌شود (چاپ نمی‌شود) — مُهرِ «باطل» تا با رسیدِ معتبر اشتباه نشود. */
.doc-void {
  margin: 3mm 0 0;
  padding: 1.5mm 3mm;
  border: 0.6mm solid #9F1D13;
  border-radius: 1.5mm;
  color: #9F1D13;
  font-weight: 700;
  text-align: center;
}

/* پیش‌نمایشِ رسید: همان برگه‌ی A5، کوچک‌شده به عرضِ قاب — مثلِ پیش‌نمایشِ نسخه. */
.doc-sheet-preview {
  inline-size: 124mm;
  margin-inline: auto;
  padding: 8mm;
  border-radius: 2px;
  background: #fff;
  color: #000;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 6px 18px rgb(0 0 0 / 0.08);
  zoom: 0.5;
}
@container (min-width: 330px) { .doc-sheet-preview { zoom: 0.6; } }
@container (min-width: 380px) { .doc-sheet-preview { zoom: 0.7; } }
@container (min-width: 430px) { .doc-sheet-preview { zoom: 0.8; } }
@container (min-width: 510px) { .doc-sheet-preview { zoom: 0.95; } }

/* ---------- خانواده ---------- */
.family-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.family-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.family-card.is-owing { border-color: var(--amber-500); }
.family-card.is-self { box-shadow: inset 0 0 0 1px var(--navy-700); }
.family-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.family-name { font-weight: 600; }
.family-card-head .file-no { margin-inline-start: auto; font-size: var(--fs-xs); }
.family-card-facts { display: grid; gap: 0.25rem; margin: 0; }
.family-card-facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; }
.family-card-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.family-card-facts dd { margin: 0; font-size: var(--fs-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.family-card-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* ---------- کارت‌های هدیه ---------- */
.gift-layout {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.gift-layout > .panel { margin: 0; }
@media (max-width: 64rem) { .gift-layout { grid-template-columns: minmax(0, 1fr); } }
.gift-issued { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.gift-code { font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }

.gift-sheet { color: #000; }
@media print {
  html[data-print="sheet"] .gift-sheet {
    display: grid;
    grid-template-columns: repeat(2, 85.6mm);
    grid-auto-rows: 54mm;
    justify-content: center;
    gap: 4mm;
  }
}
.gift-card-print {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 0.6mm;
  padding: 3.5mm 4mm;
  border: 0.3mm dashed #888;
  border-radius: 3mm;
  break-inside: avoid;
  font-size: 7.5pt;
  line-height: 1.6;
}
.gift-card-print-head { display: flex; justify-content: space-between; gap: 2mm; font-size: 8pt; }
.gift-card-print-amount { margin: 0; font-size: 16pt; font-weight: 700; }
.gift-card-print-title { margin: 0; font-size: 8.5pt; }
.gift-card-print-code { align-self: center; margin: 0; font-size: 13pt; font-weight: 700; letter-spacing: 0.08em; text-align: center; }
.gift-card-print-foot { display: flex; justify-content: space-between; gap: 2mm; }
.gift-card-print-hint { margin: 0; color: #444; font-size: 6.5pt; }

@media print {
  .collect, .collect-done, .wallet-actions, .acct-row-actions, .acct-chips { display: none !important; }
}

/* ==========================================================================
   مهر ۱۴۰۵ — دورِ دوم: ستونِ دندان، کارِ ردیفی و گروهی در فهرستِ درمان‌ها، خانواده (پرونده، دریافت، دفتر)،
   منبعِ هر پول در تاریخچه، و ویجتِ شارژِ کیف پول
   ========================================================================== */

/* نسبت در خانواده: «فرزند»، «همسر»… — آرام؛ «سرپرست» پُر. */
.pill-soft { background: var(--cyan-50); border: 1px solid var(--cyan-300); color: var(--navy-900); }
.pill-head { background: var(--fill); color: var(--fill-ink); }
.icon-btn.is-active { background: var(--cyan-50); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--navy-700); }
.btn.is-active { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); }

/* ---------- فهرستِ درمان‌ها: ستونِ دندان ---------- */
.charge-table { min-inline-size: 48rem; }
.charge-table .col-tooth { inline-size: 4.5rem; text-align: center; }
.charge-table td.col-tooth .tooth-no {
  display: inline-block;
  min-inline-size: 2.25rem;
  padding-inline: 0.375rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--navy-900);
  font-weight: 600;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

/* ویرایشگرِ زیرِ همان ردیف (تخفیف، پیامک، جزئیات): به ردیفِ بالایش چسبیده، با همان رنگِ زمینه. */
.data tbody tr.charge-editor-row:hover { background: transparent; }
.charge-editor-row > td { padding-block: 0 0.75rem; background: var(--surface-2); border-block-end: 2px solid var(--line-strong); }
.charge-row.is-open > td { background: var(--surface-2); }
.charge-editor-row .confirm-panel, .charge-editor-row .paymsg { margin: 0; }
.charge-inline { margin-block-start: 0.25rem; }
.charge-inline h3 { font-size: var(--fs-m); }

/* بدهیِ اعضای خانواده در حسابِ سرپرست — زیرِ درمان‌های خودش، با سربرگِ جدا. */
.data tbody tr.charge-group-row:hover { background: transparent; }
.charge-group-row > th {
  padding: 0.75rem 0.75rem 0.375rem;
  border-block-start: 2px solid var(--line-strong);
  background: var(--surface);
  text-align: start;
  font-weight: 500;
}
.charge-group-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; color: var(--navy-900); font-weight: 600; }
.charge-group-title input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--navy-700); }
.charge-group-row .hint { display: block; margin-block-start: 0.125rem; font-weight: 400; }
.charge-for { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-block-start: 0.125rem; color: var(--ink-2); font-size: var(--fs-xs); }
.charge-for a { font-weight: 600; }

/* نوارِ کارِ گروهی: وقتی چند ردیف تیک خورده — یک پیامک، یک تخفیف. */
.charge-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-block-end: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-900);
}
.charge-bulk-count { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.charge-bulk-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.charge-panel > .paymsg, .charge-panel > .confirm-panel { margin-block: 0 0.75rem; }

.bulk-lines { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.bulk-lines li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.125rem 1rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-s);
  background: var(--surface);
}
.bulk-lines li.is-same { color: var(--ink-3); }
.bulk-lines s { color: var(--ink-3); }
.bulk-change { display: inline-flex; align-items: center; gap: 0.375rem; }
.bulk-lines .num { font-variant-numeric: tabular-nums; }
.bulk-lines .bulk-total { background: transparent; border-block-start: 1px solid var(--line); border-radius: 0; font-weight: 600; }

/* ---------- دریافت: کیف پول‌ها و بدهیِ خانواده ---------- */
.collect-wallets { display: grid; gap: 0.5rem; }
.collect-wallet.is-head { border-color: var(--cyan-300); }
.collect-wallet.is-head.is-on { border-color: var(--navy-700); background: var(--cyan-50); }
.collect-wallet-note { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; flex-basis: 100%; }
.collect-due-family { color: var(--ink-2); font-size: var(--fs-s); }
.collect-family-pick {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  inline-size: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--navy-700);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--navy-900);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.collect-family-pick > span { display: grid; gap: 0.125rem; }
.collect-family-pick:hover { background: var(--cyan-50); }
.collect-family-pick:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* ---------- پول از کجا، برای کی — تاریخچه و دفترِ خانواده ---------- */
.money-flow { display: grid; gap: 0.25rem; padding: 0 0.75rem 0.625rem; }
.money-flow-line, .family-ledger-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; margin: 0; font-size: var(--fs-s); }
.money-flow-label, .family-ledger-label { min-inline-size: 3rem; color: var(--ink-3); font-size: var(--fs-xs); }
.money-source, .money-target {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  line-height: 1.9;
}
.money-source { border-color: var(--cyan-300); background: var(--cyan-50); color: var(--navy-900); }
.money-source.is-other, .money-target.is-other { border-color: var(--amber-100); background: var(--amber-50); color: var(--amber-700); }
.money-source.is-voided { text-decoration: line-through; opacity: 0.7; }
.money-target.is-wallet { border-color: var(--ok-700); background: var(--ok-50); color: var(--ok-700); }
.money-source .num, .money-target .num { font-variant-numeric: tabular-nums; font-weight: 600; }
/* مبلغ با خطِ جداکننده از نامِ درمان و شماره‌ی دندان — «دندان ۳۶ ۲٬۰۰۰٬۰۰۰» دو عددِ چسبیده نخوانده شود. */
.money-target > .num:last-of-type { margin-inline-start: 0.125rem; padding-inline-start: 0.375rem; border-inline-start: 1px solid var(--line-strong); }

.family-ledger { display: grid; gap: 0.5rem; margin-block-start: 1rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); }
.family-ledger h3 { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; }
.family-ledger-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.family-ledger-row {
  display: grid;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--navy-700);
  border-radius: var(--r-m);
  background: var(--surface);
}
.family-ledger-row.is-cancelled { border-inline-start-color: var(--line-strong); opacity: 0.75; }
.family-ledger-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.family-ledger-when { display: inline-flex; gap: 0.375rem; color: var(--ink-2); font-size: var(--fs-s); }
.family-ledger-title { flex: 1 1 12rem; }
.family-ledger-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.family-ledger-by { margin: 0; font-size: var(--fs-xs); }

/* ---------- فرمِ پرونده: بخشِ خانواده ---------- */
.family-section { scroll-margin-block-start: 5rem; }
.family-section:focus { outline: none; }
.family-join { display: grid; gap: 0.5rem; }
.family-editor { display: grid; gap: 0.75rem; }
.family-roster { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.family-roster-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.family-roster-row.is-self { box-shadow: inset 0 0 0 1px var(--navy-700); }
.family-roster-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; flex: 1 1 12rem; }
.family-roster-name { font-weight: 600; }
.family-relation-select { inline-size: auto; min-inline-size: 10rem; }
.family-roster-confirm .confirm-panel { margin: 0; }
.family-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.family-picker { margin: 0; }

/* ---------- پرونده: ردیفِ خانواده در «هویت و تماس» ---------- */
.family-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.family-row-self { color: var(--ink-2); }
.family-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.family-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-block: 0.0625rem;
  padding-inline: 0.625rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--navy-900);
  font-size: var(--fs-s);
  text-decoration: none;
  line-height: 1.9;
}
.family-tag:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.family-tag:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.family-tag-role {
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--cyan-50);
  color: var(--navy-800);
  font-size: var(--fs-xs);
}
.family-tag.is-head .family-tag-role { background: var(--fill); color: var(--fill-ink); }
.family-row-manage { font-size: var(--fs-xs); }

/* ---------- ویجتِ شارژِ کیف پول ---------- */
.wallet-widget { display: grid; gap: 0.75rem; align-content: start; }
.wallet-widget .panel-head { margin: 0; }
.wallet-widget-done {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ok-700);
  border-radius: var(--r-m);
  background: var(--ok-50);
  color: var(--ok-700);
}
.wallet-widget-done > span { display: grid; flex: 1 1 12rem; gap: 0.125rem; }
.wallet-widget-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.wallet-widget-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-weight: 600; }
.wallet-widget-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: 0.5rem;
  margin: 0;
}
.wallet-widget-facts div { display: grid; gap: 0.125rem; padding: 0.5rem 0.625rem; border-radius: var(--r-m); background: var(--surface-2); }
.wallet-widget-facts div.is-set { background: var(--ok-50); }
.wallet-widget-facts div.is-set dd { color: var(--ok-700); }
.wallet-widget-facts div.is-owing { background: var(--amber-50); }
.wallet-widget-facts div.is-owing dd { color: var(--amber-700); }
.wallet-widget-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.wallet-widget-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.wallet-widget-form { display: grid; gap: 0.625rem; }
.wallet-widget-form .field { margin: 0; }
.wallet-widget-form .form-actions { margin: 0; }

@media print {
  .charge-bulk, .collect-family-pick, .family-actions, .family-picker { display: none !important; }
}

/* جدولِ درمان‌ها روی صفحه‌ی باریک درونِ قابش افقی می‌لغزد. ویرایشگرِ زیرِ ردیف و سربرگِ خانواده به پهنای همان قابِ
   دیدنی‌اند (نه پهنای کلِ جدول) و با لغزیدن سرِ جایشان می‌مانند — وگرنه نیمی از فرمِ تخفیف بیرونِ صفحه بود. */
.charge-panel .table-wrap { container-type: inline-size; }
.charge-fit {
  position: sticky;
  inset-inline-start: 0;
  box-sizing: border-box;
  inline-size: 100cqi;
  max-inline-size: 100%;
  padding-inline: 0.75rem;
}
.charge-editor-row > td, .charge-group-row > th { padding-inline: 0; }

/* ==========================================================================
   مهر ۱۴۰۵ — «در یک نگاه»ِ هر تب، قدم‌های پذیرشِ طرح، انتخابِ چند خدمت، ستونِ خانواده، تاریخچه‌ی جمع
   ========================================================================== */

/* ---------- قابِ «در یک نگاه» ---------- */
/* هر تب یکی دارد و همه یک شکل‌اند تا چشم یاد بگیرد «بالای هر تب، خلاصه‌ی همان تب». نوارِ فیروزه‌ایِ کنار
   تنها امضای این قاب است؛ خانه‌ها داخلش روی زمینه‌ی کم‌رنگ می‌نشینند تا از کارت‌های پایینِ صفحه جدا شوند. */
.tab-glance {
  position: relative;
  container-type: inline-size;
  margin-block-end: 1rem;
  padding: 0.75rem 1rem 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);
}
.tab-glance::before {
  content: "";
  position: absolute;
  inset-block: 0.875rem;
  inset-inline-start: -1px;
  inline-size: 3px;
  border-radius: var(--r-pill);
  background: var(--cyan-500);
}

.tab-glance-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "icon titles actions fold";
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.tab-glance-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-800);
  box-shadow: inset 0 0 0 1px var(--cyan-100);
}
.tab-glance-titles { grid-area: titles; min-inline-size: 0; }
.tab-glance-titles h2 { margin: 0; font-size: var(--fs-m); line-height: 1.6; color: var(--navy-900); }
.tab-glance-sub { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.8; }
.tab-glance-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.375rem; }
.tab-glance-fold { grid-area: fold; }

.tab-glance-body { display: grid; gap: 0.625rem; margin-block-start: 0.75rem; }
/* خانه‌ها کمی باریک‌تر از نوارِ قدیمیِ «یک نگاه»: روی گوشی دوبه‌دو، نه یک ستونِ بلند. */
.tab-glance-cells.glance { grid-template-columns: repeat(auto-fit, minmax(min(8.75rem, 100%), 1fr)); margin-block-end: 0; }
/* :where تا رنگِ حالت‌ها (بدهکار، کهنه، بستانکار) هنوز برنده باشد. */
.tab-glance :where(.glance-cell) { border-color: transparent; background: var(--surface-2); }
.tab-glance :where(a.glance-cell):hover { border-color: var(--line-strong); background: var(--surface); }

/* جمع‌شده فقط سربرگ است: یک خطِ آرام، ولی دکمه‌ی کارِ اصلی هنوز دمِ دست. */
.tab-glance.is-folded { padding-block: 0.5rem; background: var(--surface-2); box-shadow: none; }
.tab-glance.is-folded::before { inset-block: 0.625rem; background: var(--line-strong); }
.tab-glance.is-folded .tab-glance-sub { display: none; }
.tab-glance.is-folded .tab-glance-icon { inline-size: 1.875rem; block-size: 1.875rem; }

@container (max-width: 34rem) {
  .tab-glance-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon titles fold" "actions actions actions";
  }
  .tab-glance-actions { justify-content: flex-start; }
}

/* ---------- دکمه‌ی «طرح درمانِ تازه» ---------- */
/* کارِ اصلیِ این صفحه است، پس شکلِ خودش را دارد: آیکونِ برگه با علامتِ به‌علاوه و یک خطِ توضیح. */
.plans-head { flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.btn.btn-new-plan {
  gap: 0.75rem;
  min-block-size: 3.25rem;
  padding-block: 0.375rem;
  padding-inline: 0.5rem 1.25rem;
  border-color: var(--fill);
  background: var(--fill);
  color: var(--fill-ink);
  text-align: start;
  box-shadow: 0 10px 22px -14px rgb(var(--shadow-hue) / 0.7);
}
.btn.btn-new-plan:hover { border-color: var(--fill-strong); background: var(--fill-strong); color: var(--fill-ink); }
.btn.btn-new-plan:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }
.btn-new-plan-icon {
  display: grid;
  place-items: center;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  border-radius: var(--r-s);
  background: rgb(255 255 255 / 0.14);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}
.btn-new-plan-text { display: grid; line-height: 1.5; }
.btn-new-plan-text strong { font-size: var(--fs-m); font-weight: 700; }
.btn-new-plan-text small { font-size: var(--fs-xs); opacity: 0.85; font-weight: 400; }

@media (max-width: 40rem) {
  .plans-head > .btn-new-plan { inline-size: 100%; justify-content: flex-start; }
}

/* ---------- قدم‌های پذیرشِ طرح: تأیید ← رضایت‌نامه ← «بیمار پذیرفت» ---------- */
/* واقعاً یک توالی است، پس شماره دارد. قدمِ جاری تنها چیزِ پررنگ است؛ انجام‌شده‌ها سبزِ آرام و بعدی‌ها خط‌چین. */
.plan-steps-wrap { container: plansteps / inline-size; }

.plan-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plan-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
/* خطِ رابط در فاصله‌ی دو قدم، هم‌ترازِ دایره‌ی شماره. */
.plan-step + .plan-step::before {
  content: "";
  position: absolute;
  inset-block-start: 1.55rem;
  inset-inline-start: calc(-0.75rem - 1px);
  inline-size: 0.75rem;
  block-size: 2px;
  background: var(--line-strong);
}
.plan-step.is-done + .plan-step::before { background: var(--ok-700); }

.plan-step-no {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--fs-s);
  font-weight: 700;
  line-height: 1;
}
.plan-step-body { display: grid; gap: 0.375rem; min-inline-size: 0; }
.plan-step-body > strong { color: var(--navy-900); font-size: var(--fs-s); line-height: 1.8; }
.plan-step-hint { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.9; }
.plan-step-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.plan-step-channels { gap: 0.375rem; }
.plan-step-channels .choice-card {
  flex: 1 1 9rem;
  display: grid;
  justify-items: start;
  gap: 0;
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-s);
  line-height: 1.6;
}

.plan-step.is-current {
  border-color: var(--navy-700);
  box-shadow: inset 0 0 0 1px var(--navy-700), 0 8px 20px -16px rgb(var(--shadow-hue) / 0.6);
}
.plan-step.is-current .plan-step-no { border-color: var(--fill); background: var(--fill); color: var(--fill-ink); }
.plan-step.is-done { border-color: transparent; background: var(--ok-50); }
.plan-step.is-done .plan-step-no { border-color: var(--ok-700); background: var(--ok-700); color: var(--surface); }
.plan-step.is-todo { border-style: dashed; background: var(--surface-2); }
.plan-step.is-todo .plan-step-body > strong { color: var(--ink-3); }
.plan-step.is-skipped { border-style: dashed; background: var(--surface-2); }
.plan-step.is-skipped .plan-step-no { border-style: dashed; }
.plan-step.is-skipped .plan-step-body > strong { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* قدم‌ها روی ستونِ باریک زیرِ هم می‌آیند و خطِ رابط عمودی می‌شود. */
@container plansteps (max-width: 46rem) {
  .plan-steps { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .plan-step + .plan-step::before {
    inset-block-start: calc(-0.5rem - 1px);
    inset-inline-start: calc(0.875rem + 0.875rem - 1px);
    inline-size: 2px;
    block-size: 0.5rem;
  }
}

/* ---------- انتخابِ چند خدمت: «انجام شد» یا نوبت برای تیک‌خورده‌ها ---------- */
.plan-pickbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface-2);
  transition: background-color 0.15s, border-color 0.15s;
}
/* با انتخاب، نوار پُر می‌شود و روی دسکتاپ بالای صفحه می‌چسبد تا دکمه‌ها با اسکرولِ فهرستِ بلند گم نشوند. */
.plan-pickbar.is-active {
  position: sticky;
  inset-block-start: 0.5rem;
  z-index: 3;
  border-style: solid;
  border-color: var(--navy-700);
  background: var(--cyan-50);
  box-shadow: 0 10px 24px -18px rgb(var(--shadow-hue) / 0.7);
}
.plan-pickbar-count { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-2); font-size: var(--fs-s); }
.plan-pickbar.is-active .plan-pickbar-count { color: var(--navy-900); }
.plan-pickbar-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.plan-table .col-pick { inline-size: 2.75rem; text-align: center; }
.plan-table .col-pick input { inline-size: 1.125rem; block-size: 1.125rem; margin: 0; accent-color: var(--navy-700); cursor: pointer; vertical-align: middle; }
.plan-table tr.is-picked > td { background: var(--cyan-50); }
.plan-table tr.is-picked > td:first-child { box-shadow: inset -3px 0 0 var(--cyan-500); }
[dir="ltr"] .plan-table tr.is-picked > td:first-child { box-shadow: inset 3px 0 0 var(--cyan-500); }

.batch-item-name { display: inline-flex; flex: 1 1 14rem; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-inline-size: 0; }

@media (max-width: 56rem) {
  /* سربرگِ موبایل خودش چسبان است؛ نوار زیرش پنهان می‌شد. */
  .plan-pickbar.is-active { position: static; }
}

@media (max-width: 40rem) {
  /* روی گوشی دکمه‌ها دوبه‌دو: انتخاب/برداشتن، و «انجام شد»/«نوبت‌دهی» — نه چهار سطرِ نامرتب. */
  .plan-pickbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
  .plan-pickbar-actions .btn { padding-inline: 0.5rem; white-space: nowrap; }
  /* کارتِ طرح داخلِ پنل: قابِ دوم روی گوشی جای قدم‌ها و دکمه‌ها را می‌گرفت. */
  .plans-panel .plan-card { padding: 0.75rem; }
}

/* دکمه‌ی متنی داخلِ یک جمله: «بازگشت»، «چاپ». */
.btn-link {
  display: inline;
  margin-inline-start: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy-700);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover { color: var(--navy-900); }
.btn-link:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; border-radius: 2px; }
.btn-link:disabled { color: var(--ink-3); cursor: not-allowed; text-decoration: none; }

/* ---------- ستونِ «خانواده»ی تبِ پرونده ---------- */
/* سه ستون: سوابق، هویت و تماس، خانواده. وقتی جا برای سه تا نیست، خانواده تمام‌عرض زیرِ آن دو می‌آید
   و فهرستش چندستونه می‌شود — خانواده‌ی بزرگ هم مرتب می‌ماند. */
.file-reference {
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  container-type: inline-size;
}
@container (max-width: 55rem) {
  .file-reference > .family-subpanel {
    grid-column: 1 / -1;
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid var(--line);
    padding-block-start: 1rem;
  }
}
.family-subpanel .panel-head h3 { display: inline-flex; align-items: center; gap: 0.375rem; }

.family-list-self {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-s);
}
.family-count {
  padding-inline: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.family-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.25rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.family-list-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "avatar name tag" "avatar file tag";
  align-items: center;
  column-gap: 0.625rem;
  padding: 0.3125rem 0.5rem;
  border-radius: var(--r-m);
  line-height: 1.6;
}
.family-list-row:hover { background: var(--surface-2); }
.family-list-row:has(a:focus-visible) { outline: 2px solid var(--navy-700); outline-offset: 1px; }
.family-list-avatar {
  grid-area: avatar;
  display: grid;
  place-items: center;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-800);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--cyan-100);
}
.family-list-row.is-head .family-list-avatar { background: var(--fill); color: var(--fill-ink); box-shadow: none; }
.family-list-name {
  grid-area: name;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--navy-900);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* کلِ ردیف پرونده‌ی همان عضو را باز می‌کند، نه فقط نامش. */
.family-list-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.family-list-name:focus-visible { outline: none; }
/* شماره‌ی پرونده این‌جا فقط یادآور است، نه نشانِ اصلی: متنِ ریز، نه قابِ فیروزه‌ایِ همیشگی. */
.family-list-row .file-no {
  grid-area: file;
  justify-self: start;
  min-inline-size: 0;
  padding: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
}
.family-list-row .family-tag-role { grid-area: tag; white-space: nowrap; }
.family-list-row.is-head .family-tag-role { background: var(--fill); color: var(--fill-ink); }
.family-editor.is-compact { gap: 0.5rem; }
/* چیدمانِ grid دکمه را تمام‌عرض می‌کند و متنش وسط می‌افتد؛ زیرِ فهرست، از سرِ سطر بماند. */
.family-more { justify-self: start; margin-inline-start: 0.5rem; font-size: var(--fs-s); }
.family-editor.is-compact .family-actions {
  margin-block-start: 0.25rem;
  padding-block-start: 0.625rem;
  border-block-start: 1px dashed var(--line);
}

/* ---------- تاریخچه: ردیفِ بسته فقط پایه؛ باز که شد همه‌چیز ---------- */
.hist-body { display: grid; gap: 0.75rem; }
.hist-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.hist-facts > div { display: grid; gap: 0.125rem; min-inline-size: 0; }
.hist-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.hist-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.hist-items tr.is-other > td { background: var(--surface-2); }
.hist-items td strong { font-variant-numeric: tabular-nums; }

@media print {
  .tab-glance, .plan-pickbar, .btn-new-plan, .plan-step-actions, .plan-step-channels, .family-more { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-pickbar { transition: none; }
}

/* ==========================================================================
   مهر ۱۴۰۵ (دورِ دوم) — ویرایشِ «در یک نگاه» و «بعداً»ی رضایت‌نامه
   ========================================================================== */

/* ---------- ویرایشِ «در یک نگاه»: جابه‌جایی، پنهان کردن و آوردنِ خانه‌ها ---------- */
/* در ویرایش قاب سرمه‌ای می‌شود و هر خانه خط‌چین، با دستگیره، پیکان و چشم. خانه‌ی پنهان کم‌رنگ است ولی سرِ جایش
   می‌ماند تا کاربر ببیند چه چیزی را کجا برمی‌گرداند. هر تغییر همان لحظه ذخیره می‌شود. */
.tab-glance-edit.is-active { border-color: var(--fill); background: var(--fill); color: var(--fill-ink); }
.tab-glance-edit.is-active:hover { border-color: var(--fill-strong); background: var(--fill-strong); color: var(--fill-ink); }
.tab-glance.is-editing { border-color: var(--navy-700); }
.tab-glance.is-editing::before { background: var(--navy-700); }

/* :where تا رنگِ حالت‌ها (بدهکار، کهنه…) هنوز دیده شود. */
:where(.tab-glance-cells.is-editing) .glance-cell {
  border-color: var(--line-strong);
  border-style: dashed;
  background: var(--surface);
  cursor: grab;
}
.glance-cell.is-editable { user-select: none; }
.glance-cell-tools { display: flex; align-items: center; gap: 0.125rem; margin-block-end: 0.125rem; }
.glance-cell-tools .icon-btn { inline-size: 1.75rem; block-size: 1.75rem; }
.glance-cell-grip { display: inline-flex; margin-inline-end: auto; color: var(--ink-3); cursor: grab; }
.glance-cell-extra {
  margin-inline-end: 0.25rem;
  padding-inline: 0.375rem;
  border-radius: var(--r-pill);
  background: var(--cyan-50);
  color: var(--navy-800);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.glance-cell.is-hidden-cell { opacity: 0.55; background: var(--surface-2); }
.glance-cell.is-hidden-cell .glance-value { color: var(--ink-3); }
.glance-cell.is-dragging { opacity: 0.35; cursor: grabbing; }
.glance-cell.is-drop-target { outline: 2px solid var(--cyan-500); outline-offset: 2px; }
.glance-cell-tools [data-toggle-cell][aria-pressed="false"] { color: var(--ink-3); }
.tab-glance-sub [class~="num"] { white-space: nowrap; }

/* ---------- «بعداً» در قدمِ امضا ---------- */
/* کهربایی و خط‌چین: قدم رد نشده، به بعد موکول شده — همان رنگِ برچسبِ «بی‌رضایت‌نامه»ی سطرِ طرح. */
.plan-step.is-later { border-style: dashed; border-color: var(--amber-500); background: var(--amber-50); }
.plan-step.is-later .plan-step-no { border-color: var(--amber-500); background: var(--surface); color: var(--amber-700); }
.plan-step.is-later + .plan-step::before { background: var(--amber-500); }
.plan-step-tag {
  display: inline-block;
  margin-inline-end: 0.375rem;
  padding-inline: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--amber-100);
  color: var(--amber-700);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.choice-card.choice-card-later { border-style: dashed; }
.choice-card.choice-card-later:has(input:checked) {
  border-color: var(--amber-500);
  background: var(--amber-50);
  color: var(--amber-700);
  box-shadow: inset 0 0 0 1px var(--amber-500);
}

@media (prefers-reduced-motion: reduce) {
  .glance-cell.is-dragging { transition: none; }
}

/* ==========================================================================
   مهر ۱۴۰۵ — نوبت‌ها: تب‌های یک‌پارچه، نوارِ ساعت و برنامه به اندازه‌ی مدت
   ========================================================================== */

/* ---------- تب‌های بخش‌ها (`SectionTabs`): همان نوارِ تب‌های پرونده ---------- */
/* نوبت‌ها، صندوق، چک‌ها، هدیه، حسابداری، تسویه… دکمه‌اند نه پیوند (بخش‌های همان صفحه‌اند)، پس ظاهرِ پیش‌فرضِ دکمه کنار
   می‌رود تا با تب‌های بیمار یکی باشند. */
.section-tabs { position: relative; margin-block-end: 1rem; }
.section-tab-badge {
  min-inline-size: 1.25rem;
  padding-inline: 0.375rem;
  border-radius: var(--r-pill);
  background: var(--amber-100);
  color: var(--amber-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.section-tabs .patient-tab {
  margin: 0;
  border: 0;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.section-tabs .patient-tab.active { border-block-end-color: var(--navy-700); }
.section-tabs .patient-tab:focus-visible { outline: 2px solid var(--navy-700); outline-offset: -2px; border-radius: var(--r-s); }

@media (max-width: 48rem) {
  .section-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .section-tabs .patient-tab { flex: none; white-space: nowrap; }
}

/* ---------- خانه‌ی «ساعتِ نوبت»: از … تا … و مدت، با نوارِ ساعت زیرش ---------- */
/* سرِ خانه یک نوارِ سه‌تکه است — شروع، پایان، مدت — که چشم آن را یک جمله می‌خواند: «از ۱۰:۳۰ تا ۱۱:۱۵، مدت ۴۵». واحدِ
   مدت در برچسبش است نه کنارِ عدد، تا روی گوشی هم سه تکه در یک ردیف جا شوند. */
.time-field { margin: 0; padding: 0; border: 0; min-inline-size: 0; gap: 0.5rem; }
.time-field > legend { margin-block-end: 0.25rem; padding: 0; }

.time-field-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  overflow: hidden;
}
.time-field-part {
  display: grid;
  align-content: center;
  min-inline-size: 0;
  padding: 0.3125rem 0.75rem 0.375rem;
}
.time-field-part + .time-field-part { border-inline-start: 1px solid var(--line); }
.time-field-part > label,
.time-field-caption { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; }
.time-field-part:focus-within { background: var(--cyan-50); box-shadow: inset 0 -2px 0 var(--navy-700); }
.time-field-part.is-invalid { background: var(--alert-50); box-shadow: inset 0 -2px 0 var(--alert-600); }

.time-field .time-field-part input {
  inline-size: 100%;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--navy-900);
  font-size: var(--fs-l);
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.time-field .time-field-part input:focus { outline: none; box-shadow: none; }
.time-field .time-field-part input::placeholder { color: var(--ink-3); font-weight: 500; }
.time-field-end output { color: var(--ink-2); font-size: var(--fs-l); font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }

/* ---------- نوارِ ساعت ---------- */
/* هر ردیف یک ساعت و هر خانه یک گام. خالی سفید و دکمه است، «جا ندارد» هاشور، گذشته محو؛ نوبت روی خانه‌هایی که
   مدتش می‌پوشاند پُرِ سرمه‌ای می‌شود — و کهربایی اگر شروعش در خانه‌های خالی نیست. */
.slot-ruler { display: grid; gap: 0.5rem; }
.slot-ruler:empty { display: none; }
.slot-ruler .hint { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.slot-ruler-loading { display: grid; gap: 0.375rem; }

.slot-ruler-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.8;
}
.slot-ruler-status.is-free { color: var(--ok-700); }
.slot-ruler-status:is(.is-busy, .is-past, .is-outside) { color: var(--amber-700); }
.slot-ruler-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.625rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--navy-800);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.9;
  cursor: pointer;
}
.slot-ruler-jump:hover { border-color: var(--navy-700); background: var(--cyan-50); }
.slot-ruler-jump:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.slot-ruler-past { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }

.slot-ruler-grid { display: grid; gap: 0.5rem; }
.slot-ruler-part { display: grid; gap: 0.25rem; }
.slot-ruler-part-title { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; }
.slot-ruler-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: center; gap: 0.375rem; }
.slot-ruler-hour { color: var(--ink-2); font-size: var(--fs-s); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.slot-ruler-track {
  display: grid;
  grid-template-columns: repeat(var(--per-hour, 4), minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-s);
  background: var(--surface-2);
}

.slot-cell {
  display: grid;
  place-items: center;
  min-block-size: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: var(--ink-3);
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.slot-cell.is-free { background: var(--surface); color: var(--navy-800); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.slot-cell.is-free:hover { background: var(--cyan-50); box-shadow: inset 0 0 0 1px var(--navy-700); }
.slot-cell.is-free:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--navy-700); outline-offset: 1px; }
.slot-cell.is-busy { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--line) 4px 5px); color: var(--line-strong); }
.slot-cell.is-past { background: transparent; color: var(--line-strong); }

/* بلوکِ نوبت: گوشه‌ها فقط سرِ شروع و پایان گرد، تا چند خانه یک تکه خوانده شوند. */
.slot-cell.is-covered { border-radius: 0; background: var(--fill); color: var(--fill-ink); box-shadow: none; font-weight: 600; }
.slot-cell.is-covered.is-start { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.slot-cell.is-covered.is-end { border-start-end-radius: 6px; border-end-end-radius: 6px; }
.slot-cell.is-covered.is-warn { background: var(--amber-100); color: var(--amber-700); }
.slot-cell.is-covered.is-free:hover { background: var(--fill-strong); }

.slot-ruler-grid.is-dense .slot-cell { font-size: 0.625rem; }

.slot-ruler-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; margin: 0; color: var(--ink-3); font-size: var(--fs-xs); }
.slot-ruler-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.slot-ruler-legend span::before { content: ""; inline-size: 0.875rem; block-size: 0.625rem; border-radius: 3px; }
.slot-ruler-legend .is-free::before { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.slot-ruler-legend .is-busy::before { background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--line-strong) 3px 4px); }
.slot-ruler-legend .is-block::before { background: var(--fill); }

/* فرم با نوارِ ساعت بلندتر از صفحه شد و ستونِ کناری خودش اسکرول می‌خورد؛ «ثبت نوبت» پایینِ همان ستون می‌چسبد تا
   بی اسکرول دمِ دست باشد. */
@container appt (min-width: 56rem) {
  .booking-card > .form-actions:last-child {
    position: sticky;
    inset-block-end: 0;
    z-index: 2;
    margin-block-end: -1.125rem;
    padding-block: 0.875rem 1.125rem;
    background: linear-gradient(transparent, var(--surface) 0.875rem);
  }
}

/* ---------- برنامه‌ی روز به اندازه‌ی مدت ---------- */
/* هر نیم ساعت هم‌قدِ یک ردیفِ معمولی (۲٫۵ پیکسل برای هر دقیقه): نوبتِ یک ساعته دو برابر و نود دقیقه‌ای سه برابر. ردیفی
   که محتوایش بلندتر است، قدِ محتوا را دارد. ستونِ ساعت شروع و پایان است با «خطِ اندازه»ی مدت میانشان. */
.appointment-row {
  --row-minute: 2.5px;
  align-items: start;
  min-block-size: calc(var(--len, 30) * var(--row-minute));
}
.appointment-time { align-self: stretch; display: flex; flex-direction: column; }
.appointment-length {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  min-block-size: 1.125rem;
  margin-block: 0.125rem;
  margin-inline-start: 0.3125rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 1px dashed var(--line-strong);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 400;
  white-space: nowrap;
}
.appointment-length::before,
.appointment-length::after {
  content: "";
  position: absolute;
  inset-inline-start: -4px;
  inline-size: 7px;
  block-size: 1px;
  background: var(--line-strong);
}
.appointment-length::before { inset-block-start: 0; }
.appointment-length::after { inset-block-end: 0; }
.appointment-end { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 500; }

/* جای خالیِ میانِ دو نوبت: خطِ کوتاهِ خط‌چین با مدتش — به مقیاس نیست، فقط نشان است. */
.appointment-gap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 2rem;
  padding-inline: 0.75rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}
.appointment-gap-line { flex: 1; min-inline-size: 1rem; border-block-start: 1px dashed var(--line-strong); }
.appointment-gap-text { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.375rem; }
.appointment-gap-text strong { color: var(--ok-700); font-weight: 600; }
.appointment-gap.is-past .appointment-gap-text strong { color: var(--ink-3); font-weight: 500; }
.appointment-gap .btn { flex: none; }

/* نوبتی که همین حالا ثبت شد، یک لحظه روشن می‌شود — در فهرست و در نمای ستونی. */
.appointment-row.is-just-booked,
.day-card.is-just-booked .day-card-main { animation: appt-landed 2.6s ease-out 1; }
@keyframes appt-landed {
  0%, 35% { background-color: var(--cyan-100); box-shadow: 0 0 0 2px var(--cyan-500); }
  100% { background-color: var(--surface); box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .appointment-row.is-just-booked,
  .day-card.is-just-booked .day-card-main { animation: none; box-shadow: 0 0 0 2px var(--cyan-500); }
}

/* ==========================================================================
   مهر ۱۴۰۵ — صندوق روز: تب‌ها، «در یک نگاه»، نوارِ روز و تاریخچه‌ی هر تب
   ========================================================================== */

/* هر تب: «در یک نگاه»، نوارِ روز، کارِ خودش و تاریخچه‌اش، به همین ترتیب و با فاصله‌ی یکسان.
   minmax(0, 1fr): ستون نباید به پهنای جدولِ درونش کش بیاید؛ جدول در table-wrapِ خودش می‌لغزد، نه کلِ صفحه. */
.cash-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.cash-section > .tab-glance,
.cash-section > .day-nav { margin-block-end: 0; }
.cash-section > .account-layout { margin-block-end: 0; }
/* روی گوشی دکمه‌ی کنارِ عنوان به خطِ بعد می‌رود تا توضیحِ زیرِ عنوان در ستونی باریک خُرد نشود. */
@media (max-width: 40rem) {
  .cash-section .panel-head { flex-wrap: wrap; gap: 0.5rem 1rem; }
}

/* تاریخچه‌ی زیرِ هر تب: جدولی آرام، روزِ بازِ صفحه روشن. */
.cash-history .panel-sub strong { font-weight: 600; }
.cash-history tr.is-current td { background: var(--cyan-50); }
.cash-unclosed-count { color: var(--amber-700); }

/* پیشنهادِ «واریزِ مازادِ تنخواه»: یک خطِ آرام بالای فرمِ بستن، نه هشدار. */
.cash-float-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-block-end: 0.875rem;
  padding: 0.625rem 0.875rem;
  border: 1px dashed var(--cyan-500);
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-900);
  font-size: var(--fs-s);
  line-height: 1.8;
}
.cash-float-hint > span { flex: 1 1 14rem; }
.cash-float-hint > .icon { color: var(--cyan-500); }

/* هزینه‌های پرتکرار: تراشه‌هایی که یک کلیک حساب را می‌گذارند. */
.drawer-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-end: 0.75rem; }
.drawer-quick-label { color: var(--ink-3); font-size: var(--fs-xs); }
.chip-link.is-active { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); font-weight: 600; }

/* گردش‌های کشوی سی روز، روزبه‌روز. */
.drawer-history { display: grid; gap: 1rem; }
.drawer-history-day { display: grid; gap: 0.25rem; }
.drawer-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0;
  padding-block-end: 0.25rem;
  border-block-end: 1px solid var(--line-strong);
  font-size: var(--fs-s);
}
.drawer-history-head .muted { font-weight: 400; font-size: var(--fs-xs); }

/* ---------- دفتر چک‌ها: تب‌ها، تقویمِ سررسید، واگذاریِ گروهی، پرونده‌ی چک (مهر ۱۴۰۵) ---------- */

.cheque-section > .tab-glance,
.cheque-section > .day-nav,
.cheque-section > .table-wrap,
.cheque-section > .result-count { margin-block-end: 0; }
.cheque-section > .cheque-toolbar { margin-block-end: 0; }
.cheque-table tr.is-current td { background: var(--cyan-50); }
.cheque-table .col-check { inline-size: 2.25rem; text-align: center; }
.cheque-table .col-check input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--navy-800); }
.cheque-last-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; max-inline-size: 22rem; }

/* تقویمِ سررسید: چهارده روز، ستونِ هر روز به اندازه‌ی مبلغش — روزهای سنگین از دور پیدا باشند. */
.due-strip {
  display: grid;
  grid-template-columns: repeat(14, minmax(2.5rem, 1fr));
  gap: 0.25rem;
  overflow-x: auto;
  padding-block-end: 0.125rem;
  scrollbar-width: thin;
}
.due-strip-day {
  display: grid;
  justify-items: center;
  gap: 0.125rem;
  padding: 0.375rem 0.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
}
.due-strip-day:hover { border-color: var(--line-strong); }
.due-strip-day:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.due-strip-day.is-today { border-color: var(--cyan-500); }
.due-strip-day.is-active { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); box-shadow: inset 0 0 0 1px var(--navy-700); }
.due-strip-name { font-size: var(--fs-xs); color: var(--ink-3); }
.due-strip-date { font-weight: 600; font-size: var(--fs-s); color: var(--ink); }
.due-strip-bar {
  display: flex;
  align-items: flex-end;
  inline-size: 0.625rem;
  block-size: 2.25rem;
  border-radius: var(--r-s);
  background: var(--surface-2);
  overflow: hidden;
}
.due-strip-bar span { inline-size: 100%; background: var(--amber-500); border-radius: var(--r-s); }
.due-strip-day.is-active .due-strip-bar span { background: var(--navy-700); }
.due-strip-count { font-size: var(--fs-xs); color: var(--ink-2); }
.due-strip-day.is-empty .due-strip-count { color: var(--ink-3); }

.cheque-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cyan-100);
  border-radius: var(--r-m);
  background: var(--cyan-50);
  color: var(--navy-900);
}

/* نوارِ واگذاریِ گروهی: چسبیده به پایینِ صفحه تا هنگامِ تیک زدنِ فهرستِ بلند دیده شود. */
.deposit-bar {
  position: sticky;
  inset-block-end: 0.75rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--navy-700);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: 0 0.75rem 1.5rem rgb(13 42 82 / 0.16);
}
.deposit-bar-text, .deposit-bar-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.deposit-bar-form select { min-inline-size: 12rem; }
.deposit-bar > .error-notice, .deposit-bar > [role='alert'] { flex-basis: 100%; }

/* پرونده‌ی چک: برگه‌ای از لبه‌ی صفحه، روی موبایل تمام‌عرض. */
.cheque-file {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 41;
  display: grid;
  align-content: start;
  gap: 1rem;
  inline-size: min(36rem, 100vw);
  margin: 0;
  padding: 1rem 1.125rem 2rem;
  overflow-y: auto;
  border-radius: 0;
  border-inline-start: 1px solid var(--line);
  box-shadow: 0 0 2.5rem rgb(0 0 0 / 0.22);
}
.cheque-file-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.cheque-file-titles { flex: 1; min-inline-size: 0; }
.cheque-file-titles .eyebrow { margin: 0; }
.cheque-file-titles h2 { margin: 0.125rem 0; font-size: var(--fs-xl); color: var(--navy-900); }
.cheque-file-titles h2:focus { outline: none; }
.cheque-file-titles h2 small { font-size: var(--fs-s); font-weight: 400; color: var(--ink-3); }
.cheque-file-who { display: flex; flex-wrap: wrap; gap: 0.25rem 0.625rem; margin: 0; }

.cheque-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.cheque-facts div { display: grid; gap: 0.125rem; }
.cheque-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.cheque-facts dd { margin: 0; color: var(--ink); }

.cheque-recovery { display: grid; gap: 0.375rem; padding: 0.625rem 0.875rem; border-radius: var(--r-m); border: 1px solid var(--alert-200); background: var(--alert-50); }
.cheque-recovery.is-done { border-color: var(--ok-700); background: var(--ok-50); }
.cheque-recovery-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.cheque-recovery.is-chasing strong { color: var(--alert-700); }
.cheque-recovery.is-done strong { color: var(--ok-700); }
.cheque-recovery-bar { block-size: 0.5rem; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.cheque-recovery-bar span { display: block; block-size: 100%; border-radius: var(--r-pill); background: var(--ok-700); }

.cheque-file-section { display: grid; gap: 0.5rem; }
.cheque-file-section h3 { margin: 0; font-size: var(--fs-m); color: var(--navy-900); }
.cheque-for-line { display: flex; align-items: center; gap: 0.375rem; margin: 0; }

.cheque-services { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.cheque-services li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--r-s);
  background: var(--surface-2);
}
.cheque-services li.is-voided { opacity: 0.6; text-decoration: line-through; }

.cheque-file-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cheque-form { display: grid; gap: 0.625rem; }
.cheque-form .chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block-start: 0.375rem; }
.cheque-note-kinds { flex-wrap: wrap; }

.cheque-notes { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cheque-notes li { display: grid; gap: 0.125rem; padding: 0.5rem 0.75rem; border-inline-start: 3px solid var(--cyan-500); border-radius: var(--r-s); background: var(--surface-2); }
.cheque-notes p { margin: 0; }
.cheque-note-kind { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--navy-800); font-size: var(--fs-s); font-weight: 600; }
.cheque-note-next.is-due { color: var(--amber-700); font-weight: 600; }

/* سرگذشت و تاریخچه: یک خط برای هر رخداد، آیکونِ رنگیِ همان نوع. */
.cheque-timeline, .cheque-events { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.cheque-event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; }
.cheque-timeline .cheque-event { flex-wrap: nowrap; }
.cheque-timeline .cheque-event > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.5rem; }
.cheque-event-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  align-self: center;
}
.cheque-event.is-cleared .cheque-event-icon, .cheque-event.is-covered .cheque-event-icon { background: var(--ok-50); color: var(--ok-700); }
.cheque-event.is-bounced .cheque-event-icon { background: var(--alert-50); color: var(--alert-700); }
.cheque-event.is-deposited .cheque-event-icon { background: var(--cyan-50); color: var(--navy-800); }
.cheque-event.is-note .cheque-event-icon, .cheque-event.is-reminder .cheque-event-icon { background: var(--amber-50); color: var(--amber-700); }
.cheque-event-time { color: var(--ink-3); font-size: var(--fs-xs); min-inline-size: 2.5rem; }
.cheque-event-main { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; text-align: start; }
.cheque-event-text { color: var(--ink-2); }
.cheque-event-by { font-size: var(--fs-xs); }

.cheque-patient-summary { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.5rem; }

@media (max-width: 40rem) {
  .due-strip { grid-template-columns: repeat(14, 2.75rem); }
  .deposit-bar { inset-block-end: 0.5rem; }
  .deposit-bar-form select { min-inline-size: 0; flex: 1; }
  .cheque-file { inline-size: 100vw; padding-inline: 1rem; }
  .cheque-services li { grid-template-columns: 1fr auto; }
  .cheque-services li > .muted { display: none; }
}

@media print {
  .due-strip, .deposit-bar, .cheque-filter, .cheque-history, .cheque-file { display: none !important; }
}
.cheque-form > .chip-link, .cheque-form > .segmented { justify-self: start; }

/* ---------- بخشِ «هدیه»: کارت، مسابقه، قرعه‌کشی، تولد (مهر ۱۴۰۵) ---------- */

.gift-section > .tab-glance, .gift-section > .panel { margin-block-end: 0; }
.gift-card-print-services { margin: 0; font-size: 10.5pt; font-weight: 700; line-height: 1.5; }

.gift-issue .panel-head { margin-block-end: 0; }
.gift-issue.is-open .panel-head { margin-block-end: 0.75rem; }
.gift-issue-form { display: grid; gap: 0.75rem; }
.gift-issue-form > .segmented { justify-self: start; }
.gift-issue-form .chip-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block-start: 0.375rem; }
.gift-issued-actions { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; }
.gift-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin: 0; }

.gift-services { display: grid; gap: 0.5rem; }
.gift-service-options { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.gift-service-chosen { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.gift-service-chosen li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-s);
  background: var(--surface-2);
}
.gift-qty { display: inline-flex; align-items: center; gap: 0.25rem; }
.gift-qty .icon-btn { inline-size: 1.75rem; block-size: 1.75rem; font-weight: 700; }

.gift-tags { flex-wrap: wrap; }
.gift-tags-inline { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-inline-start: 0.25rem; vertical-align: middle; }
.gift-tags-inline .pill { display: inline-flex; align-items: center; gap: 0.25rem; }
.gift-card-services { max-inline-size: 16rem; }

.gift-use-bar { display: block; inline-size: 100%; max-inline-size: 10rem; block-size: 0.4rem; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.gift-use-bar span { display: block; block-size: 100%; border-radius: var(--r-pill); background: var(--ok-700); }

/* کارزارها: هر مسابقه یا قرعه‌کشی یک کارت؛ کارتِ باز لبه‌ی سرمه‌ای، پایان‌یافته آرام‌تر. */
.campaign-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 0.625rem;
}
.campaign-card {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.campaign-card:hover { border-color: var(--line-strong); }
.campaign-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.campaign-card.is-active { border-color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--navy-700); background: var(--cyan-50); }
.campaign-card.is-finished, .campaign-card.is-cancelled { background: var(--surface-2); }
.campaign-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.campaign-card-head strong { color: var(--navy-900); }
.campaign-card-line { color: var(--ink-2); font-size: var(--fs-s); }
.campaign-card-prize { color: var(--amber-700); font-size: var(--fs-s); font-weight: 600; }

.campaign-form { display: grid; gap: 0.75rem; margin-block-end: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--line); }
.campaign-metrics { flex-wrap: wrap; inline-size: auto; }
.campaign-detail .panel-head { align-items: flex-start; flex-wrap: wrap; gap: 0.5rem 1rem; }
.campaign-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.campaign-prizes { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.campaign-prizes li { display: inline-flex; align-items: center; gap: 0.375rem; }
.campaign-subhead { margin: 1rem 0 0.5rem; font-size: var(--fs-m); color: var(--navy-900); }
.campaign-score-form { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.campaign-standings tr.is-prize td:first-child { color: var(--amber-700); font-weight: 700; }
.campaign-standings tr.is-prize td { background: var(--amber-50); }

.prize-editor { display: grid; gap: 0.5rem; margin: 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.prize-editor legend { padding-inline: 0.25rem; color: var(--navy-900); font-weight: 600; }
.prize-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.prize-row .prize-amount, .prize-row .prize-title { flex: 1 1 10rem; min-inline-size: 0; }
.prize-rank {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: var(--amber-50);
  color: var(--amber-700);
  font-weight: 700;
}

.raffle-proof { display: grid; gap: 0.5rem; margin-block-start: 1rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.raffle-proof-codes { display: grid; gap: 0.375rem; margin: 0; }
.raffle-proof-codes div { display: grid; gap: 0.125rem; }
.raffle-proof-codes dt { color: var(--ink-3); font-size: var(--fs-xs); }
.raffle-proof-codes dd { margin: 0; }
.raffle-proof-codes code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-xs); word-break: break-all; }

@media (max-width: 40rem) {
  .gift-service-chosen li { grid-template-columns: 1fr auto auto; }
  .gift-service-chosen li > bdi { display: none; }
  .campaign-actions { inline-size: 100%; }
}

@media print {
  .gift-issue, .gift-tags, .campaign-actions, .campaign-score-form { display: none !important; }
}
.gift-assigned { display: grid; gap: 0.375rem; padding: 0.625rem 0.75rem; border: 1px solid var(--ok-700); border-radius: var(--r-m); background: var(--ok-50); }
.gift-assigned-list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.gift-assigned-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }

/* ==========================================================================
   مهر ۱۴۰۵ — حسابداری: تب‌های یک‌پارچه، «در یک نگاه»ِ هر تب، نوارِ بازه با پیکان، گردشِ پول، ماه به ماه، پزشکان،
   کنترل‌های دفتر و تاریخچه‌ی هر تب
   ========================================================================== */

/* نوارِ بازه به شکلِ نوارِ روزِ صندوق: قبل / نامِ دوره / بعد، بعد بازه‌های آماده و شعبه. */
.acc-filters.day-nav { flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; }
.acc-period-steps { flex: 1 1 auto; }
.acc-period-steps .acc-period-label {
  margin: 0;
  min-inline-size: 7.5rem;
  color: var(--navy-900);
  font-size: var(--fs-m);
  text-align: center;
}
.acc-section > .acc-custom, .acc-section > .error-notice { margin-block: 0; }

/* «گردشِ پول»: دو ستونِ «از کجا آمد / به کجا رفت». */
.acc-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
  align-items: start;
}
.acc-flow-total { color: var(--navy-900); font-size: var(--fs-l); font-variant-numeric: tabular-nums; }
.acc-flow-panel.is-in .acc-meter span { background: var(--ok-700); }
.acc-flow-panel.is-in .acc-flow-total { color: var(--ok-700); }
.acc-flow-panel.is-out .acc-flow-total { color: var(--amber-700); }
.acc-flow-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-inline-size: 0; }
.acc-flow-name .icon { flex: none; color: var(--ink-3); }
.acc-flows li > .num .unit, .acc-methods li > .num .unit { margin-inline-start: 0.25rem; }
.acc-methods .acc-meter span { background: var(--fill); }
.acc-methods li > .num { text-align: end; }
.acc-methods .note-line { font-weight: 400; }

.acc-transfers { display: grid; gap: 0.375rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.acc-transfers li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  padding-block: 0.375rem;
  border-block-end: 1px dashed var(--line);
  font-size: var(--fs-s);
}
.acc-transfers li > span:first-child { display: inline-flex; align-items: center; gap: 0.25rem; }
.acc-transfers .icon { color: var(--ink-3); }

.acc-receivables tbody tr[data-receivable] td:first-child { padding-inline-start: 1.25rem; }

/* «ماه به ماه» */
.acc-months tr.is-loss [data-month-profit] { color: var(--amber-700); font-weight: 600; }
.acc-months tr.is-picked th { box-shadow: inset 3px 0 0 var(--cyan-500); }
[dir="rtl"] .acc-months tr.is-picked th { box-shadow: inset -3px 0 0 var(--cyan-500); }
.acc-meter-inline { display: block; inline-size: 100%; min-inline-size: 4rem; margin-block-start: 0.25rem; }
.acc-meter-inline span { background: var(--fill); }
.acc-compare-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.acc-compare .acc-subtotal th, .acc-compare .acc-subtotal td { font-weight: 600; }

/* «پزشکان»: یک کارت برای هر پزشک — جدولِ دوازده‌ستونه روی صفحه‌ی کنارِ نوارِ کناری جا نمی‌شد و طلب و سهم بیرون می‌افتادند. */
.acc-doctor-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.acc-doctor-totals div { display: grid; gap: 0.125rem; }
.acc-doctor-totals dt { color: var(--ink-3); font-size: var(--fs-xs); }
.acc-doctor-totals dd { margin: 0; color: var(--navy-900); font-weight: 600; }
.acc-doctor-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 0.875rem; }
.acc-doctor-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.acc-doctor-card.is-loose { border-style: dashed; background: var(--surface-2); }
.acc-doctor-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem; }
.acc-doctor-name { margin: 0; color: var(--navy-900); font-size: var(--fs-m); font-weight: 600; }
.acc-doctor-card.is-loose .acc-doctor-name { color: var(--ink-2); }
.acc-doctor-net { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; }
.acc-doctor-net strong { color: var(--navy-900); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.acc-doctor-change { font-size: var(--fs-s); font-weight: 600; }
.acc-doctor-change.is-up { color: var(--ok-700); }
.acc-doctor-change.is-down { color: var(--amber-700); }
.acc-doctor-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 1rem; margin: 0; }
.acc-doctor-facts div { display: flex; justify-content: space-between; gap: 0.5rem; padding-block: 0.25rem; border-block-end: 1px dashed var(--line); font-size: var(--fs-s); }
.acc-doctor-facts dt { color: var(--ink-3); }
.acc-doctor-facts dd { margin: 0; font-weight: 600; }
.acc-doctor-trend { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-xs); }
.acc-owing { color: var(--amber-700); font-weight: 600; }
.acc-spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 1.75rem;
  inline-size: 4.5rem;
  vertical-align: middle;
}
.acc-spark-bar { flex: 1 1 0; min-block-size: 2px; border-radius: 2px 2px 0 0; background: var(--line-strong); }
.acc-spark-bar.is-last { background: var(--fill); }

/* کنترل‌های دفتر */
.acc-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}
.acc-check.is-off { grid-column: 1 / -1; }
.acc-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--r-s, 0.5rem);
}
.acc-check.is-off { background: var(--amber-50); }
.acc-check-mark {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: var(--ok-50);
  color: var(--ok-700);
}
.acc-check.is-off .acc-check-mark { background: var(--amber-100); color: var(--amber-700); }
.acc-check-body { display: grid; gap: 0.125rem; min-inline-size: 0; }
.acc-check-body strong { font-size: var(--fs-s); font-weight: 600; }
.acc-check-detail { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }
.acc-check.is-off .acc-check-detail { color: var(--amber-700); }

/* تاریخچه‌ی زیرِ هر تب و دفتر روزنامه */
.acc-late { margin-inline-start: 0.375rem; color: var(--amber-700); font-size: var(--fs-xs); }
.acc-history .cheque-event.is-reversed strong { text-decoration: line-through; color: var(--ink-3); }
.acc-more-link { display: inline-flex; align-items: center; gap: 0.25rem; margin-block-start: 0.5rem; font-size: var(--fs-s); }
.acc-revenue-parts { margin-block: 0.75rem 0; }
.acc-journal-filters .check-row { margin: 0; white-space: nowrap; }

@media (max-width: 40rem) {
  .acc-period-steps { flex-basis: 100%; justify-content: space-between; }
  .acc-period-steps .acc-period-label { flex: 1 1 auto; min-inline-size: 0; }
  .acc-check { grid-template-columns: auto minmax(0, 1fr); }
  .acc-check > .btn { grid-column: 2; justify-self: start; }
}

@media print {
  .acc-history, .acc-checks .btn, .acc-compare-pick, [data-months] .segmented, .acc-journal-filters .check-row { display: none !important; }
  .acc-spark-bar { background: #999; }
  .acc-spark-bar.is-last { background: #000; }
}

/* نُه تبِ حسابداری در یک ردیف؛ اگر جا نشد، نوار می‌لغزد، دو ردیف نمی‌شود. */
.section-tabs.acc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 0; }
.section-tabs.acc-tabs .patient-tab { flex: none; gap: 0.375rem; padding-inline: 0.625rem; white-space: nowrap; }
.acc-breakdown .acc-row-note { grid-column: 1 / -1; margin-block-start: -0.25rem; }

/* ==========================================================================
   مهر ۱۴۰۵ — تسویه‌ی پزشکان: تب‌های یک‌پارچه، «در یک نگاه»ِ هر تب، پرونده‌ی پزشک و تاریخچه‌ی هر تب
   ========================================================================== */

.settle-section > .account-layout, .settle-section > .settle-doctors, .settle-section > .lead { margin-block-end: 0; }
.settle-section > .hint { margin: 0; }

/* نوارِ پزشکِ پرونده، به شکلِ نوارِ روز: قبل / تراشه‌ها / بعد. */
.settle-doctor-bar .day-nav-steps { flex-wrap: nowrap; }
.settle-doctor-bar .doctor-chips { flex: 1 1 auto; min-inline-size: 0; overflow-x: auto; scrollbar-width: thin; flex-wrap: nowrap; }
.settle-doctor-bar .doctor-chips .filter-chip { flex: none; }

.settle-profile .panel-head { align-items: flex-start; }
.settle-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.settle-profile-figures { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); margin-block-start: 0.75rem; }
.settle-profile-figures strong { font-size: var(--fs-l); }

/* ماه به ماهِ پزشک: سه نوار — کار، سهمِ تسویه‌شده، پرداخت. */
.settle-key-work::before { background: var(--line-strong); }
.settle-key-settled::before { background: var(--fill); }
.settle-key-paid::before { background: var(--ok-700); }
.settle-months { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.settle-months li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0.125rem 0.75rem; }
.settle-month-name { color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.settle-month-bars { display: grid; gap: 2px; }
.settle-bar { display: block; block-size: 0.375rem; min-inline-size: 1px; border-radius: var(--r-pill); }
.settle-bar-work { background: var(--line-strong); }
.settle-bar-settled { background: var(--fill); }
.settle-bar-paid { background: var(--ok-700); }
.settle-month-figures { grid-column: 2; color: var(--ink-3); font-size: var(--fs-xs); }

.settle-rule-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.settle-rule-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; padding-block: 0.375rem; border-block-end: 1px dashed var(--line); }
.settle-rule-list strong { color: var(--navy-900); font-size: var(--fs-m); }
.settle-rule-list .note-line { flex-basis: 100%; }

.settle-statement tr.is-paid td:nth-child(4), .settle-statement tr.is-cancelled td:nth-child(4) { color: var(--ok-700); }
.settle-statement tr.is-unpaid td, .settle-statement tr.is-cancelled td { background: var(--amber-50); }

.settle-recent { display: grid; margin: 0; padding: 0; list-style: none; }
.settle-recent li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--line);
}
.settle-recent li:last-child { border-block-end: 0; }
.settle-recent li.row-inactive { color: var(--ink-3); }

.settle-history .cheque-event.is-unpaid strong, .settle-history .cheque-event.is-cancelled strong { color: var(--amber-700); }
.settle-history .cheque-event.is-paid strong { color: var(--ok-700); }

@media (max-width: 40rem) {
  .settle-doctor-bar .day-nav-steps { flex-wrap: wrap; }
  .settle-doctor-bar .doctor-chips { flex-basis: 100%; order: -1; }
  .settle-months li { grid-template-columns: 1fr; }
  .settle-month-figures { grid-column: 1; }
  .settle-recent li { grid-template-columns: minmax(0, 1fr) auto; }
  .settle-recent li > .pill { grid-column: 2; }
}

@media print {
  .settle-history, .settle-doctor-bar, .settle-profile-actions { display: none !important; }
}

/* ---------- حسابِ کارکنان و خرید (مهر ۱۴۰۵) ---------- */

/* قسطِ مساعده زیرِ کسوراتِ هر نفر در لیستِ حقوق */
.payroll-loan {
  display: grid;
  gap: 0.25rem;
  margin-block-start: 0.5rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px dashed var(--line);
  text-align: start;
}
.payroll-loan label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-size: var(--fs-s); color: var(--ink-2); }
.payroll-loan small { color: var(--ink-3); }

/* کارتِ هر مساعده و هر تأمین‌کننده */
.loan-cards, .supplier-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
.loan-card, .supplier-card {
  display: grid;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  min-inline-size: 0;
}
.loan-card.is-open { border-inline-start: 3px solid var(--amber-500); }
.loan-card.is-settled { border-inline-start: 3px solid var(--ok-700); }
.loan-card.is-cancelled, .supplier-card.is-inactive { opacity: 0.7; }
.supplier-card.has-attention { border-inline-start: 3px solid var(--amber-500); }
.loan-card-head, .supplier-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }
.loan-card-head strong { margin-inline-end: auto; }
.supplier-card-head .link-button { margin-inline-end: auto; text-align: start; }
/* تنها ستونِ کارت باید بتواند کوچک شود، وگرنه عددهای بی‌شکستِ داخلش کارت را از قابش بیرون می‌زنند (۳۲۰ پیکسل). */
.loan-card, .supplier-card { grid-template-columns: minmax(0, 1fr); }
.loan-card-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
  gap: 0.5rem 0.875rem;
  margin: 0;
}
.loan-card-figures div { display: grid; gap: 0.125rem; min-inline-size: 0; }
.loan-card-figures dt { font-size: var(--fs-s); color: var(--ink-3); }
.loan-card-figures dd { margin: 0; font-weight: 600; }
.loan-card-figures dd small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); }
.loan-card-figures dd.is-owing, td .is-owing, .note-line.is-owing { color: var(--amber-700); }
.note-line.is-stale { color: var(--amber-700); }

.loan-progress {
  block-size: 0.375rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.loan-progress span { display: block; block-size: 100%; border-radius: inherit; background: var(--ok-700); }

.loan-repayments { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.loan-repayments li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--r-s);
  background: var(--surface-2);
  font-size: var(--fs-s);
}
.loan-repayments li > span:nth-child(2) { flex: 1 1 10rem; min-inline-size: 0; }
.loan-repayments li.is-voided { color: var(--ink-3); text-decoration: line-through; }
.loan-repayments li.is-voided .pill, .loan-repayments li.is-voided .note-line { text-decoration: none; }

/* فهرستِ فاکتورها: انتخابِ چند فاکتور برای یک پرداخت */
.purchase-table .col-check { inline-size: 2.25rem; text-align: center; }
.purchase-table .col-check input { inline-size: 1.125rem; block-size: 1.125rem; accent-color: var(--fill); }
.purchase-table tr.is-overdue td:first-child { box-shadow: inset -3px 0 0 var(--amber-500); }
[dir="ltr"] .purchase-table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--amber-500); }
.purchase-pick-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--cyan-300);
  border-radius: var(--r-m);
  background: var(--cyan-50);
}
.purchase-pick-bar > span { margin-inline-end: auto; }
.purchase-detail {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-2);
}
.purchase-detail .panel-head { margin: 0; }
.purchase-detail h3 { margin: 0; font-size: var(--fs-m); }
.purchase-meta { margin: 0; }

.search-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.search-row input { flex: 1 1 14rem; min-inline-size: 0; }

.quick-picks { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-block-start: 0.375rem; }

/* گزارشِ ماهانه‌ی خرید: دو میله‌ی هم‌مقیاس برای خرید و پرداخت */
.purchase-report .day-nav { display: flex; align-items: center; gap: 0.375rem; }
.purchase-report-sub { margin: 0.5rem 0 0; font-size: var(--fs-m); }
.month-bars { display: grid; gap: 0.1875rem; min-inline-size: 6rem; }
.month-bar { display: block; block-size: 0.4375rem; border-radius: var(--r-pill); min-inline-size: 2px; }
.month-bar.is-purchase, .month-key.is-purchase { background: var(--amber-500); }
.month-bar.is-paid, .month-key.is-paid { background: var(--ok-700); }
.month-key { display: inline-block; inline-size: 0.75rem; block-size: 0.5rem; border-radius: var(--r-pill); margin-inline: 0.25rem; vertical-align: middle; }

.staff-history .cheque-event.is-grant strong, .purchase-history .cheque-event.is-registered strong { color: var(--navy-700); }
.staff-history .cheque-event.is-payroll strong, .staff-history .cheque-event.is-cash strong,
.purchase-history .cheque-event.is-paid strong { color: var(--ok-700); }
.staff-history .cheque-event.is-void strong, .staff-history .cheque-event.is-cancel strong,
.purchase-history .cheque-event.is-voided strong, .purchase-history .cheque-event.is-cancelled strong { color: var(--amber-700); }

@media (max-width: 40rem) {
  .purchase-pick-bar { align-items: stretch; }
  .purchase-pick-bar > span { flex-basis: 100%; }
  .search-row .btn { flex: 1 1 auto; }
}

@media print {
  .purchase-history, .staff-history, .purchase-pick-bar { display: none !important; }
}

/* فرم‌های پنلیِ تازه (فاکتور، تأمین‌کننده، مساعده): فاصله‌ی یکسانِ بخش‌ها به‌جای حاشیه‌ی تک‌تکِ فیلدها */
.purchase-form, .supplier-form, .staff-grant { display: grid; gap: 0.875rem; }
.purchase-form > .panel-head, .supplier-form > .panel-head, .staff-grant > .panel-head { margin-block-end: 0; }
.purchase-form .form-actions, .supplier-form .form-actions, .staff-grant .form-actions { margin-block-start: 0.25rem; }
.supplier-profile .doctor-chips + .panel-head, .supplier-profile .field + .panel-head { margin-block-start: 0.875rem; }
.loan-card .settle-row-actions, .supplier-card .settle-row-actions { flex-wrap: wrap; }

/* ---------- کالای فاکتور در انبار و هزینه‌های ماهانه (مهر ۱۴۰۵) ---------- */
.purchase-goods { display: grid; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.purchase-goods-table select { min-inline-size: 10rem; }
.purchase-goods-table .cell-input { min-inline-size: 5rem; }
.purchase-detail-goods { display: grid; gap: 0.375rem; }
.purchase-detail-goods h4 { margin: 0; font-size: var(--fs-s); color: var(--ink-2); }

.recurring-form {
  display: grid;
  gap: 0.875rem;
  margin-block-end: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface-2);
}
.recurring-form h3 { margin: 0; font-size: var(--fs-m); }
.recurring-status {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.375rem 0.625rem;
  border-radius: var(--r-s);
  background: var(--surface-2);
  font-size: var(--fs-s);
}
.recurring-status.is-owing { background: var(--amber-50); color: var(--amber-700); }
.recurring-status.is-stale { background: var(--amber-50); color: var(--ink-2); }
.recurring-status.is-credit { background: var(--ok-50); color: var(--ok-700); }
[data-recurring] > .panel-head { flex-wrap: wrap; }
[data-recurring] > .panel-head .settle-row-actions { flex-wrap: wrap; max-inline-size: 100%; }
[data-recurring] > .panel-head .btn { max-inline-size: 100%; white-space: normal; }

/* ---------- سوابقِ پیش از سامانه (مهر ۱۴۰۵) ---------- */
.legacy-panel > .panel-head { flex-wrap: wrap; }
.legacy-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; max-inline-size: 100%; }
.legacy-head-actions .btn { max-inline-size: 100%; white-space: normal; }
.legacy-form {
  display: grid;
  gap: 0.625rem;
  margin-block-end: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface-2);
}
.legacy-rows select { min-inline-size: 6.5rem; }
.legacy-rows .cell-input { min-inline-size: 6rem; }
.legacy-rows .legacy-title-input { min-inline-size: 12rem; }
.legacy-rows .legacy-tooth-input { min-inline-size: 3.5rem; inline-size: 3.5rem; }
.legacy-rows .jdate { min-inline-size: 9.5rem; }
.legacy-form-effect { margin: 0; color: var(--ink-2); }
.legacy-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.legacy-table .pay-state { margin-block-start: 0.25rem; }
.legacy-row.is-voided td { color: var(--ink-3); }
.legacy-void { display: grid; gap: 0.625rem; }
.legacy-void p { margin: 0; }

/* صفحه‌ی درون‌ریزی */
.legacy-import-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.legacy-import-source { display: grid; gap: 0.75rem; }
.legacy-import-source textarea { min-block-size: 8rem; font-family: var(--font-mono, monospace); font-size: var(--fs-s); }
.legacy-import-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.legacy-import-summary .pill { font-size: var(--fs-s); }
.legacy-import-issues { max-block-size: 22rem; overflow: auto; }
.legacy-columns { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; color: var(--ink-2); }
.legacy-columns code { font-family: inherit; font-weight: 600; }
.legacy-subtitle { margin: 1rem 0 0.5rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.legacy-help summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-s); }
.legacy-help[open] summary { margin-block-end: 0.5rem; }
.legacy-panel .table-wrap, [data-legacy-imports] .table-wrap { container-type: inline-size; }

/* ---------- حضور و غیاب (مهر ۱۴۰۵) ---------- */
/* صفحه‌ی اسکن: روی گوشی، یک کارت وسطِ صفحه. رنگِ نشان همان وضع است — سبز ثبت، کهربایی منتظر، قرمز نشد. */
.clock-page { display: grid; gap: 1rem; justify-items: center; padding-block: clamp(0.5rem, 4vw, 2.5rem); }
.clock-card {
  display: grid;
  justify-items: center;
  gap: 0.625rem;
  inline-size: min(100%, 28rem);
  padding: 1.75rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  text-align: center;
}
.clock-card h1 { margin: 0; font-size: var(--fs-xl); line-height: 1.5; }
.clock-card p { margin: 0; line-height: 1.9; }
.clock-mark {
  display: grid;
  place-items: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  background: var(--cyan-50);
  color: var(--navy-800);
}
.clock-ok .clock-mark { background: var(--ok-50); color: var(--ok-700); }
.clock-pending .clock-mark { background: var(--amber-50); color: var(--amber-700); }
.clock-failed .clock-mark { background: var(--alert-50); color: var(--alert-700); }
.clock-ok { border-color: color-mix(in srgb, var(--ok-700) 30%, var(--line)); }
.clock-pending { border-color: color-mix(in srgb, var(--amber-500) 45%, var(--line)); }
.clock-who { color: var(--ink-2); font-weight: 600; }
.clock-time { font-size: 2.5rem; font-weight: 700; color: var(--navy-900); line-height: 1.2; }
.clock-why {
  display: grid;
  gap: 0.25rem;
  inline-size: 100%;
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-m);
  background: var(--amber-50);
  color: var(--amber-700);
  text-align: start;
  line-height: 1.9;
}
.clock-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-block-start: 0.25rem; }
.clock-actions .btn { min-block-size: 2.75rem; }
.clock-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .clock-spin .icon { animation: clock-breathe 1.4s ease-in-out infinite; }
}
@keyframes clock-breathe { 50% { opacity: 0.35; scale: 0.9; } }

/* میز کار من: نوارِ امروز — رنگِ نقطه وضعِ امروز است (داخل سبز، رفته خاکستری، مرخصی آبی، نیامده کهربایی). */
.my-today {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-block-end: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
}
.my-today-dot { inline-size: 0.875rem; block-size: 0.875rem; border-radius: 50%; background: var(--amber-500); }
.my-today-in .my-today-dot { background: var(--ok-700); box-shadow: 0 0 0 4px var(--ok-50); }
.my-today-out .my-today-dot { background: var(--ink-3); }
.my-today-leave .my-today-dot { background: var(--cyan-500); }
.my-today-text h2 { margin: 0; font-size: var(--fs-l); }
.my-today-text p { margin: 0; color: var(--ink-2); }
.my-today-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 0.5rem; }
.my-today-actions .hint { margin: 0; display: inline-flex; align-items: center; gap: 0.375rem; }
.my-today-banner, .my-today .notice-error { grid-column: 1 / -1; margin: 0; }
.btn-clock { min-block-size: 2.75rem; padding-inline: 1.25rem; font-size: var(--fs-m); }
@media (max-width: 40rem) {
  .my-today { grid-template-columns: auto minmax(0, 1fr); }
  .my-today-actions { grid-column: 1 / -1; justify-content: stretch; }
  .my-today-actions .btn-clock { flex: 1 1 100%; }
}

.month-nav { display: inline-flex; gap: 0.25rem; margin-inline-start: auto; }
.lead-line { margin: 0 0 0.75rem; color: var(--ink-2); line-height: 1.9; }
.panel-subtitle { margin: 1.25rem 0 0.5rem; font-size: var(--fs-m); color: var(--ink-2); }

.me-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.me-shortcut {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  inline-size: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink);
  text-align: start;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.me-shortcut:hover { border-color: var(--line-strong); background: var(--cyan-50); }
.me-shortcut:focus-visible { outline: none; box-shadow: var(--ring); }
.me-shortcut > .icon { flex: none; margin-block-start: 0.2rem; color: var(--navy-700); }
.me-shortcut span { display: grid; gap: 0.125rem; }
.me-shortcut small { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.7; }

/* خطِ زمانِ ثبت‌های یک روز */
.clock-timeline { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.clock-event {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-inline-start: 3px solid var(--ok-700);
  border-radius: var(--r-s);
  background: var(--surface-2);
}
.clock-event.is-out { border-inline-start-color: var(--navy-700); }
.clock-event.is-rejected { opacity: 0.6; text-decoration: line-through; }
.clock-event-time { font-weight: 700; color: var(--navy-900); }
.clock-event-what { display: grid; }

/* مرخصی */
.leave-balance {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.leave-balance div { padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.leave-balance dt { color: var(--ink-3); font-size: var(--fs-xs); }
.leave-balance dd { margin: 0; font-weight: 700; color: var(--navy-900); }
.leave-list, .record-list, .payslip-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.leave-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.375rem 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.leave-item.is-pending { border-color: color-mix(in srgb, var(--amber-500) 45%, var(--line)); background: var(--amber-50); }
.leave-item.is-cancelled, .leave-item.is-rejected { background: var(--surface-2); }
.leave-item-main { display: grid; gap: 0.125rem; min-inline-size: 0; }
.leave-item-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.leave-reject-note { flex: 1 1 14rem; min-inline-size: 0; }

/* کارنامه */
.record-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.375rem 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
.record-icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); }
.record-bonus .record-icon, .record-commendation .record-icon { background: var(--ok-50); color: var(--ok-700); }
.record-deduction .record-icon, .record-penalty .record-icon { background: var(--alert-50); color: var(--alert-700); }
.record-warning .record-icon { background: var(--amber-50); color: var(--amber-700); }
.record-main { display: grid; gap: 0.125rem; min-inline-size: 0; }
.record-value { font-weight: 700; white-space: nowrap; }
.record-deduction .record-value, .record-penalty .record-value, .record-warning .record-value { color: var(--alert-700); }
.record-bonus .record-value, .record-commendation .record-value { color: var(--ok-700); }
.record-item.is-voided { opacity: 0.65; }
.record-item.is-voided .record-value { text-decoration: line-through; }
.record-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.record-actions input { flex: 1 1 12rem; min-inline-size: 0; }
.record-kinds { margin: 0 0 0.75rem; padding: 0; border: 0; min-inline-size: 0; }
.record-kinds legend { margin-block-end: 0.375rem; color: var(--ink-2); font-size: var(--fs-s); }
.record-kinds .segmented { flex-wrap: wrap; }
.record-kinds .segment span { display: inline-flex; align-items: center; gap: 0.25rem; }
.record-form .doctor-chips { margin-block-end: 0.75rem; }

/* فیش‌ها */
.payslip-item { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.payslip-item > details > summary, .payslip-item:not(:has(details)) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
}
.payslip-item > details > summary { cursor: pointer; list-style: none; }
.payslip-item > details > summary::-webkit-details-marker { display: none; }
.payslip-period { display: grid; gap: 0.125rem; min-inline-size: 0; }
.payslip-net { font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.payslip-lines { display: grid; gap: 0.25rem; margin: 0; padding: 0 0.875rem 0.75rem; }
.payslip-lines div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.25rem; border-block-end: 1px dashed var(--line); }
.payslip-lines dt { color: var(--ink-2); }
.payslip-lines dd { margin: 0; }
.payslip-total { font-weight: 700; border-block-end: 0 !important; }

/* جدولِ ماه */
.attendance-month td { white-space: nowrap; }
.attendance-month td:last-child { white-space: normal; }
.attendance-month tr.is-quiet td { color: var(--ink-3); }
.attendance-month tr.is-attention { background: var(--amber-50); }
.attendance-dayname { display: inline-block; min-inline-size: 4.25rem; color: var(--ink-2); }
.attendance-month-wrap { container-type: inline-size; }

/* نمایشگرِ حضور: کد بزرگ و وسط، راهنما کنارش؛ نوارِ زیرِ کد زمانِ ماندهِ همین کد است. */
.attendance-display { display: grid; gap: 1.5rem; inline-size: min(100%, 72rem); min-block-size: calc(100vh - 5rem); align-content: start; }
.attendance-display-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.attendance-display-head h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.attendance-display-head p { margin: 0; color: var(--ink-2); font-size: var(--fs-l); }
.attendance-display-clock { font-size: clamp(1.75rem, 3.5vw, 3rem); color: var(--ink-2); }
.attendance-display-body {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.attendance-display-code { display: grid; gap: 0.75rem; justify-items: center; }
.attendance-qr {
  inline-size: min(70vmin, 30rem);
  block-size: auto;
  padding: 1rem;
  border-radius: var(--r-l);
  background: #fff;
  box-shadow: 0 10px 40px rgb(var(--shadow-hue) / 0.12);
}
.attendance-display-timer { inline-size: min(70vmin, 30rem); block-size: 0.375rem; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.attendance-display-timer span { display: block; block-size: 100%; inline-size: calc(var(--left, 1) * 100%); background: var(--cyan-500); transition: inline-size 1s linear; }
.attendance-display-help h2 { margin: 0 0 0.75rem; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.attendance-display-help ol { margin: 0 0 1rem; padding-inline-start: 1.25rem; display: grid; gap: 0.5rem; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.9; }
@media (max-width: 48rem) {
  .attendance-display-body { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .attendance-display-timer span { transition: none; }
}
:where(.qr-code) { display: block; inline-size: 100%; block-size: auto; }

/* تنظیمِ حضور: کارتِ هر شعبه با فرمِ بازشونده */
.attendance-sites { display: grid; gap: 0.75rem; margin-block: 1rem; }
.attendance-site { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.attendance-site.is-on { border-color: color-mix(in srgb, var(--ok-700) 30%, var(--line)); }
.attendance-site-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.attendance-site-head h3 { margin: 0; font-size: var(--fs-m); }
.attendance-site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.attendance-rotate-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; color: var(--alert-700); font-size: var(--fs-s); }
.attendance-site-form { display: grid; gap: 0.75rem; margin-block-start: 0.5rem; padding-block-start: 0.75rem; border-block-start: 1px dashed var(--line); }
.attendance-location { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.attendance-location legend { margin-block-end: 0.375rem; font-weight: 600; }
.attendance-locate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.5rem; }
.attendance-locate .hint { margin: 0; }

/* برگه‌ی کد: پیش‌نمایش روی صفحه، همان روی کاغذ */
.poster-preview { display: grid; justify-items: center; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-l); background: #fff; color: #0b1b33; }
.attendance-poster { display: grid; justify-items: center; gap: 0.75rem; max-inline-size: 36rem; text-align: center; }
.attendance-poster h2 { margin: 0; font-size: 1.75rem; }
.attendance-poster-clinic { margin: 0; font-size: 1.125rem; font-weight: 600; }
.attendance-poster-qr { inline-size: min(100%, 22rem); }
.attendance-poster ol { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 0.25rem; text-align: start; line-height: 1.9; }
.attendance-poster-note { margin: 0; padding: 0.5rem 0.75rem; border: 1px dashed #0b1b33; border-radius: 8px; font-size: 0.9rem; line-height: 1.9; }
@media print {
  .attendance-poster-sheet .attendance-poster { max-inline-size: none; gap: 6mm; }
  .attendance-poster-sheet .attendance-poster h2 { font-size: 22pt; }
  .attendance-poster-sheet .attendance-poster-qr { inline-size: 120mm; }
  .attendance-poster-sheet ol { font-size: 13pt; }
}

/* تابلوی حضور */
.attendance-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block: 0.75rem; }
.day-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.day-nav-title { margin-inline-start: 0.5rem; color: var(--navy-900); }
.attendance-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; }
.attendance-person {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
}
.attendance-person.is-in { border-inline-start-color: var(--ok-700); }
.attendance-person.is-absent { border-inline-start-color: var(--amber-500); }
.attendance-person.is-leave { border-inline-start-color: var(--cyan-500); }
.attendance-person-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.attendance-person-head h3 { margin: 0; font-size: var(--fs-m); }
.attendance-person-line { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.attendance-person-line .is-late { color: var(--amber-700); }
.note-line.is-warn { color: var(--amber-700); }
.attendance-person-events { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.attendance-person-events li { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-xs); }
.attendance-person-events li.is-pending { background: var(--amber-50); color: var(--amber-700); }
.attendance-person-events li.is-rejected { text-decoration: line-through; opacity: 0.6; }
.attendance-person-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.manual-clock { display: grid; gap: 0.5rem; margin-block-start: 0.25rem; padding-block-start: 0.5rem; border-block-start: 1px dashed var(--line); }
.review-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.review-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--amber-50); }
.review-main { display: grid; min-inline-size: 0; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.review-actions input { flex: 1 1 12rem; min-inline-size: 0; }
.attendance-review { margin-block-end: 1rem; border-color: color-mix(in srgb, var(--amber-500) 45%, var(--line)); }
.attendance-fill { display: grid; gap: 0.5rem; justify-items: start; margin-block-start: 1rem; }
.attendance-fill .hint { margin: 0; }

/* پنجره‌ی کدِ پویا */
.live-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgb(var(--shadow-hue) / 0.55); }
.live-overlay-card { display: grid; justify-items: center; gap: 0.75rem; inline-size: min(100%, 34rem); max-block-size: 100%; overflow: auto; padding: 1.25rem; border-radius: var(--r-l); background: var(--surface); text-align: center; }
.live-overlay-head { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; }
.live-overlay-head h2 { margin: 0; font-size: var(--fs-l); }
.live-overlay-qr { inline-size: min(100%, 24rem); padding: 0.75rem; border-radius: var(--r-m); background: #fff; }

/* حضورِ امروز روی کارتِ کارمند و ویجتِ «حضورِ من» */
.staff-today { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.staff-today-dot, .my-day-line .my-today-dot { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--amber-500); flex: none; }
.staff-today.is-in .staff-today-dot { background: var(--ok-700); }
.staff-today.is-out .staff-today-dot, .staff-today.is-off .staff-today-dot { background: var(--ink-3); }
.staff-today.is-leave .staff-today-dot { background: var(--cyan-500); }
.my-day-widget { display: grid; gap: 0.5rem; justify-items: start; }
.my-day-line { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--fs-m); }
.my-day-widget .muted { margin: 0; }
.my-today-in .my-day-line .my-today-dot { background: var(--ok-700); }
.my-today-out .my-day-line .my-today-dot { background: var(--ink-3); }
.my-today-leave .my-day-line .my-today-dot { background: var(--cyan-500); }
.attendance-widget .glance { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); }
/* شماره‌ی گام‌ها با رقمِ فارسی */
.attendance-display-help ol, .attendance-poster ol { list-style-type: persian; }

/* ---------- لابراتوار (مهر ۱۴۰۵) ---------- */
.lab-views { margin-block: 0.75rem; }
.lab-view { display: inline-flex; align-items: center; gap: 0.375rem; }
.lab-view small { padding: 0 0.375rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); }
.lab-view.is-active small { background: color-mix(in srgb, var(--fill) 15%, transparent); color: inherit; }
.lab-view.is-attention { border-color: var(--amber-500); color: var(--amber-700); }
.lab-view.is-attention small { background: var(--amber-50); color: var(--amber-700); }
.lab-return-reason { color: var(--alert-700); }
.lab-history { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.lab-step {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.375rem 0.625rem;
  border-inline-start: 3px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--surface);
}
.lab-step-sent, .lab-step-drafted { border-inline-start-color: var(--navy-700); }
.lab-step-received, .lab-step-delivered { border-inline-start-color: var(--ok-700); }
.lab-step-returned, .lab-step-cancelled { border-inline-start-color: var(--alert-600); }
.lab-step-ordersms { border-inline-start-color: var(--cyan-500); }
.lab-step-when { color: var(--ink-3); font-size: var(--fs-xs); }
.lab-step-what { display: grid; }
@media (max-width: 40rem) {
  .lab-step { grid-template-columns: minmax(0, 1fr); }
}
.lab-reasons { margin-block-end: 0.5rem; }
.lab-account .doctor-chips { margin-block-end: 0.5rem; }
.lab-account-range { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; margin-block-end: 0.75rem; }
.lab-account-range .field { min-inline-size: 10rem; margin: 0; }
.lab-account-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.lab-account-figures div { padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.lab-account-figures dt { color: var(--ink-3); font-size: var(--fs-xs); }
.lab-account-figures dd { display: grid; margin: 0; font-weight: 700; color: var(--navy-900); }
.lab-account-figures dd small { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.lab-account-figures .is-total { background: var(--cyan-50); }
.lab-aging { display: flex; gap: 2px; margin-block-end: 0.75rem; border-radius: var(--r-m); overflow: hidden; }
.lab-aging-bar { display: grid; flex-basis: 0; min-inline-size: 6rem; padding: 0.375rem 0.625rem; font-size: var(--fs-xs); }
.lab-aging-bar strong { font-size: var(--fs-s); }
.lab-aging-bar.is-fresh { background: var(--ok-50); color: var(--ok-700); }
.lab-aging-bar.is-warm { background: var(--cyan-50); color: var(--navy-800); }
.lab-aging-bar.is-hot { background: var(--amber-50); color: var(--amber-700); }
.lab-aging-bar.is-late { background: var(--alert-50); color: var(--alert-700); }
@media (max-width: 40rem) {
  .lab-aging { flex-wrap: wrap; }
  .lab-aging-bar { flex: 1 1 45% !important; }
}
.lab-account-lines tr.lab-line-payment td, .lab-account-lines tr.lab-line-cancel td { color: var(--ok-700); }
.lab-account-lines tr.lab-line-void td { color: var(--alert-700); }
.lab-payments { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.lab-payments li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.375rem 0.625rem; border-radius: var(--r-s); background: var(--surface-2); }
.lab-payments li.is-voided { opacity: 0.6; text-decoration: line-through; }
.lab-payment-void { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.lab-contacts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; font-size: var(--fs-s); }
.lab-contacts a, .lab-contacts span { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-2); }
.lab-delete-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; color: var(--alert-700); font-size: var(--fs-s); }
.lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.375rem;
  padding: 0 0.5rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  text-decoration: none;
  vertical-align: middle;
}
.service-lab-hint { display: flex; align-items: center; gap: 0.375rem; margin: 0.5rem 0 0; }
/* عددِ «در یک نگاه» که خودش فیلتر است (انبار) */
.glance-button { padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.glance-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.glance-button:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-s); }
/* تراشه‌ی دکمه‌ای (نه رادیو): نماهای کارِ لابراتوار، علت‌های رایجِ برگشت */
.choice-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-s);
  line-height: 1.8;
  cursor: pointer;
}
.choice-chip:hover { border-color: var(--navy-700); }
.choice-chip.is-active { border-color: var(--navy-700); background: var(--cyan-50); color: var(--navy-900); font-weight: 500; }
.choice-chip:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }
.lab-round { color: var(--alert-700); }
/* شمارنده و هشدار روی هر تراشه‌ی دکمه‌ای (همان که «نماهای لابراتوار» دارد) */
.choice-chip small { padding: 0 0.375rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); }
.choice-chip.is-attention { border-color: var(--amber-500); color: var(--amber-700); }
.choice-chip.is-attention small { background: var(--amber-50); color: var(--amber-700); }
.choice-chip:disabled { cursor: progress; opacity: 0.7; }

/* سودِ واقعی (مهر ۱۴۰۵): هزینه‌ی هر ساعتِ یونیت، صندلیِ خالی، تعرفه‌ی پیشنهادی */
.chair-lead { margin: 0 0 0.75rem; line-height: 2; }
.chair-lead strong { color: var(--navy-900); font-size: var(--fs-l); white-space: nowrap; }
.chair-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 0.5rem; margin: 0 0 0.75rem; }
.chair-figures > div { display: grid; gap: 0.125rem; padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.chair-figures > div.is-attention { background: var(--amber-50); }
.chair-figures dt { color: var(--ink-2); font-size: var(--fs-xs); }
.chair-figures dd { margin: 0; color: var(--navy-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.chair-figures dd small { color: var(--ink-3); font-weight: 400; }
.chair-figures > div.is-attention dd { color: var(--amber-700); }
.chair-meter { block-size: 0.625rem; margin-block-end: 0.25rem; border-radius: var(--r-pill); background: var(--amber-50); overflow: hidden; }
.chair-meter-fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cyan-400); }
.chair-lines { margin-block-start: 0.5rem; }
.chair-lines summary { color: var(--navy-700); font-size: var(--fs-s); cursor: pointer; }
.chair-lines ul { display: grid; gap: 0.25rem; margin: 0.5rem 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.chair-lines li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.25rem; border-block-end: 1px solid var(--line); }
.chair-lines li strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.target-margin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-end: 0.75rem; color: var(--ink-2); font-size: var(--fs-s); }
.suggested-price { color: var(--navy-800); }
.suggested-price .icon { color: var(--amber-500); vertical-align: -1px; }
.suggested-price .link-button { margin-inline-start: 0.25rem; }

/* پیش‌بینیِ نقدینگی (مهر ۱۴۰۵): خطِ موجودی از امروز (راست) تا آخرِ بازه، زیرِ صفر کهربایی */
.cash-chart { margin: 0; }
.cash-plot { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-rows: 14rem auto; column-gap: 0.5rem; }
.cash-axis { position: relative; grid-row: 1; grid-column: 1; }
.cash-axis span { position: absolute; inset-inline-start: 0; transform: translateY(-50%); color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-axis span.is-zero { color: var(--navy-900); font-weight: 600; }
.cash-canvas { position: relative; grid-row: 1; grid-column: 2; }
.cash-canvas svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.cash-days { position: relative; grid-row: 2; grid-column: 2; block-size: 1.75rem; }
.cash-days span { position: absolute; inset-block-start: 0.375rem; transform: translateX(50%); color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; }
.cash-grid { stroke: var(--line); stroke-width: 1; }
.cash-zero { stroke: var(--navy-900); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cash-line { fill: none; stroke: var(--navy-700); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cash-area-up { fill: var(--cyan-50); }
.cash-area-down { fill: var(--amber-100); }
.cash-marker { position: absolute; inline-size: 0.75rem; block-size: 0.75rem; border: 2px solid var(--surface); border-radius: 50%; background: var(--navy-700); box-shadow: 0 0 0 1px var(--navy-700); transform: translate(50%, -50%); }
.cash-marker.is-short { background: var(--amber-700); box-shadow: 0 0 0 1px var(--amber-700); }
.cash-key-short::before { border: 1px solid var(--amber-500); background: var(--amber-100); }
@media (max-width: 40rem) {
  .cash-plot { grid-template-columns: 3.75rem minmax(0, 1fr); grid-template-rows: 11rem auto; }
}
.forecast-horizon { margin-block-end: 1rem; }
.forecast-alert { align-items: flex-start; flex-wrap: nowrap; }
.forecast-alert > .icon { flex: none; margin-block-start: 0.25rem; }
.forecast-alert h2 { margin: 0 0 0.25rem; color: var(--amber-700); font-size: var(--fs-m); }
.forecast-alert p { margin: 0.25rem 0; line-height: 1.9; }
.forecast-causes { margin: 0.25rem 0; padding-inline-start: 1.25rem; line-height: 1.9; }
.forecast-causes small { color: var(--ink-3); }
.forecast-days { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.forecast-days > li > h3 { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.375rem; color: var(--navy-900); font-size: var(--fs-s); }
.forecast-days > li > h3 small { color: var(--ink-3); font-weight: 400; }
.forecast-days ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.forecast-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.375rem 0.625rem; border-radius: var(--r-m); background: var(--surface-2); }
.forecast-item > .icon { flex: none; color: var(--ink-3); }
.forecast-title { display: grid; flex: 1 1 12rem; min-inline-size: 0; }
.forecast-title small { color: var(--ink-3); font-size: var(--fs-xs); }
.forecast-amount { margin-inline-start: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.forecast-item.is-in .forecast-amount { color: var(--ok-700); }
.forecast-item.is-out .forecast-amount { color: var(--navy-900); }
.forecast-assumptions summary { color: var(--navy-700); font-weight: 600; cursor: pointer; }
.forecast-assumptions .snapshot { margin-block-start: 0.75rem; }
.cash-widget .sparkline { display: block; inline-size: 100%; block-size: 3rem; margin-block: 0.5rem 0.25rem; }
.cash-widget-alert { margin: 0.5rem 0 0; }

/* ضمانت و پیگیریِ پس از درمان (مهر ۱۴۰۵) */
.nav-badge-alert { background: var(--alert-600); }
.pill-alert { background: var(--alert-50); border: 1px solid var(--alert-200); color: var(--alert-700); }
.warranty-banner { align-items: flex-start; flex-wrap: nowrap; margin-block: 0.75rem 0; }
.warranty-banner > .icon { flex: none; margin-block-start: 0.25rem; color: var(--navy-700); }
.warranty-banner p { margin: 0 0 0.375rem; line-height: 1.9; }
.warranty-cards { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.warranty-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.warranty-card.is-active { border-color: var(--cyan-300); background: linear-gradient(135deg, var(--cyan-50), var(--surface) 60%); }
.warranty-card.is-expired { opacity: 0.75; }
.warranty-seal { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); }
.warranty-card.is-active .warranty-seal { background: var(--navy-700); color: #fff; }
.warranty-body { display: grid; gap: 0.125rem; min-inline-size: 0; }
.warranty-body strong { color: var(--navy-900); }
.warranty-body span { color: var(--ink-2); font-size: var(--fs-s); }
.warranty-claims { color: var(--amber-700) !important; }
.warranty-until { display: grid; justify-items: end; gap: 0.125rem; }
.warranty-until small { color: var(--ink-3); font-size: var(--fs-xs); }
@media (max-width: 30rem) {
  .warranty-card { grid-template-columns: auto minmax(0, 1fr); }
  .warranty-until { grid-column: 2; justify-items: start; }
}
.feedback-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.feedback-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(12rem, 2fr) auto; align-items: start; gap: 0.5rem 1rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.feedback-row.is-alert { border-color: var(--alert-200); box-shadow: inset -3px 0 0 var(--alert-600); }
.feedback-who, .feedback-what, .feedback-answer { display: grid; gap: 0.125rem; min-inline-size: 0; }
.feedback-who small, .feedback-what small { color: var(--ink-3); font-size: var(--fs-xs); }
.feedback-call { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--fs-s); }
.feedback-answer { justify-items: start; }
.feedback-comment { color: var(--ink); font-size: var(--fs-s); line-height: 1.8; quotes: "«" "»"; }
.feedback-reviewed { color: var(--ok-700); font-size: var(--fs-xs); }
.feedback-stars-read { color: var(--amber-500); }
.feedback-stars-read .is-off { color: var(--line-strong); }
.feedback-handle small { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.8; }
.feedback-handle-form { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.feedback-handle-form input { flex: 1 1 14rem; min-inline-size: 0; min-block-size: 2.25rem; padding: 0.25rem 0.625rem; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); font: inherit; font-size: var(--fs-s); }
.feedback-handle-form input:focus { outline: none; border-color: var(--navy-700); box-shadow: var(--ring); }
/* فرمِ رسیدگی جا می‌خواهد: سلولش تمامِ ردیف را می‌گیرد. */
.feedback-handle:has(.feedback-handle-form) { grid-column: 1 / -1; }
@media (max-width: 56rem) {
  .feedback-row { grid-template-columns: minmax(0, 1fr); }
}
.followup-range { margin-block-end: 1rem; }
.feedback-card { max-inline-size: 34rem; }
.feedback-feelings { display: grid; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.feedback-feeling { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 2px solid var(--line); border-radius: var(--r-l); background: var(--surface); cursor: pointer; }
.feedback-feeling input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-feeling span { display: grid; }
.feedback-feeling small { color: var(--ink-3); font-size: var(--fs-xs); }
.feedback-feeling:focus-within { box-shadow: var(--ring); }
.feedback-feeling.is-picked { border-color: var(--navy-700); background: var(--cyan-50); }
.feedback-good .icon { color: var(--ok-700); }
.feedback-discomfort .icon { color: var(--amber-500); }
.feedback-pain .icon { color: var(--alert-600); }
.feedback-pain.is-picked { border-color: var(--alert-600); background: var(--alert-50); }
.feedback-stars { margin: 0; padding: 0; border: 0; }
.feedback-stars legend { margin-block-end: 0.375rem; font-size: var(--fs-s); }
.feedback-star-row { display: flex; justify-content: center; gap: 0.25rem; }
.feedback-star { position: relative; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--r-m); color: var(--line-strong); font-size: 2rem; line-height: 1; cursor: pointer; }
.feedback-star input { position: absolute; opacity: 0; pointer-events: none; }
.feedback-star:focus-within { box-shadow: var(--ring); }
.feedback-star.is-on { color: var(--amber-500); }
.feedback-review-lead { margin: 0.5rem 0 0; }
.feedback-review-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

/* تطبیقِ بانک (مهر ۱۴۰۵) */
.bank-recon { display: grid; gap: 1rem; }
.bank-accounts { margin-block-end: 0; }
.bank-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: 0.5rem; margin: 0 0 0.75rem; }
.bank-figures > div { display: grid; gap: 0.125rem; padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.bank-figures dt { color: var(--ink-2); font-size: var(--fs-xs); }
.bank-figures dd { margin: 0; color: var(--navy-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.bank-figures dd small { color: var(--ink-3); font-weight: 400; }
.bank-figures > div.is-attention { background: var(--amber-50); }
.bank-figures > div.is-attention dd { color: var(--amber-700); }
.bank-figures > div.is-ok { background: var(--ok-50); }
.bank-figures > div.is-ok dd { color: var(--ok-700); }
.bank-ledger-only summary { color: var(--navy-700); font-size: var(--fs-s); cursor: pointer; }
.bank-ledger-only ul { display: grid; gap: 0.25rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.bank-ledger-only li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.25rem; border-block-end: 1px solid var(--line); }
.bank-mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 0.5rem 0.75rem; margin-block: 0.75rem; }
.bank-preview-head { margin: 0.5rem 0; font-size: var(--fs-s); }
.bank-preview-head small { color: var(--ink-3); }
.bank-lines { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.bank-line { display: grid; gap: 0.375rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.bank-line.bank-unmatched { border-color: var(--amber-100); box-shadow: inset -3px 0 0 var(--amber-500); }
.bank-line.bank-ignored { opacity: 0.8; }
.bank-line-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.bank-line-date { color: var(--ink-2); font-size: var(--fs-s); }
.bank-line-desc { flex: 1 1 12rem; min-inline-size: 0; }
.bank-line-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-line-amount.is-in { color: var(--ok-700); }
.bank-line-amount.is-out { color: var(--navy-900); }
.bank-line-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; font-size: var(--fs-s); }
.bank-line-body small { color: var(--ink-2); }
.bank-suggestion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; inline-size: 100%; padding: 0.375rem 0.625rem; border-radius: var(--r-m); background: var(--cyan-50); }
.bank-suggestion span { flex: 1 1 14rem; min-inline-size: 0; }
.bank-line-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.bank-act { display: flex; flex-wrap: wrap; gap: 0.375rem; inline-size: 100%; }
.bank-act select, .bank-act input { flex: 1 1 12rem; min-inline-size: 0; min-block-size: 2.25rem; padding: 0.25rem 0.625rem; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); font: inherit; font-size: var(--fs-s); }

/* ---------- سفارشِ خرید و سابقه‌ی قیمت (مهر ۱۴۰۵) ---------- */
.order-cards { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; }
.order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  min-inline-size: 0;
}
.order-card.is-draft { border-inline-start-color: var(--ink-3); }
.order-card.is-sent { border-inline-start-color: var(--navy-700); }
.order-card.is-partlyreceived { border-inline-start-color: var(--amber-500); }
.order-card.is-received { border-inline-start-color: var(--ok-700); }
.order-card.is-cancelled, .order-card.is-closed { opacity: 0.75; }
.order-card.is-late { border-inline-start-color: var(--alert-700); }
.order-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.75rem; }
.order-card-head > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; min-inline-size: 0; }
.order-card-supplier { color: var(--ink-2); }
/* چهار پنج دکمه‌ی کارت در عرضِ موبایل می‌شکنند؛ بی این، از لبه‌ی راست (آغازِ RTL) بیرون می‌زنند و دیده نمی‌شوند. */
.order-card .settle-row-actions { flex-wrap: wrap; justify-content: start; }
.order-card-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.order-lines td, .order-lines th { vertical-align: top; }
.received-meter {
  display: inline-block;
  inline-size: 3rem;
  block-size: 0.375rem;
  margin-inline-end: 0.375rem;
  border-radius: 999px;
  background: var(--surface-2);
  vertical-align: middle;
  overflow: hidden;
}
.received-meter > span { display: block; block-size: 100%; border-radius: inherit; background: var(--ok-700); }
.price-hint { font-size: var(--fs-s); color: var(--ink-3); }
.price-hint.is-cheaper { color: var(--amber-700); }
.note-line.is-ordered { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ok-700); }
.share-text {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.9;
}
.orders-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-block-end: 0.75rem; }
.orders-toolbar .check-row { margin: 0; margin-inline-start: auto; }
.orders-toolbar .hint { margin: 0; }
/* انتخابِ کالا و فروشنده در جدول هم‌قدِ خانه‌های عددیِ کنارش (cell-input) */
.order-form-table select, .order-builder-table select, .purchase-goods-table select {
  inline-size: 100%;
  min-inline-size: 9rem;
  min-block-size: 2.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--surface);
  font: inherit;
  color: inherit;
}
.order-form-table select:focus, .order-builder-table select:focus, .purchase-goods-table select:focus {
  outline: none; border-color: var(--navy-700); box-shadow: var(--ring);
}
.order-builder-table .cell-input { inline-size: 5.5rem; }
.order-builder .field-inline { margin-block-end: 0.75rem; }
.builder-groups { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.builder-groups li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem;
  padding: 0.375rem 0.75rem; border-radius: var(--r-m); background: var(--cyan-50);
}
/* تنها ستون باید بتواند کوچک شود؛ وگرنه جدولِ خریدها (min-content) کلِ سابقه را از قابِ ۳۲۰ پیکسل بیرون می‌برد. */
.item-prices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-block: 0.75rem; }
.item-prices-title { margin: 0; font-size: var(--fs-m); }
/* ستون‌ها مالِ فهرست است و هر ردیف subgrid: نوارِ همه‌ی فروشنده‌ها یک طول دارد و مقایسه‌شان راست است. */
.price-bars {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) minmax(4rem, 2fr) auto;
  gap: 0.625rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-bars li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  row-gap: 0.25rem;
}
.price-bars .note-line { grid-column: 1 / -1; }
.price-bar-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-inline-size: 0; }
.price-bar-track { block-size: 0.5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.price-bar-fill { display: block; block-size: 100%; border-radius: inherit; background: var(--navy-700); }
.price-bars li.is-best .price-bar-fill { background: var(--ok-700); }
.price-bar-value { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0.25rem 0.5rem; }
.price-trend { font-size: var(--fs-xs); font-weight: 600; }
td .price-trend { display: block; }
.price-trend.is-up { color: var(--alert-700); }
.price-trend.is-down { color: var(--ok-700); }
.price-history-rows summary { cursor: pointer; color: var(--ink-2); }
@media (max-width: 40rem) {
  .price-bars { grid-template-columns: minmax(0, 1fr) auto; }
  .price-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .orders-toolbar .check-row { margin-inline-start: 0; }
}

/* ---------- پولِ روی میز (مهر ۱۴۰۵) ---------- */
.table-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.875rem;
  margin-block: 0.875rem;
}
.table-insights .panel { min-inline-size: 0; }
.panel-title-small { margin: 0 0 0.625rem; font-size: var(--fs-m); }
.aging-bars, .share-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
/* نوار زیرِ عنوان و مبلغ، به پهنای کامل — در ستونِ باریکِ سه‌تایی هم مقایسه خواناست. */
.aging-bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.aging-bars li > span:last-child { white-space: nowrap; }
.aging-track { grid-column: 1 / -1; grid-row: 2; block-size: 0.5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.aging-track > span { display: block; block-size: 100%; border-radius: inherit; background: var(--navy-700); }
.aging-bars li.is-old .aging-track > span { background: var(--amber-500); }
.share-list li { display: flex; justify-content: space-between; gap: 0.75rem; min-inline-size: 0; }
.share-list li > span:first-child { min-inline-size: 0; overflow-wrap: anywhere; }
.table-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-block-end: 0.75rem; }
.table-cards { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.table-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
}
.table-card.is-good { border-inline-start-color: var(--ok-700); }
.table-card.is-debt { border-inline-start-color: var(--amber-500); }
.table-card.is-risky { border-inline-start-color: var(--alert-700); }
.table-card-head { display: flex; align-items: flex-start; gap: 0.625rem; }
.table-pick { margin-block-start: 0.375rem; inline-size: 1.125rem; block-size: 1.125rem; flex-shrink: 0; }
.table-card-who { display: grid; gap: 0.125rem; min-inline-size: 0; flex: 1; }
.table-card-name { font-weight: 600; }
.table-card-value { font-size: var(--fs-l); white-space: nowrap; }
.table-card-items { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.table-card-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }
.table-card .settle-row-actions { flex-wrap: wrap; justify-content: start; }
.table-offer { margin-block-start: 0.25rem; }
.offer-summary { margin: 0; font-weight: 600; }

/* جای خالی با لینک و تأییدِ حضور (مهر ۱۴۰۵) */
.waitlist-tab { display: grid; gap: 1rem; }
.gap-fill-tools { display: flex; align-items: center; gap: 0.25rem; }
.gap-fill .slot-offer { margin-block-start: 0.75rem; }
.gap-fill .form-actions .hint { flex-basis: 100%; }
.slot-offer-list { display: grid; gap: 0.625rem; }
.slot-offer { display: grid; gap: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.slot-offer.is-open { border-color: var(--amber-100); background: var(--amber-50); }
.slot-offer.is-claimed { border-color: var(--ok-50); }
.slot-offer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }
.slot-offer-slot { color: var(--navy-900); }
.slot-offer-note { flex: 1 1 12rem; font-size: var(--fs-s); }
.slot-offer-claimed { margin: 0; }
.slot-offer-people { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.slot-offer-people li { display: inline-flex; align-items: center; gap: 0.375rem; padding-block: 0.125rem; padding-inline: 0.625rem 0.25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-s); }
.slot-offer-name { min-inline-size: 0; }

/* صفحه‌های عمومیِ «وقتِ خالی» و «می‌آیید؟» — روی گوشیِ بیمار */
.visit-card { max-inline-size: 34rem; }
.visit-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--cyan-50);
}
.visit-ticket-day { display: grid; gap: 0.125rem; }
.visit-ticket-day span, .visit-ticket-time span { color: var(--ink-2); font-size: var(--fs-s); }
.visit-ticket-day strong { color: var(--navy-900); font-size: var(--fs-l); }
.visit-ticket-time { display: grid; justify-items: center; gap: 0.125rem; padding-inline-start: 1rem; border-inline-start: 1px dashed var(--line-strong); }
.visit-ticket-time strong { color: var(--navy-900); font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; line-height: 1.2; }
.visit-ticket-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding-block-start: 0.625rem; border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-s); }
.public-choice { display: grid; gap: 0.5rem; }
.visit-cancel-ask { display: grid; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--alert-200); border-radius: var(--r-l); background: var(--alert-50); }
.visit-cancel-ask p { margin: 0; line-height: 1.9; }
.visit-change { justify-self: center; font-size: var(--fs-s); }

/* پیام‌رسان‌ها: بله، روبیکا، ایتا (مهر ۱۴۰۵) */
.msg-channels { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin-block: 0.25rem 0.5rem; }
.msg-channels-label { color: var(--ink-2); font-size: var(--fs-s); }
.msg-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin-block-start: 1rem; padding: 0.625rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.msg-links-title { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.msg-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; padding-block: 0.125rem; padding-inline: 0.625rem 0.25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-s); }
.msg-link small { color: var(--ink-3); font-size: var(--fs-xs); }
.msg-link.is-on { border-color: var(--ok-50); }
.msg-link.is-on small:first-of-type { color: var(--ok-700); }
.icon-btn-small { inline-size: 1.5rem; block-size: 1.5rem; }
.msg-link-qr { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding-block-start: 0.5rem; }
.msg-link-qr p { margin: 0 0 0.25rem; font-size: var(--fs-s); }
.msg-link-qr-code { inline-size: 9rem; block-size: 9rem; }
.msg-link-url { overflow-wrap: anywhere; font-size: var(--fs-xs); }
.share-panel { border-color: var(--line); background: var(--surface-2); }
.share-panel h3 { color: var(--navy-900); }
.connect-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.connect-item { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.connect-item.is-on { border-color: var(--ok-50); background: var(--ok-50); }
.connect-name { color: var(--navy-900); font-size: var(--fs-l); font-weight: 600; }
.connect-state { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-s); }
.connect-item.is-on .connect-state { color: var(--ok-700); }
.connect-item .hint { margin: 0; line-height: 1.9; }
.connect-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; padding: 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-l); }
.connect-code > span { color: var(--ink-2); font-size: var(--fs-s); }
.connect-code-value { color: var(--navy-900); font-size: var(--fs-xl); font-weight: 600; font-family: ui-monospace, monospace; }
.messenger-statuses { display: grid; gap: 0.375rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.messenger-statuses li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.messenger-setup summary { color: var(--navy-700); font-size: var(--fs-s); cursor: pointer; }
.messenger-keys { margin: 0.5rem 0; padding: 0.625rem 0.75rem; overflow-x: auto; border-radius: var(--r-m); background: var(--surface-2); font-size: var(--fs-xs); line-height: 1.7; text-align: start; }
.messenger-notes { display: grid; gap: 0.25rem; margin: 0; padding-inline-start: 1.25rem; }

/* لینکِ پرداختِ آنلاین (مهر ۱۴۰۵) */
.pay-links { margin-block-start: 1rem; }
.pay-link-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-block-end: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); }
.pay-link-delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }
/* گوشیِ باریک: گزینه‌ها به خطِ بعد می‌روند، نه بیرون از کارت. */
.pay-link-form .segmented { flex-wrap: wrap; max-inline-size: 100%; }
.pay-link-created { margin-block-end: 0.75rem; padding: 0.75rem; border-radius: var(--r-l); background: var(--ok-50); }
.pay-link-list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.pay-link-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.pay-link-list li[data-status="Paid"] { background: var(--ok-50); border-color: var(--ok-50); }
.pay-link-amount { color: var(--navy-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-link-amount small { color: var(--ink-3); font-weight: 400; }
.pay-link-when { flex: 1 1 12rem; }
.pay-amount { display: grid; justify-items: center; gap: 0.25rem; padding: 1.25rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--cyan-50); }
.pay-amount span { color: var(--ink-2); font-size: var(--fs-s); }
.pay-amount strong { color: var(--navy-900); font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; }
.pay-hint { margin: 0; line-height: 1.9; text-align: center; }
.pay-receipt { display: grid; gap: 0.375rem; margin: 0; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); }
.pay-receipt > div { display: flex; justify-content: space-between; gap: 1rem; }
.pay-receipt dt { color: var(--ink-2); font-size: var(--fs-s); }
.pay-receipt dd { margin: 0; color: var(--navy-900); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- استریلیزاسیون (مهر ۱۴۰۵) ---------- */
.steri-alerts { display: grid; gap: 0.375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.steri-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; padding: 0.5rem 0.75rem; border: 1px solid; border-radius: var(--r-m); line-height: 1.8; }
.steri-alert > span { flex: 1 1 16rem; }
.steri-alert-danger { border-color: var(--alert-200); background: var(--alert-50); color: var(--alert-700); }
.steri-alert-amber { border-color: var(--amber-100); background: var(--amber-50); color: var(--amber-700); }

.cycle-start { margin-block-end: 1rem; }
.cycle-start .form-grid { margin-block-end: 0.75rem; }
.pack-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 0.5rem 1rem; margin: 0 0 0.75rem; padding: 0; border: 0; }
.pack-counts > .label, .pack-counts > .hint { grid-column: 1 / -1; }
.pack-count { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.625rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.pack-count-name { min-inline-size: 0; }
.pack-count-stepper { display: inline-flex; align-items: center; gap: 0.375rem; }
.pack-count-stepper output { min-inline-size: 2ch; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.cycle-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cycle-row { display: grid; gap: 0.25rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.cycle-row[data-status="Failed"] { border-color: var(--alert-200); }
.cycle-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.cycle-facts { display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.cycle-fact-danger { color: var(--alert-700); font-weight: 600; }
.cycle-fact-amber { color: var(--amber-700); font-weight: 600; }
.cycle-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cycle-actions:empty { display: none; }
.cycle-finish { display: grid; gap: 0.625rem; margin-block-start: 0.375rem; padding: 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.cycle-finish .segmented { flex-wrap: wrap; max-inline-size: 100%; }

.recall-panel { border-color: var(--alert-200); }
.recall-cycles { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.sterile-packs, .sterilization-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.pack-use { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); align-items: end; gap: 0.75rem 1rem; }
.pack-use > .banner, .pack-use > .error-notice, .pack-use > [role="alert"] { grid-column: 1 / -1; }
.pack-use-patient { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-block-size: 2.625rem; }
.pack-use-actions { margin: 0; }
.pack-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pack-aside input { flex: 1 1 12rem; }

.log-range { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin-block-end: 0.75rem; }

.setup-form { display: grid; gap: 0.625rem; margin-block-end: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); }
.setup-list { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.setup-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.setup-list li > .btn { margin-inline-start: auto; }
.setup-list li.is-inactive { opacity: 0.6; }

.chair-pack-list { display: grid; gap: 0.25rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }

/* برچسبِ پک: برگه‌ی ۲۴تایی (۳ × ۸، ۶۳٫۵ × ۳۳٫۹ میلی‌متر). */
.pack-label-sheet { color: #000; }
@media print {
  html[data-print="sheet"] .pack-label-sheet {
    display: grid;
    grid-template-columns: repeat(3, 63.5mm);
    grid-auto-rows: 33.9mm;
    justify-content: center;
    column-gap: 2.5mm;
  }
}
.pack-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20mm;
  align-items: center;
  gap: 1.5mm;
  padding: 2mm 2.5mm;
  border: 0.3mm dashed #999;
  break-inside: avoid;
  font-size: 7pt;
  line-height: 1.45;
}
.pack-label-text p { margin: 0; }
.pack-label-type { display: block; overflow: hidden; font-size: 8pt; white-space: nowrap; text-overflow: ellipsis; }
.pack-label-code { font-size: 13pt; font-weight: 700; text-align: start; }
.pack-label-expiry { font-weight: 700; }
.pack-label-meta { overflow: hidden; color: #333; font-size: 6pt; white-space: nowrap; text-overflow: ellipsis; }
.pack-label-qr { inline-size: 20mm; block-size: 20mm; }

.sterilization-log-sheet .doc-table { font-size: 8pt; }
.doc-sign-cell { min-inline-size: 18mm; }
.recall-panel h3 { margin-block: 1rem 0.375rem; font-size: var(--fs-m); }

/* ---------- کیفیتِ درمان (مهر ۱۴۰۵) ---------- */
.quality-table tfoot th, .quality-table tfoot td { border-block-start: 2px solid var(--line-strong); background: var(--surface-2); font-weight: 600; }
.quality-table td.quality-high { background: var(--amber-50); color: var(--amber-700); font-weight: 600; }

/* ---------- نمایشگرِ رو به بیمار روی یونیت (مهر ۱۴۰۵) ---------- */
.unit-screen { display: grid; gap: 1.5rem; inline-size: min(100%, 64rem); min-block-size: calc(100vh - 5rem); align-content: start; }
.unit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; color: var(--ink-2); }
.unit-clinic { font-size: var(--fs-m); }
.unit-clock { font-size: clamp(1.25rem, 3vw, 2rem); }
.unit-section { display: grid; gap: 1rem; }
.unit-section h1, .unit-idle h1 { margin: 0; color: var(--navy-900); font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.5; }
.unit-lead { margin: 0; color: var(--ink-2); font-size: clamp(1rem, 2.2vw, 1.25rem); line-height: 1.9; }
.unit-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-m); }
.unit-legend li { display: inline-flex; align-items: center; gap: 0.375rem; }
.unit-swatch { inline-size: 1rem; block-size: 1rem; border-radius: 50%; }
.unit-legend .glyph { inline-size: 1.625rem; }
.unit-legend-teeth { color: var(--ink-2); font-size: var(--fs-s); }

/* بیمار چارت را اسکرول نمی‌کند: پهنای هر دندان از پهنای خودِ چارت می‌آید (۱۶ دندان، و حدودِ ۷٫۵rem فاصله و حاشیه)،
   پس روی تبلتِ عمودی کوچک و روی مانیتورِ بزرگ درشت می‌شود. فقط روی گوشیِ خیلی باریک به کف می‌رسد و اسکرول برمی‌گردد. */
.unit-section .dental-chart { container-type: inline-size; }
.unit-section .chart-tooth { inline-size: clamp(1.25rem, calc((100cqi - 7.5rem) / 16), 3.75rem); font-size: var(--fs-s); }
.unit-section .chart-tooth .glyph { inline-size: 100%; max-inline-size: 3rem; }
.unit-plan-lines { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: clamp(1rem, 2.2vw, 1.25rem); }
.unit-plan-lines li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.unit-plan-lines li.is-done { opacity: 0.65; }
.unit-done { color: var(--ok-700); }
.unit-total { margin: 0; color: var(--navy-900); font-size: clamp(1.125rem, 2.6vw, 1.5rem); font-weight: 600; }
.unit-idle { display: grid; gap: 1rem; place-content: center; min-block-size: 60vh; text-align: center; }

.unit-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin-block-end: 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.unit-control-state { display: inline-flex; align-items: center; gap: 0.375rem; }
.unit-control-actions { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.unit-control-message { flex-basis: 100%; color: var(--ink-2); font-size: var(--fs-s); }

/* ---------- پورتالِ لابراتوار (مهر ۱۴۰۵): صفحه‌ی عمومیِ /l/… و پنل‌های مرکز ---------- */
.lab-portal { display: grid; gap: 1.25rem; inline-size: min(100%, 64rem); align-content: start; }
.lab-portal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; }
.lab-portal-who { display: grid; gap: 0.25rem; min-inline-size: 0; }
.lab-portal-who h1 { margin: 0; color: var(--navy-900); font-size: clamp(1.375rem, 3.5vw, 1.875rem); line-height: 1.5; }
.lab-portal-who p { margin: 0; line-height: 1.9; }
.lab-portal-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lab-portal-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.5rem; margin: 0; }
.lab-portal-counts div { display: grid; gap: 0.125rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.lab-portal-counts dt { color: var(--ink-2); font-size: var(--fs-s); }
.lab-portal-counts dd { margin: 0; color: var(--navy-900); font-size: var(--fs-xl); font-weight: 600; }
.lab-portal-counts .is-late { border-color: var(--amber-500); background: var(--amber-50); }
.lab-portal-counts .is-late dd { color: var(--amber-700); }
.lab-portal-tabs { flex-wrap: wrap; max-inline-size: 100%; }
.lab-portal-empty { margin: 0; padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--r-l); text-align: center; }

.lab-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.875rem; align-items: start; }
.lab-job { display: grid; gap: 0.75rem; min-inline-size: 0; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
/* برگشتی مهم‌ترین کارِ لابراتوار است: نوارِ کهربایی کنارِ کارت؛ دیرکرده نوارِ قرمز. */
.lab-job.is-returned { border-inline-start: 4px solid var(--amber-500); }
.lab-job.is-late { border-inline-start: 4px solid var(--alert-600); }
.lab-job.is-closed { background: var(--surface-2); }
.lab-job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.lab-job-title { display: grid; gap: 0.375rem; min-inline-size: 0; }
.lab-job-title h3 { margin: 0; color: var(--navy-900); font-size: var(--fs-l); line-height: 1.6; }
.lab-job-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.lab-job-tag { padding: 0.0625rem 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); }
.lab-job-tag-round { background: var(--amber-50); color: var(--amber-700); }
.lab-job-return { flex-wrap: nowrap; align-items: flex-start; margin: 0; }
.lab-job-return > span { flex: 1; min-inline-size: 0; }
.lab-job-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0.5rem 1rem; margin: 0; }
.lab-job-facts div { display: grid; gap: 0.0625rem; min-inline-size: 0; }
.lab-job-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.lab-job-facts dd { margin: 0; overflow-wrap: anywhere; }
.lab-job-facts small { display: block; color: var(--ink-2); font-size: var(--fs-xs); }
.lab-job-facts .is-late dd { color: var(--alert-700); font-weight: 600; }
.lab-job-note { margin: 0; padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--cyan-50); line-height: 1.9; }
.lab-job-promise .field { max-inline-size: 16rem; }
.lab-job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lab-job-ready-note { color: var(--ok-700); font-size: var(--fs-s); }
.lab-job-write { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.5rem; }
.lab-job-write textarea { inline-size: 100%; min-block-size: 3.5rem; resize: vertical; }

/* گفت‌وگوی هر کار: لابراتوار یک سو، مرکز سوی دیگر — مثلِ پیام‌رسان، تا معلوم باشد کدام حرف از کیست. */
.lab-thread { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.lab-thread li { display: grid; gap: 0.125rem; max-inline-size: 85%; padding: 0.375rem 0.625rem; border-radius: var(--r-m); }
.lab-thread li.is-lab { justify-self: start; background: var(--cyan-50); }
.lab-thread li.is-clinic { justify-self: end; background: var(--surface-2); }
.lab-thread-who { color: var(--ink-3); font-size: var(--fs-xs); }
.lab-thread-text { overflow-wrap: anywhere; }

.lab-invoice-new, .lab-invoice-list, .lab-portal-account { display: grid; gap: 0.875rem; padding: 1.125rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.lab-invoice-new h2, .lab-invoice-list h2 { margin: 0; font-size: var(--fs-l); }
.lab-invoice-pick { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.lab-invoice-pick li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.lab-invoice-pick li.is-picked { border-color: var(--cyan-500); background: var(--cyan-50); }
.lab-invoice-pick .check { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0; border: 0; font-size: var(--fs-m); min-inline-size: 0; }
.lab-invoice-pick small { display: block; color: var(--ink-2); font-size: var(--fs-xs); }
.lab-invoice-amount input { inline-size: 10rem; max-inline-size: 100%; }
.lab-invoice-total { margin: 0; color: var(--navy-900); font-weight: 600; }
.lab-invoice-reject { color: var(--alert-700); }
.lab-invoice-attach { position: relative; cursor: pointer; }
.lab-portal-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.5rem; margin: 0; }
.lab-portal-figures div { display: grid; gap: 0.125rem; padding: 0.625rem 0.875rem; border-radius: var(--r-m); background: var(--surface-2); }
.lab-portal-figures dt { color: var(--ink-2); font-size: var(--fs-s); }
.lab-portal-figures dd { margin: 0; font-size: var(--fs-l); font-weight: 600; }
.lab-portal-figures .is-total { background: var(--fill); color: var(--fill-ink); }
.lab-portal-figures .is-total dt { color: inherit; opacity: 0.85; }

/* سمتِ مرکز */
.lab-portal-panel { display: grid; gap: 0.875rem; }
.lab-portal-status { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }
.lab-portal-status div { display: grid; gap: 0.0625rem; }
.lab-portal-status dt { color: var(--ink-3); font-size: var(--fs-xs); }
.lab-portal-status dd { margin: 0; }
.lab-portal-link { display: grid; gap: 0.5rem; }
.lab-portal-link p { margin: 0; }
.lab-portal-url { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
.lab-portal-url input { inline-size: 100%; font-family: ui-monospace, monospace; font-size: var(--fs-s); }
.lab-portal-options { display: grid; gap: 0.25rem; }
.lab-portal-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.lab-side[data-lab-side="accepted"] { color: var(--navy-700); }
.lab-last-message { overflow-wrap: anywhere; }
.lab-last-message.is-lab { color: var(--navy-800); font-weight: 500; }
.lab-step.is-lab-side strong { color: var(--navy-700); }
.lab-message-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; margin-block-start: 0.75rem; }
.lab-view.is-good { border-color: var(--ok-700); color: var(--ok-700); }
.lab-view.is-good small { background: var(--ok-50); color: var(--ok-700); }
.lab-invoices { display: grid; gap: 1rem; }
.lab-invoice { display: grid; gap: 0.625rem; padding-block-start: 0.875rem; border-block-start: 1px solid var(--line); }
.lab-invoice-head { display: grid; gap: 0.125rem; }
.lab-invoice-head h3 { margin: 0; font-size: var(--fs-m); }
.lab-invoice-lines td.lab-invoice-differs { background: var(--amber-50); color: var(--amber-700); font-weight: 600; }
.lab-invoice-reprice { padding: 0.5rem 0.75rem; border: 1px solid var(--amber-500); border-radius: var(--r-m); background: var(--amber-50); }
.lab-invoices-history summary { cursor: pointer; color: var(--navy-700); }
/* اعتراض به ردیفِ فاکتور (N8): علت کهربایی کنارِ همان ردیف — نه قرمز، چون هنوز تصمیم گرفته نشده. */
.lab-invoice-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block-start: 0.25rem; }
.lab-dispute-cell { display: grid; gap: 0.375rem; min-inline-size: 14rem; }
.lab-dispute-input { inline-size: 100%; }
.lab-dispute-reason { display: block; padding: 0.125rem 0.5rem; border-inline-start: 3px solid var(--amber-500); background: var(--amber-50);
    color: var(--amber-700); font-size: var(--fs-s); line-height: 1.8; }
.lab-invoice-disputes { margin: 0.25rem 0 0; padding: 0.375rem 0.625rem; list-style: none; border-inline-start: 3px solid var(--amber-500);
    background: var(--amber-50); color: var(--amber-700); font-size: var(--fs-s); line-height: 1.8; }
/* حساب در میزِ لابراتوار (N8): هر صورت‌حساب یک ردیف؛ «در راهِ مطب» با خطِ نقطه‌چین تا مطب اعمالش کند. */
.lab-desk-account { display: grid; gap: 0.875rem; }
.lab-account-head { display: grid; gap: 0.125rem; }
.lab-account-head h3 { margin: 0; font-size: var(--fs-m); }
.lab-ledger-invoices { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.lab-ledger-invoice { display: grid; gap: 0.375rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.lab-ledger-invoice.is-pending { border-style: dashed; background: var(--surface-2); }
.lab-ledger-invoice-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.lab-ledger-invoice .form-actions { margin: 0; }
.lab-ledger-amount { inline-size: 9rem; max-inline-size: 100%; text-align: end; }
.lab-account-book summary { cursor: pointer; color: var(--navy-700); }

/* پیکِ لابراتوار (N9): کدِ تحویل تنها چیزِ درشتِ کارت است — منشی آن را از دور می‌خواند و به پیک می‌گوید. */
.lab-courier { display: grid; gap: 0.5rem; margin-block-start: 0.5rem; }
.lab-courier > .btn { justify-self: start; }
.lab-courier-visits { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.lab-courier-visit { display: grid; gap: 0.375rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.lab-courier-visit.is-planned { border-color: var(--cyan-300); background: var(--cyan-50); }
.lab-courier-visit.is-cancelled { opacity: 0.7; }
.lab-courier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.lab-courier-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 0; }
.lab-courier-code bdi, .courier-today-code bdi { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--navy-900);
    font-variant-numeric: tabular-nums; }
.lab-courier-cases { margin: 0; padding-inline-start: 1.25rem; font-size: var(--fs-s); line-height: 1.8; }
.lab-courier-cancel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lab-courier-cancel input { flex: 1 1 12rem; min-inline-size: 0; }
.lab-courier-visit .form-actions { margin: 0; }
.lab-courier-pick { display: grid; gap: 0.25rem; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.lab-courier-pick legend { padding-inline: 0.25rem; font-size: var(--fs-s); color: var(--ink-2); }
.courier-today { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 0.75rem; }
.courier-today-card { display: flex; flex: 1 1 18rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0.875rem;
    border: 1px solid var(--cyan-300); border-radius: var(--r-m); background: var(--cyan-50); }
.courier-today-card.is-done { border-color: var(--line); background: var(--surface-2); }
.courier-today-what { display: grid; gap: 0.125rem; min-inline-size: 0; }
.courier-today-what strong { display: inline-flex; align-items: center; gap: 0.375rem; }
.courier-today-code { display: grid; justify-items: center; gap: 0; }
.courier-today-code span { font-size: var(--fs-xs); color: var(--ink-2); }

/* پیک در میزِ لابراتوار: گوشی در دستِ پیک — یک ستون، دکمه‌ی درشت، کدِ چهاررقمی در ورودیِ بزرگ. */
.lab-desk-courier { display: grid; gap: 0.75rem; }
.courier-stops { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.courier-stop { display: grid; gap: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.courier-stop.is-done { background: var(--surface-2); }
.courier-stop.is-cancelled { opacity: 0.7; }
.courier-stop-head { display: flex; align-items: flex-start; gap: 0.625rem; }
.courier-stop-seq { display: inline-grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 50%;
    background: var(--navy-700); color: var(--surface); font-weight: 700; }
.courier-stop.is-done .courier-stop-seq, .courier-stop.is-cancelled .courier-stop-seq { background: var(--ink-3); }
.courier-stop-who { display: grid; flex: 1; gap: 0.125rem; min-inline-size: 0; }
.courier-stop-where { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; }
.courier-stop-where a { display: inline-flex; align-items: center; gap: 0.25rem; min-block-size: 2.75rem; }
.courier-stop-orders { margin: 0; padding-inline-start: 1.25rem; font-size: var(--fs-s); line-height: 1.8; }
.courier-stop-done { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0; }
.courier-stop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.courier-stop-actions .btn-primary { min-block-size: 2.75rem; }
.courier-handoff { display: grid; gap: 0.75rem; padding: 0.75rem; border-radius: var(--r-m); background: var(--cyan-50); }
.courier-code-input { inline-size: 8rem; font-size: 1.75rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.courier-boxes { display: inline-flex; align-items: center; gap: 0.75rem; }
.courier-boxes strong { min-inline-size: 2rem; font-size: var(--fs-l); text-align: center; }
.courier-boxes .btn { min-inline-size: 2.75rem; min-block-size: 2.75rem; border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--surface); font-size: var(--fs-l); }
.courier-ready { display: grid; gap: 0.5rem; }
.courier-ready h3 { margin: 0; font-size: var(--fs-m); }
.courier-ready-clinic { display: grid; gap: 0.25rem; padding: 0.625rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.courier-ready-clinic .form-actions { margin: 0; }

/* ---------- پذیرش و صندوقِ بی‌اتصال (مهر ۱۴۰۵) ---------- */
/* رسیدِ موقت کهربایی است، نه سبز: پول گرفته شد، ولی هنوز در حساب نیست. */
.collect-queued { border-color: var(--amber-500); background: var(--amber-50); }
.collect-queued .collect-done-text strong { color: var(--amber-700); }
.collect-offline { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--amber-500); border-radius: var(--r-m); background: var(--amber-50); color: var(--amber-700); font-size: var(--fs-s); line-height: 1.8; }
.collect-offline > span { flex: 1; min-inline-size: 0; }
.collect-offline > .icon { flex: none; margin-block-start: 0.25em; }
.offline-payments { flex-wrap: nowrap; align-items: flex-start; }
.offline-payments > .icon { flex: none; margin-block-start: 0.2em; }
.offline-payments-body { display: grid; gap: 0.25rem; flex: 1; min-inline-size: 0; }
.offline-payments-body ul { display: grid; gap: 0.25rem; margin: 0; padding-inline-start: 1.25rem; }
.offline-payments-body li { overflow-wrap: anywhere; }
.queued-pill { display: inline-flex; align-items: center; gap: 0.25rem; }
[data-account-stale] { flex-wrap: nowrap; align-items: flex-start; }
[data-account-stale] > span { flex: 1; min-inline-size: 0; }
.doc-provisional { padding: 2mm 3mm; border: 1px dashed #000; }

.doc-code { font-family: ui-monospace, monospace; letter-spacing: 0.06em; }

/* ---------- نوبت‌های آنلاین — سایت‌های نوبت‌دهی (مهر ۱۴۰۵) ---------- */
.online-panel { display: grid; gap: 0.875rem; }
.online-panel > .panel-head { margin-block-end: 0; }
.online-sources { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.online-source { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.online-source-name { display: inline-flex; align-items: center; gap: 0.375rem; }
.online-source .muted { font-size: var(--fs-s); }
.online-sources .banner { flex-wrap: nowrap; align-items: flex-start; margin: 0; }
.online-sources .banner > .icon { flex: none; margin-block-start: 0.25em; }
.online-sources .hint { margin: 0; line-height: 1.9; }
.online-subhead { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; font-size: var(--fs-m); }
/* کارتِ منتظرِ بررسی کهربایی (همان «درخواستِ باز»)، لغوشده در سایت قرمز، آمده‌ی هشداردار خاکستری‌آبی. */
.online-card.is-removed { border-inline-start: 4px solid var(--alert-700); }
.online-card.is-warning { border-inline-start: 4px solid var(--navy-700); }
.online-problem { flex-wrap: nowrap; align-items: flex-start; margin: 0.5rem 0 0; line-height: 1.9; }
.online-problem > .icon { flex: none; margin-block-start: 0.3em; }
.banner-text { flex: 1; min-inline-size: 0; }
.online-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; }
.online-form .file-chip { flex-wrap: wrap; }
.online-empty { padding: 1.25rem 1rem; }
.online-empty p { margin: 0; }
.online-upcoming td { vertical-align: middle; }
.online-upcoming td .muted { font-size: var(--fs-s); }
.online-ignored summary { cursor: pointer; color: var(--navy-700); }
.online-ignored-list { display: grid; gap: 0.375rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.online-ignored-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-s); }
[data-online-badge] { display: inline-flex; align-items: center; gap: 0.25rem; }
.online-panel > .panel-head { flex-wrap: wrap; }

/* ---------- صفِ سامانه‌ی مؤدیان (مهر ۱۴۰۵) ---------- */
/* minmax(0, 1fr): بی آن جدولِ پهن ستونِ شبکه را پهن می‌کرد و صفحه روی موبایل افقی می‌لغزید؛ جدول خودش در table-wrap می‌لغزد. */
.moadian-queue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; margin-block-start: 1.25rem; }
.moadian-queue > .panel-head { flex-wrap: wrap; margin-block-end: 0; }
.moadian-queue .hint { margin: 0; line-height: 1.9; }
.moadian-ready { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.moadian-ready li { display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.9; }
.moadian-ready li > .icon { flex: none; margin-block-start: 0.3em; }
.moadian-ready li > span { flex: 1; min-inline-size: 0; }
.moadian-ready .is-ok > .icon { color: var(--ok-700); }
.moadian-ready .is-missing > .icon { color: var(--amber-700); }
.moadian-switch { display: grid; gap: 0.625rem; }
.moadian-from { max-inline-size: 22rem; }
/* شمارِ هر وضع: فقط «رد شده» و «ساخته نشد» رنگ می‌گیرند — همان دو که کاری می‌خواهند. */
.moadian-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(7.5rem, 100%), 1fr)); gap: 0.5rem; margin: 0; }
.moadian-counts > div { display: grid; gap: 0.125rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.moadian-counts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.moadian-counts dd { margin: 0; color: var(--navy-900); font-size: var(--fs-l); font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.moadian-counts .is-good dd { color: var(--ok-700); }
.moadian-counts .is-bad { border-color: var(--alert-200); background: var(--alert-50); }
.moadian-counts .is-bad dd { color: var(--alert-700); }
.moadian-counts .is-warn { border-color: var(--amber-500); background: var(--amber-50); }
.moadian-counts .is-warn dd { color: var(--amber-700); }
.moadian-queue .banner { flex-wrap: nowrap; align-items: flex-start; margin: 0; }
.moadian-queue .banner > .icon { flex: none; margin-block-start: 0.25em; }
.moadian-subhead { margin: 0.25rem 0 0; font-size: var(--fs-m); }
.moadian-attention td { vertical-align: top; }
.moadian-attention td:last-child { white-space: nowrap; }
/* پیامِ سامانه گاهی چند خط است؛ ستونش باید جا داشته باشد و بشکند، نه جدول را پهن کند. */
.moadian-problem { min-inline-size: 14rem; line-height: 1.9; overflow-wrap: anywhere; }
.moadian-recent summary { cursor: pointer; color: var(--navy-700); }
.moadian-recent .table-wrap { margin-block-start: 0.5rem; }

/* ---------- پلِ نسخه‌ی الکترونیکِ بیمه (مهر ۱۴۰۵) ---------- */
.erx-panel { display: grid; gap: 0.5rem; margin-block: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.erx-panel.is-done { background: var(--ok-50); }
.erx-panel .hint { margin: 0; line-height: 1.9; }
.erx-title { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: var(--fs-m); }
.erx-line { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; line-height: 1.9; }
.erx-line > .icon { flex: none; margin-block-start: 0.3em; color: var(--ok-700); }
.erx-steps { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.erx-steps > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; line-height: 1.9; }
.erx-steps select { max-inline-size: 100%; }
.erx-steps > li.erx-code-step { display: grid; justify-items: start; gap: 0.25rem; }
.erx-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; inline-size: 100%; }
.erx-code-row input { flex: 0 1 16rem; min-inline-size: 0; }
/* روی موبایل برچسبِ «ثبت‌نشده در بیمه» در ستونِ وضع جا نمی‌شد و ردیف را پهن می‌کرد؛ برچسب به سطرِ سوم می‌رود. */
@media (max-width: 560px) {
  .rx-row-main:has(> [data-erx-chip]) {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "no date doctor chevron"
      "items items items chevron"
      "state state state chevron";
  }
  .rx-row-main > [data-erx-chip] { justify-self: start; }
}

/* سطح فقط در معاینه و پیشنهادِ خدمت از روی یافته‌ها (مهر ۱۴۰۵). پیشنهاد زیرِ یافته‌های معاینه می‌نشیند و قابش خط‌چین است:
   هنوز چیزی نیست، فقط پیشنهاد است. «سطح از معاینه» جای انتخاب‌گرِ سطحِ قدیمی را در طرح و ثبتِ درمان گرفته. */
.exam-suggest {
  margin-block-end: 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px dashed var(--cyan-500);
  border-radius: var(--r-m);
  background: var(--surface);
}

.exam-suggest-list { display: grid; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.exam-suggest-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.exam-suggest-list li .check { flex: 1 1 14rem; min-inline-size: 0; }
.exam-suggest-list li.is-added { opacity: 0.75; }
.exam-suggest-service { flex: 0 1 16rem; min-inline-size: 0; font-size: var(--fs-s); }
select.exam-suggest-service { inline-size: auto; max-inline-size: 100%; }

.surface-from-exam { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.surface-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface-2);
}

.suggest-adder { align-items: end; }
.suggest-adder .field-action { align-self: end; }

/* ---------- سفارشِ مجموعه‌ی لابراتوار (مهر ۱۴۰۵) ---------- */

/* نوارِ دندان‌ها: واحدهای یک پل با خطِ میانی به هم چسبیده‌اند، پونتیک توخالی (جای خالیِ دندان)، رنگِ چیپ حالِ واحد. */
.lab-unit-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0.375rem 0; padding: 0; list-style: none; }
.lab-unit-chip {
  position: relative;
  display: inline-grid;
  justify-items: center;
  min-inline-size: 2.5rem;
  padding: 0.25rem 0.5rem;
  border: 1.5px solid var(--navy-700);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--navy-900);
  font-weight: 700;
  line-height: 1.3;
}
.lab-unit-chip small { color: var(--ink-3); font-size: 0.6875rem; font-weight: 400; }
.lab-unit-chip.is-pontic { border-style: dashed; background: var(--surface-2); color: var(--ink-2); }
.lab-unit-chip.is-joined::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(-0.375rem - 1.5px);
  inset-block-start: 50%;
  inline-size: 0.375rem;
  block-size: 3px;
  background: var(--navy-700);
}
.lab-unit-chip.is-done { border-color: var(--ok-700); background: var(--ok-50); color: var(--ok-700); }
.lab-unit-chip.is-placed { border-color: var(--line-strong); background: var(--surface-2); color: var(--ink-3); }
.lab-unit-strip.is-mini { gap: 0.25rem; margin: 0.25rem 0; }
.lab-unit-strip.is-mini .lab-unit-chip { min-inline-size: 1.875rem; padding: 0 0.3125rem; border-width: 1px; border-radius: var(--r-s); font-size: var(--fs-xs); }
.lab-unit-strip.is-mini .lab-unit-chip.is-joined::after { inset-inline-end: calc(-0.25rem - 1px); inline-size: 0.25rem; block-size: 2px; }

.lab-units { display: grid; gap: 0.375rem; }
.lab-unit-table input, .lab-unit-table select { min-inline-size: 0; inline-size: 100%; }
.lab-unit-table .lab-unit-tooth { inline-size: 4rem; }
.lab-unit-table .lab-unit-shade { inline-size: 5.5rem; }
.lab-unit-table td { vertical-align: middle; }
.lab-unit-table input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.lab-unit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.lab-unit-sum { color: var(--ink-2); font-size: var(--fs-s); }

.lab-unit-picker { margin: 0.5rem 0; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.lab-unit-picker legend { padding-inline: 0.25rem; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.lab-unit-picker-tools { display: flex; gap: 0.75rem; margin-block-end: 0.25rem; font-size: var(--fs-xs); }
.lab-unit-picker-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
.lab-unit-picker-list .is-disabled { opacity: 0.55; }
.lab-unit-picker-list small { margin-inline-start: 0.25rem; }

.lab-material { margin-inline: 0.25rem; color: var(--navy-800); }
.lab-remake-pill { margin-inline-start: 0.375rem; vertical-align: middle; }
.lab-row-counts { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--ink-3); }
.lab-row-counts span { display: inline-flex; align-items: center; gap: 0.25rem; }
.lab-partly { color: var(--amber-700); font-weight: 600; }
.lab-no-appointment { margin-block-start: 0.25rem; }
.lab-due { color: var(--amber-700); }

.lab-tryin-units { display: grid; gap: 0.375rem; margin: 0.5rem 0; padding: 0; list-style: none; }
.lab-tryin-units li { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: 0.5rem; align-items: center; }
@media (max-width: 40rem) {
  .lab-tryin-units li { grid-template-columns: minmax(0, 1fr); }
}

/* پرونده‌ی یک سفارش: واحدها، امتحان‌ها، بازسازی و پیوست‌ها کنارِ هم */
.lab-case-detail { display: grid; gap: 0.5rem; }
.lab-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0.75rem; }
.lab-detail-block { padding: 0.625rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.lab-detail-block h4 { margin: 0 0 0.5rem; color: var(--navy-900); font-size: var(--fs-m); }
.lab-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-start: 0.5rem; }
.lab-detail-actions select { max-inline-size: 18rem; }
.lab-tryins, .lab-remakes, .lab-attachments { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.lab-tryin { display: grid; gap: 0.125rem; padding: 0.375rem 0.625rem; border-inline-start: 3px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface-2); }
.lab-tryin.is-ok { border-inline-start-color: var(--ok-700); }
.lab-tryin.is-change { border-inline-start-color: var(--amber-500); }
.lab-tryin .pill { justify-self: start; }
.lab-remakes li, .lab-attachments li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.lab-attach-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.5rem; }
.lab-attach-form label.btn { cursor: pointer; }
.lab-attach-form:focus-within label.btn { box-shadow: var(--ring); }

.lab-step-unitschanged, .lab-step-tryin, .lab-step-attached { border-inline-start-color: var(--cyan-500); }
.lab-step-partlyreceived, .lab-step-partlydelivered { border-inline-start-color: var(--ok-700); }
.lab-step-nextstage { border-inline-start-color: var(--navy-700); }
.lab-step-remakeordered { border-inline-start-color: var(--amber-500); }

/* نوبتِ زودتر از آماده‌شدنِ کارِ لابراتوار */
.qbook-lab-warning { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.5rem 0; }

/* تعدیلِ تسویه */
.settlement-adjustments .is-negative { color: var(--alert-700); }

/* پورتالِ لابراتوار: واحدهای کار */
.lab-job-units { margin: 0.25rem 0 0.5rem; }
.lab-job-unit-notes { display: grid; gap: 0.125rem; margin: 0 0 0.5rem; padding: 0; list-style: none; font-size: var(--fs-s); color: var(--ink-2); }
.lab-unit-chip.is-done small { color: var(--ok-700); }

/* صفحه‌ی QRِ برگه‌ی جعبه (بی ورود) */
.lab-box-page { max-inline-size: 46rem; margin-inline: auto; padding: 1rem; }
.lab-box-card { display: grid; gap: 0.75rem; }
.lab-box-head h1 { margin: 0.25rem 0; font-size: var(--fs-xl); }
.lab-box-head .pill { margin-inline-end: 0.25rem; }
.lab-box-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem; margin: 0; }
.lab-box-facts div { padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.lab-box-facts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.lab-box-facts dd { margin: 0; font-weight: 700; color: var(--navy-900); }
.lab-box-note { margin: 0; padding: 0.5rem 0.75rem; border-inline-start: 3px solid var(--cyan-500); background: var(--cyan-50); border-radius: var(--r-s); }
.lab-box-subtitle { margin: 0.25rem 0 0; font-size: var(--fs-l); }
.lab-box-foot { margin: 0; font-size: var(--fs-s); }

/* برگه‌ی سفارش و جعبه، چاپی: QR کنارِ مشخصات، جدولِ واحدها زیرِ شرحِ کار */
.lab-box-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4mm; align-items: start; }
.lab-box-qr { display: grid; justify-items: center; gap: 1mm; margin: 0; }
.lab-box-qr-code { inline-size: 26mm; block-size: 26mm; }
.lab-box-qr figcaption { max-inline-size: 34mm; font-size: 7.5pt; text-align: center; }
.lab-box-units { margin-block-start: 3mm; }
.lab-box-units td { font-size: 10.5pt; }
.doc-subtitle { margin: 4mm 0 1.5mm; font-size: 10.5pt; }
.lab-unit-chip.is-ready { border-color: var(--cyan-500); background: var(--cyan-50); color: var(--navy-800); }

/* ---------- میزِ مدیر و حضورِ سریع (مهر ۱۴۰۵) ---------- */

.panel-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* نوارِ «امروزِ مطب»: هر خانه پیوندی است به فهرستِ همان افراد یا کارها */
.desk-today { margin-block-end: 1rem; }
.desk-today-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.5rem; }
.desk-today-head h2 { margin: 0; font-size: var(--fs-l); color: var(--navy-900); }
.desk-today-head h2 small { color: var(--ink-3); font-size: var(--fs-s); font-weight: 400; }
.desk-today-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.5rem; }
.desk-cell {
  display: grid;
  gap: 0.125rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.desk-cell:hover { border-color: var(--navy-700); }
.desk-cell:focus-visible { outline: none; box-shadow: var(--ring); }
.desk-cell-label { color: var(--ink-3); font-size: var(--fs-xs); }
.desk-cell-value { color: var(--navy-900); font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; }
.desk-cell-value small { color: var(--ink-2); font-size: var(--fs-s); font-weight: 400; }
.desk-cell-note { color: var(--ink-2); font-size: var(--fs-xs); }
.desk-cell.is-attention { border-color: var(--amber-500); background: var(--amber-50); }

.desk-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.desk-main, .desk-side { display: grid; gap: 1rem; min-inline-size: 0; }
@media (max-width: 64rem) {
  .desk-layout { grid-template-columns: minmax(0, 1fr); }
}
.desk-shortcuts ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.desk-shortcuts a { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: var(--r-s); color: var(--navy-800); text-decoration: none; }
.desk-shortcuts a:hover { background: var(--surface-2); }
.desk-shortcuts h2, .desk-mine h2 { margin: 0 0 0.5rem; font-size: var(--fs-m); }
.my-desk-manager { margin-block-end: 1rem; }

/* دکمه‌های اسم: رنگِ دکمه وضع را می‌گوید */
.quick-attendance { display: grid; gap: 0.5rem; }
.quick-counts { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; }
.quick-counts div { display: grid; padding: 0.25rem 0.625rem; border-radius: var(--r-m); background: var(--surface-2); }
.quick-counts dt { color: var(--ink-3); font-size: var(--fs-xs); }
.quick-counts dd { margin: 0; font-weight: 700; color: var(--navy-900); }
.quick-counts .is-attention { background: var(--amber-50); }
.quick-counts .is-attention dd { color: var(--amber-700); }
.quick-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.quick-person { display: flex; align-items: stretch; border: 1.5px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); overflow: hidden; }
.quick-name {
  flex: 1;
  display: grid;
  gap: 0.125rem;
  min-block-size: 3rem;
  padding: 0.375rem 0.625rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.quick-name:focus-visible, .quick-more:focus-visible { outline: none; box-shadow: inset var(--ring); }
.quick-name strong { font-size: var(--fs-s); }
.quick-name small { color: var(--ink-2); font-size: var(--fs-xs); }
.quick-name:disabled { cursor: default; }
.quick-more { padding-inline: 0.5rem; border: 0; border-inline-start: 1px solid var(--line); background: none; color: var(--ink-3); cursor: pointer; }
.quick-person.is-in { border-color: var(--ok-700); background: var(--ok-50); }
.quick-person.is-in .quick-name small { color: var(--ok-700); }
.quick-person.is-late { border-color: var(--amber-500); background: var(--amber-50); }
.quick-person.is-late .quick-name small { color: var(--amber-700); }
.quick-person.is-leave, .quick-person.is-off { border-style: dashed; background: var(--surface-2); color: var(--ink-3); }
.quick-person.is-out { border-color: var(--line); background: var(--surface-2); }
.quick-attendance.is-large .quick-people { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.625rem; }
.quick-attendance.is-large .quick-name { min-block-size: 4.5rem; padding: 0.75rem 1rem; }
.quick-attendance.is-large .quick-name strong { font-size: var(--fs-l); }
.quick-attendance.is-large .quick-name small { font-size: var(--fs-s); }
.quick-toast { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.quick-menu { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.quick-menu h3 { margin: 0; font-size: var(--fs-m); }
.quick-leave, .quick-undo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.quick-undo input { flex: 1 1 12rem; min-inline-size: 0; }

/* صفِ تصمیم */
.decision-queue .panel-head h2 { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.decision-cards { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.decision-card {
  display: grid;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--navy-700);
  border-radius: var(--r-m);
  background: var(--surface);
}
.decision-card.urgency-0 { border-inline-start-color: var(--alert-600); }
.decision-card.has-warning { background: var(--amber-50); }
.decision-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.decision-what { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--ink-2); font-size: var(--fs-s); }
.decision-title { color: var(--navy-800); font-weight: 600; }
.decision-effects { display: grid; gap: 0.125rem; margin: 0; padding-inline-start: 1.25rem; color: var(--ink-2); font-size: var(--fs-s); }
.decision-warnings { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.decision-actions, .decision-bulk { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.decision-bulk { margin-block-end: 0.5rem; }
.decision-reject { display: grid; gap: 0.375rem; }
.decision-queue.is-compact .decision-card { padding: 0.5rem 0.75rem; }
.decision-empty { margin: 0; }

/* پوششِ امروز */
.coverage-doctors { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.coverage-doctor { display: grid; gap: 0.375rem; padding: 0.625rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.coverage-doctor.is-uncovered { border-color: var(--amber-500); }
.coverage-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.coverage-assistants, .coverage-suggestions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.coverage-warning { margin: 0; }

.widget-default { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
@media (prefers-reduced-motion: no-preference) {
  .quick-person { transition: background-color 0.2s, border-color 0.2s; }
}

/* ---------- زنگوله و صندوقِ اعلان‌ها (مهر ۱۴۰۵، E4) ---------- */

/* زنگوله در نوارِ تیره‌ی کناری می‌نشیند؛ در موبایل کنارِ دکمه‌ی فهرست، نه وسطِ سربرگ. */
.bell { position: relative; margin-inline-start: auto; flex: none; }

.bell-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: #D3DEEE;
  cursor: pointer;
}

.bell-button:hover { background: rgb(255 255 255 / 0.08); }
.bell-button:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; }
.bell-button.has-unread { color: #fff; }

.bell-count {
  position: absolute;
  inset-block-start: 0.25rem;
  inset-inline-end: 0.2rem;
  min-inline-size: 1.25rem;
  padding-inline: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--cyan-400);
  color: #081A33;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

/* سایه‌ی کمرنگ روی صفحه تا پنجره از کارت‌های سفیدِ پیشخوان جدا دیده شود؛ لمسِ هر جای آن پنجره را می‌بندد. */
.bell-backdrop { position: fixed; inset: 0; z-index: 55; background: rgb(var(--shadow-hue) / 0.12); }

.bell-panel {
  position: fixed;
  z-index: 60;
  inset-block-start: 0.75rem;
  inset-inline-start: calc(var(--sidebar-w) + 0.75rem);
  inline-size: min(25rem, calc(100vw - var(--sidebar-w) - 1.5rem));
  max-block-size: calc(100dvh - 1.5rem);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 56px rgb(var(--shadow-hue) / 0.28), 0 2px 8px rgb(var(--shadow-hue) / 0.12);
  overflow: hidden;
}

.bell-head, .bell-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

.bell-head { border-block-end: 1px solid var(--line); }
.bell-head h2 { margin: 0; font-size: var(--fs-m); }
.bell-foot { border-block-start: 1px solid var(--line); font-size: var(--fs-s); }
.bell-foot a { display: inline-flex; align-items: center; gap: 0.25rem; }
.bell-loading { padding: 1rem; }

.bell-empty { display: grid; justify-items: center; gap: 0.25rem; padding: 1.75rem 1rem; color: var(--ink-3); text-align: center; }
.bell-empty p { margin: 0; }

.bell-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.bell-item + .bell-item { border-block-start: 1px solid var(--line); }

.bell-open {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  inline-size: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.bell-open:hover { background: var(--surface-2); }
.bell-open:focus-visible { outline: 2px solid var(--navy-700); outline-offset: -2px; }

.bell-icon, .notice-icon {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--r-pill);
  background: var(--cyan-50);
  color: var(--navy-800);
}

.tone-ok .bell-icon, .tone-ok .notice-icon { background: var(--ok-50); color: var(--ok-700); }
.tone-warn .bell-icon, .tone-warn .notice-icon { background: var(--amber-50); color: var(--amber-700); }
.tone-bad .bell-icon, .tone-bad .notice-icon { background: var(--alert-50); color: var(--alert-700); }

.bell-text { display: grid; gap: 0.125rem; min-inline-size: 0; }
.bell-text strong { font-weight: 500; line-height: 1.7; }
.bell-item.is-unread .bell-text strong { font-weight: 700; }

/* متنِ چندخطی (مثلِ «صبحِ مطب») در فهرستِ کوتاه دو خط؛ کاملش در صندوق. */
.bell-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--fs-s);
  white-space: pre-line;
}

.bell-when { color: var(--ink-3); font-size: var(--fs-xs); }

.bell-item.is-unread .bell-open { background: linear-gradient(to left, var(--cyan-50), transparent 70%); }
.bell-item.is-unread .bell-open:hover { background: var(--surface-2); }

@media (max-width: 56rem) {
  .bell-panel {
    inset-block-start: 3.75rem;
    inset-inline: 0.5rem;
    inline-size: auto;
    max-block-size: calc(100dvh - 4.5rem);
  }

  .bell-backdrop { background: rgb(var(--shadow-hue) / 0.25); }
}

/* ---------- صفحه‌ی اعلان‌ها ---------- */

.notice-filter { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-block: 1rem; }
.notice-filter .chip { display: inline-flex; gap: 0.25rem; padding: 0.25rem 0.875rem; border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-s); cursor: pointer; }
.notice-filter .chip.is-on { border-color: var(--navy-700); background: var(--navy-700); color: var(--fill-ink); }

.notice-day { margin-block-end: 1.5rem; }
.notice-day-title { margin: 0 0 0.5rem; color: var(--ink-3); font-size: var(--fs-s); font-weight: 600; }

.notice-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }

.notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
}

.notice + .notice { border-block-start: 1px solid var(--line); }
.notice.is-unread { background: linear-gradient(to left, var(--cyan-50), transparent 60%); }
.notice-text { display: grid; gap: 0.25rem; min-inline-size: 0; }
.notice-text p { margin: 0; }
.notice-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.notice-title strong { font-weight: 600; }
.notice-new { padding-inline: 0.5rem; border-radius: var(--r-pill); background: var(--cyan-100); color: var(--navy-900); font-size: var(--fs-xs); }
.notice-body { color: var(--ink-2); white-space: pre-line; line-height: 1.9; }
.notice-meta { color: var(--ink-3); font-size: var(--fs-xs); }
.notice-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; justify-content: end; }

@media (max-width: 40rem) {
  .notice { grid-template-columns: auto minmax(0, 1fr); }
  .notice-actions { grid-column: 2; justify-content: start; }
}

/* ---------- تنظیمِ اعلان‌ها ---------- */

.notice-settings { display: grid; gap: 1.25rem; margin-block-start: 1rem; max-inline-size: 52rem; }
.notice-settings .panel-head h2 { display: inline-flex; align-items: center; gap: 0.5rem; }
.push-on { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.75rem; color: var(--ok-700); font-weight: 500; }
.notice-settings .subhead { margin: 1.25rem 0 0.5rem; font-size: var(--fs-s); color: var(--ink-2); }

.device-list { list-style: none; margin: 0; padding: 0; }
.device-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 0.625rem; }
.device-list li + li { border-block-start: 1px solid var(--line); }
.device-list small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }

.kind-rows { display: grid; margin-block: 0.75rem 1.25rem; }

.kind-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.875rem;
}

.kind-row + .kind-row { border-block-start: 1px solid var(--line); }
.kind-name { display: flex; align-items: flex-start; gap: 0.625rem; }
.kind-name .icon { margin-block-start: 0.3rem; color: var(--navy-700); flex: none; }
.kind-name strong { display: block; font-weight: 600; }
.kind-name small { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.8; }
.kind-choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 0.5rem 0.875rem; }
.kind-sms { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-s); white-space: nowrap; }

@media (max-width: 48rem) {
  .kind-row { grid-template-columns: minmax(0, 1fr); }
  .kind-choice { justify-content: start; }
}

.brief-preview { display: grid; gap: 0.5rem; margin-block-start: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--r-m); background: var(--surface-2); }
.brief-preview ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.brief-preview li { padding-inline-start: 0.75rem; border-inline-start: 3px solid var(--cyan-400); }
.brief-preview li.tone-warn { border-inline-start-color: var(--amber-500); }

/* ---------- خروجِ ثبت‌نشده در میزِ کار ---------- */

.clock-gaps { margin-block: 1rem; border-inline-start: 4px solid var(--amber-500); }
.clock-gaps .panel-head h2 { display: inline-flex; align-items: center; gap: 0.5rem; }
.gap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.gap { display: grid; gap: 0.5rem; padding: 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.gap.is-focus { box-shadow: var(--ring); }
.gap-when small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.gap-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; }
.gap-form .field:first-child input { inline-size: 6rem; }
.gap-form .field:nth-child(2) { flex: 1 1 14rem; }

@media (prefers-reduced-motion: no-preference) {
  .bell-button.has-unread .icon { animation: bell-nudge 0.6s ease-out 1; }
}

@keyframes bell-nudge {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -12deg; }
  60% { rotate: 8deg; }
}

/* ---------- اثرِ مرخصی روی نوبت‌ها (مهر ۱۴۰۵، H1) ---------- */

.impact-panel { display: grid; gap: 0.625rem; margin-block-start: 0.5rem; padding: 0.75rem 0.875rem; border-radius: var(--r-m); background: var(--surface-2); }
.impact-summary { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.impact-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1rem; }
.impact-preview { flex: 1 1 16rem; font-size: var(--fs-s); }
.impact-preview summary { cursor: pointer; color: var(--navy-700); }
.impact-preview p { margin: 0.375rem 0 0; padding: 0.5rem 0.75rem; border-radius: var(--r-s); background: var(--surface); white-space: pre-line; line-height: 1.9; }

.impact-list { list-style: none; margin: 0; padding: 0; display: grid; }

.impact-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding-block: 0.5rem;
}

.impact-row + .impact-row { border-block-start: 1px solid var(--line); }
.impact-when { color: var(--ink-2); font-size: var(--fs-s); }
.impact-who { display: grid; min-inline-size: 0; }
.impact-who small { color: var(--ink-3); font-size: var(--fs-xs); }
.impact-state { justify-self: end; }
.impact-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.impact-row.state-moved .impact-who a, .impact-row.state-cancelled .impact-who a { color: var(--ink-3); }
.impact-cover { display: grid; gap: 0.375rem; }
.impact-cover p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; }

@media (max-width: 40rem) {
  .impact-row { grid-template-columns: minmax(0, 1fr); }
  .impact-state { justify-self: start; }
}

.decision-impact-toggle, .leave-impact-toggle { justify-self: start; font-size: var(--fs-s); }
.leave-item .impact-panel { flex-basis: 100%; grid-column: 1 / -1; }
.decision-followups { display: grid; gap: 0.75rem; margin-block-end: 1rem; }
.decision-followup { padding: 0.75rem 0.875rem; border: 1px solid var(--ok-700); border-radius: var(--r-l); background: var(--surface); }
.decision-followup-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* ---------- صفحه‌ی بیمار: زمانِ تازه ---------- */

.reschedule-days { display: grid; gap: 1rem; }
.reschedule-day h2 { margin: 0 0 0.5rem; font-size: var(--fs-m); color: var(--ink-2); }
.reschedule-times { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slot-chip-large { min-block-size: 2.75rem; min-inline-size: 4.5rem; font-size: var(--fs-m); }
.reschedule-other { display: grid; justify-items: center; gap: 0.5rem; margin-block-start: 1.25rem; }
.reschedule-confirm { display: grid; gap: 0.75rem; }
.reschedule-confirm p { margin: 0; }

/* ---------- برنامه‌ی کاریِ پزشکان (مهر ۱۴۰۵، D5) ---------- */

.sched-branches { margin-block-end: 0.75rem; }
.sched-grid-wrap { margin-block-end: 1.25rem; }
.sched-grid th[scope="col"] { text-align: center; }
.sched-grid th[scope="col"]:first-child { text-align: start; }
.sched-grid th.is-today { background: var(--cyan-50); color: var(--navy-900); font-weight: 600; }
.sched-date { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }

/* ستونِ نامِ پزشک در پیمایشِ افقیِ گوشی سرِ جایش می‌ماند؛ «.data th» پیش‌فرض بالا می‌چسبد، این‌جا کنار. */
.sched-grid tbody th {
  position: sticky;
  inset-block-start: auto;
  inset-inline-start: 0;
  z-index: 1;
  min-inline-size: 9rem;
  border-block-end: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
  white-space: normal;
}

.sched-grid tbody tr.is-selected th { background: var(--amber-50); }
.sched-grid tbody th .pill { margin-block-start: 0.25rem; }
.sched-doctor { display: block; font-weight: 600; text-align: start; }
.sched-cell { min-inline-size: 6.5rem; padding: 0.375rem 0.5rem; text-align: center; vertical-align: top; }
.sched-cell.is-today { background: var(--cyan-50); }
.sched-cell.is-off { color: var(--ink-3); }

.sched-shift {
  display: block;
  margin-block: 0.125rem;
  padding: 0.125rem 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--navy-900);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.sched-shift small { display: block; color: var(--ink-3); font-size: var(--fs-xs); white-space: normal; }
.sched-shift.is-extra { background: var(--ok-50); color: var(--ok-700); }
.sched-shift.is-exception { border-style: dashed; border-color: var(--amber-500); background: var(--amber-50); color: var(--amber-700); }
.sched-none { color: var(--ink-3); }
.sched-free { color: var(--ink-3); text-align: center; }

.sched-branch { display: grid; gap: 0.125rem; padding-block: 0.625rem; border-block-end: 1px solid var(--line); }
.sched-branch:last-of-type { border-block-end: 0; }
.sched-branch p { margin: 0; }
.sched-upcoming { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: var(--fs-s); }
.sched-sub { margin: 1rem 0 0.5rem; color: var(--ink-2); font-size: var(--fs-m); }

.sched-exceptions, .sched-requests { list-style: none; margin: 0; padding: 0; display: grid; }

.sched-exceptions li, .sched-requests li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding-block: 0.375rem;
  border-block-end: 1px solid var(--line);
}

.sched-exceptions li:last-child, .sched-requests li:last-child { border-block-end: 0; }
.sched-exceptions .icon-btn, .sched-requests .btn { margin-inline-start: auto; }

.sched-days { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; }
.sched-days li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0.5rem; border-radius: var(--r-s); }
.sched-days li.is-off { color: var(--ink-3); }
.sched-days li.is-today { background: var(--cyan-50); font-weight: 600; }

/* ویرایشگرِ هفته: نامِ روز، بازه‌ها، کنش‌ها — روی گوشی زیرِ هم. */
.shift-week { display: grid; gap: 0.375rem; margin-block: 0.75rem; }

.shift-day {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  background: var(--surface-2);
}

.shift-day.is-off { border-color: var(--line); border-style: dashed; background: transparent; }
.shift-day-name { color: var(--navy-900); font-weight: 600; }
.shift-day-off { font-size: var(--fs-s); }
.shift-day-windows { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.875rem; }
.shift-window { display: inline-flex; align-items: center; gap: 0.375rem; }
.shift-window input { inline-size: 4.5rem; text-align: center; }
.shift-day-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.25rem; }
.shift-week-total { margin: 0.25rem 0 0; min-block-size: 1.5em; }

@media (max-width: 40rem) {
  .shift-day { grid-template-columns: minmax(0, 1fr); }
  .shift-day-actions { justify-content: start; }
}

.calendar-link { display: grid; gap: 0.5rem; }
.calendar-link p { margin: 0; }
.calendar-link-issued { display: grid; gap: 0.5rem; }
.sched-travel { margin-block-end: 0.5rem; }
.decision-overlap { display: grid; gap: 0.5rem; justify-items: start; }
.decision-overlap p { margin: 0; }
.outside-appointments { display: grid; gap: 0.5rem; margin-block: 0.75rem; }

/* ---------- «فقط کارِ خودم» برای پزشک (مهر ۱۴۰۵، D8) ---------- */

.own-work-note { margin: 0.25rem 0 0; font-size: var(--fs-s); }

/* ---------- شبکه‌ی DentalSuite (مهر ۱۴۰۵، مرحله‌ی ۳) ---------- */

.network-settings { display: grid; gap: 1rem; }
.network-config { margin: 0.5rem 0 0; padding: 0.625rem 0.875rem; border-radius: var(--r-m); background: var(--surface); color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.network-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.network-code-card { display: grid; gap: 0.25rem; flex: 1 1 14rem; min-inline-size: 0; }
.network-code-card p { margin: 0; }
.network-code { color: var(--navy-900); font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.network-qr { inline-size: 8rem; block-size: 8rem; }
.network-lookup { display: grid; gap: 0.5rem; }
.network-lookup h4 { margin: 0; color: var(--ink-2); font-size: var(--fs-m); }
.network-lookup p { margin: 0; }
.lookup-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lookup-row input { flex: 0 1 12rem; text-align: center; text-transform: uppercase; }
.network-card { display: grid; gap: 0.25rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.network-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.network-card p { margin: 0; }
.network-publish { margin-block: 1rem; }
.network-publish .panel-head h3 { display: inline-flex; align-items: center; gap: 0.375rem; }

/* ---------- صفحه‌های شبکه برای پزشک و لابراتوار ---------- */

.net-card { display: grid; gap: 1rem; }
.net-card .public-clinic a { color: inherit; text-decoration: none; }
.net-profile-card { display: grid; gap: 0.375rem; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.net-profile-card h2 { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--navy-900); font-size: var(--fs-l); }
.net-profile-card p { margin: 0; }
.net-profile-card .btn { justify-self: start; }
.net-code-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; }
.net-login { margin: 0; }
/* یک ورود، چند محیط (D9): برنامه‌ی هر مطب در خانه‌ی شبکه، و صفحه‌ی «ورود از شبکه». */
.net-places { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.net-places li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem;
    padding-block: 0.375rem; border-block-start: 1px solid var(--line); }
.net-places li:first-child { border-block-start: 0; }
.net-places .btn { justify-self: auto; }
.net-entry { display: grid; gap: 0.75rem; }
.net-entry h1 { margin: 0; color: var(--navy-900); font-size: var(--fs-xl); }
.login-intro .login-network { font-size: var(--fs-s); }
.desk-clinic .link-button { font-size: var(--fs-s); }

/* ---------- اتصال‌های شبکه (E3، E6، E7): در تنظیماتِ مطب و صفحه‌ی پزشک و لابراتوار ---------- */

.network-request { display: grid; gap: 0.375rem; margin-block-start: 0.5rem; }
.network-request label { color: var(--ink-2); font-size: var(--fs-s); }
.network-request .btn { justify-self: start; }
.net-request { display: grid; gap: 0.5rem; }
.net-request h2 { margin: 0; color: var(--navy-900); font-size: var(--fs-l); }
.network-connections { display: grid; gap: 0.75rem; }
.connections-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.connections-head h4 { margin: 0; color: var(--ink-2); font-size: var(--fs-m); }
.connections-head .btn { margin-inline-start: auto; }
.connections-group { display: grid; gap: 0.5rem; }
.connections-group h5, .connections-group h2 { margin: 0; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.connection-list { display: grid; gap: 0.625rem; }
.connection-card { display: grid; gap: 0.3rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-inline-start-width: 4px; border-radius: var(--r-m); background: var(--surface); }
.connection-card p { margin: 0; }
.connection-card.is-requested { border-inline-start-color: var(--amber-500); }
.connection-card.is-active { border-inline-start-color: var(--ok-700); }
.connection-card.is-paused { border-inline-start-color: var(--ink-3); }
.connection-card.is-ended, .connection-card.is-declined, .connection-card.is-withdrawn { border-inline-start-color: var(--line); opacity: 0.85; }
.connection-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.connection-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; }
.connection-note { color: var(--ink-2); overflow-wrap: anywhere; }
.connection-dates { font-size: var(--fs-xs); }
.connection-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; font-size: var(--fs-s); }
.connection-contact a { display: inline-flex; align-items: center; gap: 0.25rem; }
.connection-local { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: var(--fs-s); }
.connection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-start: 0.25rem; }
.connection-actions .link-button { margin-inline-start: auto; }
.connection-ask { display: grid; gap: 0.375rem; padding: 0.625rem; border-radius: var(--r-m); background: var(--surface-2); }
.connection-ask label { color: var(--ink-2); font-size: var(--fs-s); }
.connection-trail { display: grid; gap: 0.25rem; margin: 0.25rem 0 0; padding-inline-start: 1.25rem; font-size: var(--fs-s); }
.connection-trail li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.connections-closed summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-s); }
.connections-closed[open] summary { margin-block-end: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
    .connection-card { transition: border-color 0.2s ease; }
}

/* ---------- فهرستِ قیمت و کارنامه‌ی لابراتوار (N2، N10، N11) و دعوتِ پورتال ---------- */

.lab-price-panel, .lab-scorecard { display: grid; gap: 0.75rem; }
.lab-price-table tr.is-old { color: var(--ink-3); }
.lab-price-table tr.is-upcoming td:first-child { font-weight: 600; }
.lab-price-form { display: grid; gap: 0.5rem; }
.lab-price-form h3 { margin: 0; color: var(--ink-2); font-size: var(--fs-m); }
.lab-scorecard .panel-head { flex-wrap: wrap; gap: 0.5rem; }
.lab-score-figures { margin: 0; }
.lab-cost-trend h3 { margin: 0 0 0.5rem; color: var(--ink-2); font-size: var(--fs-m); }
.cost-bars { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.cost-bars li { display: grid; grid-template-columns: minmax(6rem, auto) 1fr auto; align-items: center; gap: 0.5rem; font-size: var(--fs-s); }
.cost-bar { display: block; block-size: 0.6rem; min-inline-size: 2px; border-radius: 999px; background: var(--navy-700); }
.cost-bar-label { color: var(--ink-2); }
.lab-portal-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.lab-portal-invite a { margin-inline-start: 0.25rem; font-weight: 600; }
@media (max-width: 40rem) {
    .cost-bars li { grid-template-columns: 1fr; }
}

/* ---------- میزِ لابراتوار در شبکه و قیمتِ شبکه در مطب (N1، N2، N12) ---------- */

.lab-desk .segmented { margin-block: 0.25rem; }
.lab-desk-section { display: grid; gap: 0.75rem; }
.lab-desk-section h3, .lab-desk-lists h3 { margin: 0; color: var(--ink-2); font-size: var(--fs-m); }
.lab-desk-section h4 { margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.lab-desk-lists { display: grid; gap: 0.5rem; }
.lab-network-prices { display: grid; gap: 0.5rem; padding-block-start: 0.5rem; border-block-start: 1px dashed var(--line); }
.lab-network-prices h3 { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--ink-2); font-size: var(--fs-m); }
.lab-network-prices select { max-inline-size: 16rem; }

/* ---------- سفارش‌های آنلاین در میزِ لابراتوار و در مطب (N6، N12) ---------- */

.lab-order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.875rem; align-items: start; }
.lab-order-clinic { background: var(--cyan-50); color: var(--navy-800); font-weight: 600; }
.lab-order-pending { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0; font-size: var(--fs-xs); }
.lab-order-ready { display: grid; gap: 0.5rem; }
.lab-order-ready .field { max-inline-size: 16rem; }

/* هفته‌ی تحویل: هر روز یک خانه با شمارِ سفارش‌هایی که باید آماده شوند؛ دیرکرد سرخ و جدا. */
.lab-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr)); gap: 0.375rem; }
.lab-week-day { display: grid; justify-items: center; gap: 0.125rem; padding: 0.375rem 0.25rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.lab-week-day strong { color: var(--navy-900); font-size: var(--fs-l); }
.lab-week-day.is-empty strong { color: var(--ink-3); font-weight: 400; }
.lab-week-day.is-late { border-color: var(--alert-200); background: var(--alert-50); color: var(--alert-700); }
.lab-week-day.is-late strong { color: var(--alert-700); }
.lab-week-day.is-active { border-color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--navy-700); }
.lab-week-day:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }

/* در مطب: سفارشی که در پنلِ لابراتوار است، و حرفِ تازه‌ی لابراتوار. */
.lab-online { display: inline-flex; align-items: center; gap: 0.25rem; }
.lab-decline-reason { color: var(--alert-700); }
.lab-final-price { color: var(--navy-800); font-weight: 600; }

/* لابراتوارِ وصل در شبکه روی کارتش، و انتقالِ سفارش‌های باز به پنل (N5). */
.lab-network-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; margin: 0; color: var(--navy-800); font-size: var(--fs-s); }
.lab-network-line > span:first-child { display: inline-flex; align-items: center; gap: 0.25rem; }
.lab-move-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; padding: 0.375rem 0.5rem; border-radius: var(--r-m); background: var(--cyan-50); }

/* فایل‌های سفارش در میزِ لابراتوار (N6): عکس و اسکن از مطب، و آنچه لابراتوار گذاشته. */
.lab-order-files { display: grid; gap: 0.375rem; }
.lab-order-files ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.lab-order-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-inline-size: 0; overflow-wrap: anywhere; }
.lab-order-files li.is-lab { color: var(--navy-800); }
.lab-order-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lab-order-attach progress { inline-size: 8rem; }

/* کارگاه (N13): مرحله‌های داخلیِ هر سفارش با مسئول؛ مرحله‌ی من پررنگ، تمام‌شده خط‌خورده. */
.lab-tasks { display: grid; gap: 0.375rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--line); border-radius: var(--r-m); }
.lab-task-list, .lab-task-edit { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.lab-task-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem; }
.lab-task-list li.is-done label span { color: var(--ink-3); text-decoration: line-through; }
.lab-task-list li.is-mine label span { font-weight: 600; }
.lab-task-edit li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 10rem) auto; align-items: center; gap: 0.375rem; }
@media (max-width: 30rem) { .lab-task-edit li { grid-template-columns: 1fr; } }

/* قراردادِ همکاریِ پزشک (D4): متنِ هر نسخه مثلِ یک برگ — بندها در جدول، شرط‌ها در فهرست؛ پیشنهادِ باز با حاشیه‌ی کهربایی و تفاوت با جاری. */
.contract-view { display: grid; gap: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.contract-view[data-status="Proposed"] { border-color: var(--amber-500); background: var(--amber-50); }
.contract-view[data-status="Rejected"], .contract-view[data-status="Withdrawn"] { opacity: 0.8; }
.contract-view-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.contract-version { font-weight: 700; color: var(--navy-900); }
.contract-sentence { margin: 0; color: var(--navy-900); line-height: 1.9; }
.contract-from { margin-inline-start: auto; }
.contract-terms { inline-size: 100%; }
.contract-terms th[scope="row"] { font-weight: 400; text-align: start; background: transparent; }
.contract-terms tr.is-default th[scope="row"], .contract-terms tr.is-default td { font-weight: 600; }
.contract-conditions { display: grid; gap: 0.125rem; margin: 0; padding-inline-start: 1.25rem; font-size: var(--fs-s); line-height: 1.9; }
.contract-note { margin: 0; color: var(--ink-2); font-size: var(--fs-s); }
.contract-reason { margin: 0; color: var(--alert-700); font-size: var(--fs-s); }
.contract-view-foot { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--fs-xs); }
.contract-panel { display: grid; gap: 0.75rem; }
.contract-panel > .account-layout { grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); align-items: start; }
.contract-panel [data-contract-compose] { grid-column: 1 / -1; }
.contract-panel > .banner { margin: 0; }
.contract-open { border-color: var(--amber-500); }
.contract-upcoming { display: grid; gap: 0.375rem; margin-block-start: 0.75rem; }
.contract-upcoming p { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; }
.contract-diff { padding: 0.5rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); font-size: var(--fs-s); }
.contract-diff ul { margin: 0.25rem 0 0; padding-inline-start: 1.25rem; line-height: 1.9; }
.contract-history { display: grid; gap: 0.5rem; margin-block-start: 0.5rem; }
.contract-panel details > summary { cursor: pointer; }
.contract-panel .details-title { display: inline; margin: 0; font-size: var(--fs-m); }

/* فرمِ پیشنهاد: هر بند یک ردیف — دامنه، درصد یا ثابت، مقدار، لابراتوارِ همان بند؛ در گوشی زیرِ هم. */
.contract-form { display: grid; gap: 0.75rem; }
.contract-rows { display: grid; gap: 0.5rem; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m);
    container-type: inline-size; }
.contract-rows legend { padding-inline: 0.25rem; }
.contract-row { display: grid; align-items: center; gap: 0.375rem;
    grid-template-areas: "scope mode value lab del"; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 0.8fr) minmax(0, 1.2fr) 2.25rem; }
.contract-row-scope { grid-area: scope; min-inline-size: 0; }
.contract-row-mode { grid-area: mode; flex-wrap: nowrap; }
.contract-row-value { grid-area: value; min-inline-size: 0; }
.contract-row-lab { grid-area: lab; min-inline-size: 0; }
.contract-row > .btn { grid-area: del; justify-self: end; }
.contract-row.is-default .contract-row-scope { font-weight: 600; }
.contract-row + .contract-row { padding-block-start: 0.5rem; border-block-start: 1px dashed var(--line); }
/* پنلِ باریک (گوشی یا ستونِ کناری): دامنه و حذف در یک خط، نوع و مقدار در خطِ دوم، لابراتوار زیرش. */
@container (max-width: 34rem) {
    .contract-row { grid-template-areas: "scope scope del" "mode value value" "lab lab lab"; grid-template-columns: auto minmax(0, 1fr) 2.25rem; }
}
.contract-add { justify-self: start; }
.contract-preview { padding: 0.5rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m); }
.contract-preview > summary { cursor: pointer; color: var(--navy-800); font-size: var(--fs-s); }
.contract-preview .contract-view { margin-block-start: 0.5rem; }

/* کارتِ قرارداد در صفِ تصمیم: پیوند به متنِ کامل. */
.decision-link { justify-self: start; font-size: var(--fs-s); }

/* میزِ پزشک در شبکه: انتخابِ مطب با نشانِ «پیشنهاد». */
.doctor-desk [data-clinic-choice] .pill { margin-inline-start: 0.25rem; }

/* میزِ پزشک (D6): هر مطب یک رنگ — خطِ زمانیِ امروز، کارت‌های روز و برنامه، لابراتوار و پیام‌ها. */
/* میزِ پزشک پهن‌تر از کارتِ عمومی است — خطِ زمانی و کارت‌های روز کنارِ هم. */
.public-card.doctor-desk { inline-size: min(100%, 64rem); }
.clinic-tone-0 { --clinic: var(--navy-700); }
.clinic-tone-1 { --clinic: var(--cyan-500); }
.clinic-tone-2 { --clinic: var(--amber-500); }
.clinic-tone-3 { --clinic: var(--ok-700); }
.clinic-tone-4 { --clinic: var(--alert-600); }
.clinic-tone-5 { --clinic: #8b5cf6; }
.clinic-dot { display: inline-block; flex: none; inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: var(--clinic, var(--navy-700)); }
.desk-clinics { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.desk-clinic { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; }
.desk-clinic.is-stale strong { color: var(--ink-3); }
.desk-tabs { flex-wrap: wrap; margin-block-end: 0.75rem; }
.desk-tabs .pill { margin-inline-start: 0.25rem; }
.desk-section { display: grid; gap: 0.75rem; }
.desk-summary { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; }
.desk-next { color: var(--navy-900); }
.desk-timeline { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.desk-visit { display: grid; align-items: center; gap: 0.25rem 0.75rem;
    grid-template-areas: "time clinic who what status"; grid-template-columns: 6.75rem minmax(0, 9rem) minmax(0, 1fr) minmax(0, 1fr) auto;
    padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-inline-start: 4px solid var(--clinic); border-radius: var(--r-m); background: var(--surface); }
.desk-visit-time { grid-area: time; }
.desk-visit-clinic { grid-area: clinic; }
.desk-visit-who { grid-area: who; }
.desk-visit-what { grid-area: what; }
.desk-visit > .pill { grid-area: status; justify-self: end; }
.desk-visit.is-next { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--clinic); }
.desk-visit.is-completed, .desk-visit.is-noshow { opacity: 0.7; }
.desk-visit-clinic, .desk-clinic-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-inline-size: 0; }
.desk-clinic-chip { font-size: var(--fs-s); white-space: nowrap; }
.desk-visit-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-inline-size: 0; }
/* گوشی: ساعت و وضع در یک خط، بیمار زیرش، مطب و کار در خطِ آخر. */
@media (max-width: 40rem) {
    .desk-visit { grid-template-areas: "time status" "who who" "clinic clinic" "what what"; grid-template-columns: minmax(0, 1fr) auto; }
}
.desk-day-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 0.75rem; }
.desk-day-card { display: grid; align-content: start; gap: 0.25rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line);
    border-block-start: 4px solid var(--clinic); border-radius: var(--r-m); background: var(--surface); }
.desk-day-card h3 { display: flex; align-items: center; gap: 0.375rem; margin: 0; font-size: var(--fs-m); }
.desk-day-card p { margin: 0; }
.desk-week { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.desk-week li { display: flex; justify-content: space-between; gap: 0.5rem; }
.desk-exceptions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.desk-lab, .desk-notices { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.desk-lab-row, .desk-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.desk-lab-row.is-late { border-color: var(--alert-600); background: var(--alert-50); }
.desk-lab-what { display: grid; flex: 1 1 14rem; min-inline-size: 0; }
.desk-notice-text { flex: 1 1 16rem; min-inline-size: 0; }
.desk-notice.tone-warn, .desk-notice.tone-bad { border-inline-start: 4px solid var(--amber-500); }
.desk-notice.tone-ok { border-inline-start: 4px solid var(--ok-700); }

/* تابلوی برنامه: ساعتِ کارِ همین پزشک در مطبِ دیگر (D5) — راه‌راه، بی نامِ آن مطب. */
.sched-shift.is-elsewhere { border-style: dashed; color: var(--ink-3);
    background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, transparent 6px 12px); }
.connection-names { font-size: var(--fs-s); }
/* آماده‌سازیِ پزشکِ شبکه در مطب (D3): چک‌لیستِ کارت و فرمِ ساختن یا وصل کردن. */
.doctor-setup { display: grid; gap: 0.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.doctor-setup li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.doctor-setup li.is-done > .icon { color: var(--ok-700); }
.doctor-setup li.is-todo { color: var(--ink-2); }
.doctor-setup li.is-todo > .icon { color: var(--amber-700); }
.doctor-setup a, .doctor-setup .link-button { font-size: var(--fs-s); }
.doctor-units, .connection-onboard-form { display: grid; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--line-strong);
    border-radius: var(--r-m); background: var(--surface-2); }
.connection-onboard-form .choice-field { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; }
.connection-onboard { justify-self: start; }

/* کارکرد و تسویه‌ی شفاف (D7): شاخص‌ها، نوارِ روزها (گذشته پُر، آینده راه‌راه — زمان از راست به چپ)، اعتراض‌ها و درمان‌ها با «از کجا آمد». */
.earnings { display: grid; gap: 0.875rem; }
.earnings .kpi-grid { margin-block-end: 0; }
.earnings h3 { margin: 0; font-size: var(--fs-m); }
.earn-days { display: grid; gap: 0.375rem; margin: 0; }
.earn-days-bars { display: flex; align-items: flex-end; gap: 2px; block-size: 4.5rem; margin: 0; padding: 0; list-style: none;
    border-block-end: 1px solid var(--line-strong); }
.earn-days-bars li { position: relative; display: flex; align-items: flex-end; flex: 1 1 0; min-inline-size: 0; block-size: 100%; }
.earn-days-bars li span { display: block; inline-size: 100%; border-radius: 2px 2px 0 0; background: var(--navy-700); }
.earn-days-bars li.is-ahead span { background: repeating-linear-gradient(135deg, var(--cyan-500) 0 3px, var(--cyan-100) 3px 6px); }
.earn-days-bars li.is-zero span { background: var(--line); }
/* امروز: خطی کهربایی میانِ گذشته و آینده. */
.earn-days-bars li.is-today::after { content: ""; position: absolute; inset-block: -0.25rem 0; inset-inline-end: -2px;
    border-inline-end: 2px dashed var(--amber-500); }
.earn-days-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; font-size: var(--fs-xs); }
.earn-swatch { display: inline-block; inline-size: 0.75rem; block-size: 0.75rem; border-radius: 2px; vertical-align: -0.1em; }
.earn-swatch.is-done { background: var(--navy-700); }
.earn-swatch.is-ahead { background: repeating-linear-gradient(135deg, var(--cyan-500) 0 3px, var(--cyan-100) 3px 6px); }
.earn-pending { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.earn-pending li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: var(--fs-s); }
.earn-disputes { display: grid; gap: 0.375rem; }
.earn-disputes ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.earn-dispute { display: grid; gap: 0.25rem; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.earn-dispute[data-dispute-status="Open"] { border-color: var(--amber-500); background: var(--amber-50); }
.earn-dispute p { margin: 0; }
.earn-dispute-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.earn-dispute .link-button { justify-self: start; }
.earn-answer { padding-inline-start: 0.625rem; border-inline-start: 3px solid var(--line-strong); }
.earn-lines-section { display: grid; gap: 0.5rem; }
.earn-lines-section .panel-head { margin: 0; }
.earn-lines { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.earn-line > details { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.earn-line.is-corrected > details { border-inline-start: 4px solid var(--ok-700); }
.earn-line summary { display: grid; grid-template-areas: "date what share tags chev";
    grid-template-columns: 5.5rem minmax(0, 1fr) auto auto 1rem; align-items: center; gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.75rem; cursor: pointer; list-style: none; }
.earn-line summary::-webkit-details-marker { display: none; }
.earn-line summary:hover { background: var(--surface-2); }
.earn-line summary:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--r-m); }
.earn-line-date { grid-area: date; color: var(--ink-2); font-size: var(--fs-s); }
.earn-line-what { grid-area: what; display: grid; min-inline-size: 0; }
.earn-line-share { grid-area: share; font-weight: 700; }
.earn-line-tags { grid-area: tags; display: flex; flex-wrap: wrap; justify-content: end; gap: 0.25rem; max-inline-size: 16rem; }
.earn-chevron { grid-area: chev; display: inline-flex; color: var(--ink-3); transition: transform 0.2s ease; }
.earn-line details[open] .earn-chevron { transform: rotate(180deg); }
.earn-explain { display: grid; gap: 0.5rem; padding: 0.25rem 0.75rem 0.75rem; }
.earn-explain ol { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.earn-explain li { display: grid; grid-template-columns: minmax(0, 11rem) auto minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.75rem;
    padding-block: 0.25rem; border-block-end: 1px dashed var(--line); }
.earn-explain li.is-result { border-block-end: 0; font-weight: 700; }
.earn-explain li.is-minus bdi { color: var(--alert-700); }
.earn-basis { margin: 0; font-size: var(--fs-xs); }
.earn-explain > .btn { justify-self: start; }
.earn-dispute-form { display: grid; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--amber-500); border-radius: var(--r-m);
    background: var(--amber-50); }
.earn-adjustments ul { display: grid; gap: 0.25rem; margin: 0.375rem 0 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.earn-adjustments li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.375rem 0.625rem;
    border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.earn-adjustments li strong { margin-inline-start: auto; }
.earn-settlements { display: grid; gap: 0.375rem; }
/* گوشی: بیمار و سهم در یک خط، تاریخ و نشان‌ها زیرش؛ «از کجا آمد» دو ستونه. */
@media (max-width: 40rem) {
    .earn-line summary { display: flex; flex-wrap: wrap; }
    .earn-line-what { flex: 1 1 55%; order: 1; }
    .earn-line-share { order: 2; }
    .earn-chevron { order: 3; }
    .earn-line-date { order: 4; }
    .earn-line-tags { order: 5; flex: 1 1 auto; max-inline-size: none; }
    .earn-explain li { grid-template-columns: minmax(0, 1fr) auto; }
    .earn-explain li small { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .earn-chevron { transition: none; }
}
/* میزِ شبکه: همکاری‌های تمام‌شده (Q5) — فقط خلاصه. */
.desk-past { display: grid; gap: 0.5rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); }
.desk-past h3 { margin: 0; font-size: var(--fs-m); }
.desk-past .hint { margin: 0; }
.desk-past-clinic { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.desk-past-clinic > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem; cursor: pointer; }
.desk-past-clinic > .earnings { padding: 0 0.75rem 0.75rem; }
.doctor-desk [data-money-choice] .choice-chip { display: inline-flex; align-items: center; gap: 0.5rem; }
/* کارتِ اعتراض در صفِ تصمیم: مبلغ کوتاه است، کادرش هم. */
[data-accept-share] input[inputmode="numeric"] { max-inline-size: 14rem; }
/* عکسِ پزشکِ شبکه (D1): گرد، با حروفِ اول وقتی عکس نیست؛ و دستیارانِ همراه (D10) در پروفایل و کارتِ اتصالِ مطب. */
img.net-avatar { object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.net-avatar-l { inline-size: 5rem; block-size: 5rem; font-size: var(--fs-xl); }
.net-who { display: flex; align-items: center; gap: 0.625rem; }
.net-who p { margin: 0; }
.net-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-block-end: 0.75rem; }
.net-photo-actions { display: grid; flex: 1 1 14rem; gap: 0.375rem; justify-items: start; }
.net-photo-actions input[type="file"] { max-inline-size: 100%; }
.net-assistants { display: grid; gap: 0.5rem; margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); }
.net-assistants h2 { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--navy-900); font-size: var(--fs-l); }
.net-assistants .hint { margin: 0; }
.net-assistants > .btn { justify-self: start; }
.net-assistant-list, .companion-list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.net-assistant-list li, .companion-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem;
    padding: 0.375rem 0.625rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.net-assistant-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.net-assistant-form { display: grid; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m);
    background: var(--surface-2); }
.network-card-services { font-size: var(--fs-s); }
.connection-head .net-avatar { margin-inline-end: 0.125rem; }
.connection-companions { display: grid; gap: 0.375rem; margin-block-start: 0.25rem; }
.connection-companions h6 { margin: 0; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.connection-companions .hint { margin: 0; }
.companion-who { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.5rem; font-size: var(--fs-s); }
.companion-list li.is-delegated { background: var(--ok-50); }
.companion-list li.is-delegated > .icon { color: var(--ok-700); }
.companion-list li.is-inactive .companion-who small { color: var(--amber-700); }
.companion-list li.companion-form { display: grid; justify-content: stretch; gap: 0.5rem; border-style: dashed; border-color: var(--line-strong);
    background: var(--surface-2); }
.companion-form .choice-field { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; }
.companion-form input[type="password"] { max-inline-size: 16rem; }
.net-assistant-actions .link-button.btn-danger-ghost { color: var(--alert-600); }
/* تقویمِ پوشش (H4): ماه روز به روز با «هستند/همه»، کمبودِ حداقلِ نیرو (قرمز)، درخواستِ منتظر (خط‌چین) و تعطیلی (کم‌رنگ). */
.coverage { display: grid; gap: 0.75rem; }
.coverage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.coverage-head h2 { margin: 0; color: var(--navy-900); font-size: var(--fs-l); }
.coverage-nav { display: inline-flex; align-items: center; gap: 0.375rem; }
.coverage-nav strong { min-inline-size: 7.5rem; color: var(--navy-900); text-align: center; }
.coverage-head select { max-inline-size: 14rem; }
.coverage-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; }
.coverage-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0; font-size: var(--fs-xs); }
.coverage-swatch { display: inline-block; inline-size: 0.875rem; block-size: 0.875rem; border: 1px solid var(--line-strong);
    border-radius: var(--r-s); background: var(--surface); }
.coverage-swatch.is-gap { border-color: var(--alert-600); background: var(--alert-50); }
.coverage-swatch.is-pending { border-style: dashed; border-color: var(--amber-700); }
.coverage-swatch.is-closed { background: var(--surface-2); }
.coverage-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.coverage-weekday { padding-block: 0.25rem; color: var(--ink-3); font-size: var(--fs-xs); text-align: center; }
.coverage-day { display: grid; align-content: start; gap: 0.125rem; min-block-size: 5.25rem; padding: 0.375rem 0.5rem; border: 1px solid var(--line);
    border-radius: var(--r-m); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.coverage-day:hover { border-color: var(--line-strong); }
.coverage-day:focus-visible { outline: none; box-shadow: var(--ring); }
.coverage-day.is-past { background: var(--surface-2); }
.coverage-day.is-closed { background: var(--surface-2); color: var(--ink-3); }
.coverage-day.is-pending { border-style: dashed; border-color: var(--amber-700); }
.coverage-day.is-gap { border-color: var(--alert-600); background: var(--alert-50); }
.coverage-day.is-today .coverage-date { color: var(--surface); background: var(--navy-700); }
.coverage-day.is-selected { box-shadow: 0 0 0 2px var(--navy-700); }
.coverage-date { justify-self: start; min-inline-size: 1.5rem; padding-inline: 0.25rem; border-radius: var(--r-s); font-weight: 600;
    font-variant-numeric: tabular-nums; text-align: center; }
.coverage-count { font-size: var(--fs-s); color: var(--navy-800); }
.coverage-gap-badge { color: var(--alert-700); font-size: var(--fs-xs); font-weight: 600; }
.coverage-away, .coverage-closed-title { overflow: hidden; color: var(--ink-3); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.coverage-detail { display: grid; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.coverage-detail h3 { margin: 0; font-size: var(--fs-m); }
.coverage-detail .btn { justify-self: start; }
.coverage-gap-line { margin: 0; }
.coverage-people h4 { margin: 0 0 0.25rem; color: var(--ink-2); font-size: var(--fs-s); }
.coverage-people ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.coverage-people li { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem; }
/* حداقلِ نیرو در تنظیمات. */
.staffing-list { display: grid; gap: 0.25rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.staffing-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem;
    padding: 0.375rem 0.625rem; border: 1px solid var(--line); border-radius: var(--r-s); }
.staffing-actions { display: inline-flex; gap: 0.75rem; }
.staffing-actions .link-button.btn-danger-ghost { color: var(--alert-600); }
.staffing-form { display: grid; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m);
    background: var(--surface-2); }
/* گوشی: خانه‌ها فقط روز، شمار و نشانِ کمبود؛ نام‌ها در جزئیاتِ روز. */
@media (max-width: 40rem) {
    .coverage-grid { gap: 0.125rem; }
    .coverage-day { min-block-size: 3.5rem; padding: 0.25rem; justify-items: center; text-align: center; }
    .coverage-date { justify-self: center; }
    .coverage-away, .coverage-closed-title { display: none; }
    .coverage-gap-badge { overflow: hidden; max-inline-size: 100%; font-size: 0; }
    .coverage-gap-badge::before { content: "!"; font-size: var(--fs-s); }
    .coverage-weekday { font-size: 0; }
    .coverage-weekday::first-letter { font-size: var(--fs-xs); }
}
/* بستنِ ماه (H5): سه قدم — مرور، قفل، خروجی — و سندهای اصلاحی. */
.month-close { display: grid; gap: 0.875rem; }
.month-close h3 { margin: 0; color: var(--navy-900); font-size: var(--fs-m); }
.close-steps { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.close-steps li { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border: 1px solid var(--line);
    border-radius: 999px; color: var(--ink-3); }
.close-steps li .num { display: inline-grid; place-items: center; inline-size: 1.375rem; block-size: 1.375rem; border-radius: 50%;
    background: var(--surface-2); font-weight: 600; }
.close-steps li.is-current { border-color: var(--navy-700); color: var(--navy-900); font-weight: 600; }
.close-steps li.is-current .num { background: var(--navy-700); color: var(--surface); }
.close-steps li.is-done { color: var(--ok-700); }
.close-steps li.is-done .num { background: var(--ok-50); }
.close-review, .close-lock, .close-export, .close-corrections { display: grid; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--line);
    border-radius: var(--r-l); background: var(--surface); }
.close-group { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.close-group > summary { padding: 0.5rem 0.75rem; cursor: pointer; }
.close-group.is-clock, .close-group.is-leave { border-color: var(--amber-700); }
.close-group ul { display: grid; gap: 0.25rem; margin: 0; padding: 0 0.75rem 0.625rem; list-style: none; font-size: var(--fs-s); }
.close-group li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.close-lock .btn, .close-corrections > .btn { justify-self: start; }
.close-reopen { display: grid; gap: 0.375rem; max-inline-size: 32rem; }
.close-table th[scope="row"] { font-weight: 600; text-align: start; white-space: nowrap; }
.close-table td { white-space: nowrap; }
.close-correction-list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.close-correction-form { display: grid; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m);
    background: var(--surface-2); }
/* کیوسکِ رمزدارِ حضور (H6): نام‌های درشت برای انگشت، صفحه‌ی رمزِ چهاررقمی، پیامِ کوتاهِ ثبت. */
.kiosk-clock { display: grid; gap: 1rem; max-inline-size: 60rem; margin-inline: auto; padding: 1rem; }
.kiosk-clock-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.kiosk-clock-head h1 { margin: 0; color: var(--navy-900); font-size: var(--fs-xl); }
.kiosk-clock-head p { margin: 0; color: var(--ink-3); }
.kiosk-clock-time { color: var(--navy-800); font-size: 2rem; font-weight: 600; }
.kiosk-clock-ask { margin: 0; text-align: center; font-size: var(--fs-l); }
.kiosk-clock-notice { justify-content: center; font-size: var(--fs-l); }
.kiosk-clock-help { margin: 0; text-align: center; }
.kiosk-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.kiosk-name { display: grid; gap: 0.25rem; inline-size: 100%; min-block-size: 5rem; padding: 0.75rem 1rem; border: 1px solid var(--line-strong);
    border-radius: var(--r-l); background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.kiosk-name strong { font-size: var(--fs-l); }
.kiosk-name small { color: var(--ink-3); }
.kiosk-name.is-in { border-inline-start: 4px solid var(--ok-700); }
.kiosk-name.is-out { border-inline-start: 4px solid var(--line-strong); }
.kiosk-name:hover:not(:disabled) { border-color: var(--navy-700); }
.kiosk-name:focus-visible, .kiosk-key:focus-visible { outline: none; box-shadow: var(--ring); }
.kiosk-name:disabled { opacity: 0.55; cursor: not-allowed; }
.kiosk-pad { display: grid; justify-items: center; gap: 0.75rem; max-inline-size: 22rem; margin-inline: auto; padding: 1.25rem; border: 1px solid var(--line);
    border-radius: var(--r-l); background: var(--surface); }
.kiosk-pad h2 { margin: 0; font-size: var(--fs-xl); }
.kiosk-pad p { margin: 0; }
.kiosk-pad-dots { display: flex; gap: 0.875rem; direction: ltr; }
.kiosk-pad-dots span { inline-size: 1rem; block-size: 1rem; border: 2px solid var(--navy-700); border-radius: 50%; }
.kiosk-pad-dots span.is-filled { background: var(--navy-700); }
.kiosk-pad-keys { display: grid; grid-template-columns: repeat(3, 4.5rem); gap: 0.625rem; direction: ltr; }
.kiosk-key { display: grid; place-items: center; block-size: 4.5rem; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2);
    color: var(--ink); font: inherit; font-size: 1.75rem; font-weight: 600; cursor: pointer; }
.kiosk-key-muted { font-size: var(--fs-s); font-weight: 500; }
.kiosk-key:active:not(:disabled) { background: var(--line); }
/* رمزِ کیوسک در «میز کار من» و پرونده‌ی همکار. */
.kiosk-pin-form { display: grid; gap: 0.5rem; max-inline-size: 22rem; }
.kiosk-pin-form input { max-inline-size: 10rem; letter-spacing: 0.3em; }
.staff-kiosk-pin p { margin: 0; }
/* فرصتِ همکاری (D11): فهرستِ فرصت‌ها برای مطب و پزشک، و فرمِ اعلامِ نیاز. */
.network-opportunities { display: grid; gap: 0.5rem; margin-block-start: 1rem; }
.network-opportunities .hint { margin: 0; }
.opportunity-form { display: grid; gap: 0.625rem; padding: 0.75rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m);
    background: var(--surface-2); }
.opportunity-form .choice-field { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; }
.opportunity-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.opportunity-card { display: grid; gap: 0.25rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.opportunity-card p { margin: 0; }
.opportunity-card.is-closed { background: var(--surface-2); color: var(--ink-3); }
.opportunity-card > .btn, .opportunity-card > .link-button { justify-self: start; }
.opportunity-what { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.opportunity-state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; color: var(--ok-700); font-size: var(--fs-s); }
.net-alerts { margin: 0; }
/* ارجاعِ بیمار (D12): کارتِ ارجاع، فرمِ ارجاعِ تازه، کدِ رضایت و پذیرفتن. */
.referral-list { display: grid; gap: 0.75rem; }
.referral-card { display: grid; gap: 0.375rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--surface); }
.referral-card.needs-us { border-inline-start: 3px solid var(--amber-700); }
.referral-card p { margin: 0; }
.referral-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.referral-head .pill { margin-inline-start: auto; }
.referral-way { color: var(--ink-3); font-size: var(--fs-s); }
.referral-doctor { color: var(--ink-2); font-size: var(--fs-s); }
.referral-patient { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.referral-diagnosis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.referral-teeth { padding: 0.0625rem 0.5rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-s); }
.referral-note, .referral-answer p { white-space: pre-line; }
.referral-note { color: var(--ink-2); }
.referral-files ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.referral-file { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
    border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); font-size: var(--fs-s); }
.referral-file img { display: block; inline-size: 7.5rem; block-size: 5.5rem; object-fit: cover; border-radius: var(--r-s); }
.referral-file.is-broken { border-style: dashed; color: var(--ink-3); }
.referral-files { display: grid; gap: 0.375rem; justify-items: start; }
.referral-times { display: flex; flex-wrap: wrap; gap: 0 0.375rem; font-size: var(--fs-s); }
.referral-answer { display: grid; gap: 0.25rem; padding: 0.5rem 0.75rem; border-radius: var(--r-s); background: var(--surface-2); }
.referral-answer.is-treated { background: var(--ok-50); }
.referral-answer.is-declined { background: var(--alert-50); color: var(--alert-700); }
.referral-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.referral-code, .referral-inline, .referral-summary, .referral-accept { display: grid; gap: 0.375rem; padding: 0.625rem 0.75rem;
    border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); }
.referral-code-row, .referral-target-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.referral-code-row input { inline-size: 9rem; font-size: 1.25rem; text-align: center; font-variant-numeric: tabular-nums; }
.referral-target-row input { flex: 1 1 12rem; min-inline-size: 0; }
.referral-accept .choice-field, .referral-form .choice-field { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; }
.referral-form { display: grid; gap: 0.625rem; padding: 0.75rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m);
    background: var(--surface-2); margin-block-end: 0.75rem; }
.referral-targets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.referral-target { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.5rem 0.75rem;
    border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: inherit; font: inherit; cursor: pointer;
    text-align: start; }
.referral-target.is-active { border-color: var(--navy-700); box-shadow: inset 0 0 0 1px var(--navy-700); background: var(--cyan-50); }
.referral-docs { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.referral-privacy { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem 0.75rem; border-radius: var(--r-s);
    background: var(--cyan-50); color: var(--navy-900); font-size: var(--fs-s); }
.referral-privacy p { margin: 0; }
.picked-patient { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0; }
@media (max-width: 40rem) {
    .referral-head .pill { margin-inline-start: 0; }
    .referral-file img { inline-size: 6rem; block-size: 4.5rem; }
}
/* کارنامه‌ی پزشک (D13): سربرگ، آمار، کار به تفکیکِ نوع، سابقه و نمونه‌کارها. */
.portfolio { display: grid; gap: 1rem; }
.portfolio-head { display: flex; gap: 1rem; align-items: center; }
.portfolio-head h2, .portfolio-head p { margin: 0; }
.portfolio-head > div { display: grid; gap: 0.25rem; }
.portfolio-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; margin: 0; }
.portfolio-stats > div { padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); }
.portfolio-stats dt { color: var(--ink-3); font-size: var(--fs-s); }
.portfolio-stats dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
.portfolio-bio, .portfolio-description { white-space: pre-line; margin: 0; }
.portfolio-section { display: grid; gap: 0.5rem; }
.portfolio-section h3 { margin: 0; font-size: 1rem; }
.portfolio-tally { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.portfolio-tally li { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: 0.5rem; align-items: center; }
.portfolio-tally-bar { block-size: 0.5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.portfolio-tally-bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--navy-700); }
.portfolio-history { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.portfolio-history li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.portfolio-history li.is-hidden { color: var(--ink-3); }
.portfolio-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.portfolio-sample { display: grid; gap: 0.375rem; align-content: start; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-m);
    background: var(--surface); }
.portfolio-sample h3, .portfolio-sample h4, .portfolio-sample p { margin: 0; }
.portfolio-sample > header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; justify-content: space-between; }
.portfolio-sample.is-waiting { border-style: dashed; }
.portfolio-sample > .link-button { justify-self: start; }
.portfolio-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.portfolio-photos li { display: grid; gap: 0.125rem; justify-items: center; }
.portfolio-photos img, .portfolio-photo-slot { inline-size: 7rem; block-size: 5.5rem; border-radius: var(--r-s); object-fit: cover; }
.portfolio-photo-slot { display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.portfolio-caption { font-size: var(--fs-s); color: var(--ink-2); }
.portfolio-upload { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.net-section { display: grid; gap: 0.5rem; margin-block-start: 1rem; }
.net-section h2 { margin: 0; font-size: 1.05rem; }
@media (max-width: 40rem) {
    .portfolio-tally li { grid-template-columns: 1fr auto; }
    .portfolio-tally-bar { grid-column: 1 / -1; grid-row: 2; }
    .portfolio-photos img, .portfolio-photo-slot { inline-size: 6rem; block-size: 4.5rem; }
}

/* ---------- شبکه در جای خودش (۱۸ مهر ۱۴۰۵): پزشکان در «کارکنان»، لابراتوارها در «لابراتوار» ---------- */

/* کارتِ شبکه بالای فهرست می‌نشیند و باید از کارت‌های زیرش جدا دیده شود: لبه‌ی آغازینِ سرمه‌ای، نه یک کارتِ دیگر مثلِ بقیه. */
.network-partners { display: grid; gap: 0.75rem; margin-block-end: 1rem; border-inline-start: 4px solid var(--navy-700); }
.network-partners[hidden] { display: none; }
.network-partners .panel-head { flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-block-end: 0; }
.network-partners .panel-head h2 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0; font-size: var(--fs-l); }
.network-partners .panel-head h2 > .icon { color: var(--navy-700); }
.network-partners .panel-head .pill { font-size: var(--fs-xs); font-weight: 600; }
.partners-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline-start: auto; }
/* فهرستِ اتصال‌ها درونِ همین کارت است؛ سرتیترِ خودش تکرارِ عنوانِ کارت می‌شد. */
.network-partners .connections-head h4 { font-size: var(--fs-s); }

.network-invite { display: grid; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); }
.network-invite p { margin: 0; }
.network-invite .lookup-row input { flex: 1 1 12rem; max-inline-size: 18rem; }

.partners-local { display: grid; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); }
.partners-local p { margin: 0; }
.partners-local-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.partners-local-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.75rem;
    padding-block: 0.5rem; border-block-start: 1px solid var(--line); }
.partners-local-list > li:first-child { border-block-start: 0; }
.partners-local-name { display: grid; gap: 0.125rem; min-inline-size: 0; }
.partners-local-name small { font-size: var(--fs-xs); }
.partners-local-list > .partners-local-form { display: block; padding-block: 0 0.75rem; border-block-start: 0; }
.partners-local-form .network-publish { margin-block: 0; }

/* «همان است؟» — پیشنهادِ برنامه روی کارتِ اتصال. محکم (کدِ نظام یا موبایل) کهربایی است؛ حدسِ نام فقط خط‌چین. */
.merge-suggest { display: grid; gap: 0.5rem; margin-block-start: 0.25rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--line-strong);
    border-radius: var(--r-m); background: var(--surface-2); }
.merge-suggest.is-strong { border-style: solid; border-color: var(--amber-100); background: var(--amber-50); }
.merge-suggest p { display: flex; align-items: flex-start; gap: 0.375rem; margin: 0; color: var(--ink); }
.merge-suggest p > .icon { flex-shrink: 0; margin-block-start: 0.3rem; color: var(--amber-700); }
.merge-suggest .form-actions, .merge-panel .form-actions, .merge-choose .form-actions { margin: 0; }

.merge-panel { display: grid; gap: 0.625rem; margin-block-start: 0.25rem; padding: 0.75rem 1rem; border: 1px solid var(--navy-700);
    border-radius: var(--r-m); background: var(--surface); }
.merge-panel h6 { margin: 0; color: var(--navy-900); font-size: var(--fs-m); }
.merge-panel p { margin: 0; }
.merge-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.625rem; }
.merge-columns > div { display: grid; gap: 0.25rem; align-content: start; padding: 0.625rem 0.75rem; border-radius: var(--r-m); background: var(--surface-2); }
.merge-columns strong { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink); font-size: var(--fs-s); }
.merge-columns [data-merge-keeps] strong > .icon { color: var(--ok-700); }
.merge-columns [data-merge-shares] strong > .icon { color: var(--navy-700); }
.merge-columns ul { display: grid; gap: 0.125rem; margin: 0; padding-inline-start: 1.125rem; color: var(--ink-2); font-size: var(--fs-s); }
.merge-identity { display: grid; gap: 0.375rem; padding-block-start: 0.625rem; border-block-start: 1px solid var(--line); }
.merge-identity label { color: var(--ink-2); font-size: var(--fs-s); }
.merge-identity .lookup-row input { flex: 0 1 12rem; text-transform: none; }

.merge-choose { display: grid; gap: 0.5rem; margin-block-start: 0.25rem; padding: 0.625rem 0.75rem; border: 1px dashed var(--line-strong);
    border-radius: var(--r-m); background: var(--surface-2); }
.merge-choose p { margin: 0; }
.merge-choose .field { max-inline-size: 22rem; }

.chip-network { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); }

.network-pointers { display: grid; gap: 0.5rem; }
.network-pointers h4 { margin: 0; color: var(--ink-2); font-size: var(--fs-m); }
.network-pointers p { margin: 0; }
.network-pointers .form-actions { margin: 0; }

@media (max-width: 40rem) {
    .partners-actions { margin-inline-start: 0; inline-size: 100%; }
    .partners-actions .btn { flex: 1 1 auto; justify-content: center; }
    .partners-local-list > li > .btn { margin-inline-start: auto; }
}

/* کدِ شبکه و شهر به پیوندِ «کارنامه» نچسبند. */
.connection-card p.muted > .link-button, .network-card p.muted > .link-button { margin-inline: 0.375rem 0.125rem; }
/* با پیشنهادِ «همان است؟» بالای سرش، دو راهِ دیگر فقط دو دکمه‌اند — نه یک کادرِ دوم. */
.merge-choose.is-follow { padding: 0; border: 0; background: none; }
.merge-identity .banner > span { flex: 1 1 12rem; min-inline-size: 0; }
.merge-columns strong { align-items: flex-start; }
.merge-columns strong > .icon { flex-shrink: 0; margin-block-start: 0.3rem; }

/* ==========================================================================
   پنل‌های جدای شبکه (خواستِ کاربر، ۱۸ مهر ۱۴۰۵)
   مطب سرمه‌ایِ همین برنامه است؛ پنلِ پزشک فیروزه‌ای و پنلِ لابراتوار بنفش — تا هر کس با یک نگاه بداند کجاست.
   همه‌ی رنگ‌های پنل از همین چند متغیر می‌آیند؛ دکمه‌ی اصلی هم (‎--fill) رنگِ پنل را می‌گیرد.
   ========================================================================== */

[data-panel="doctor"] {
  --panel-bar: #0A4D49; --panel-900: #0A4D49; --panel-700: #0E7A72; --panel-500: #14A89C; --panel-100: #CDEFEB; --panel-50: #EEFAF8;
  --panel-fill: #0E7A72; --panel-fill-strong: #0A5F59; --panel-on: #FFFFFF;
}
[data-panel="lab"] {
  --panel-bar: #37267A; --panel-900: #37267A; --panel-700: #5A43B5; --panel-500: #8068E0; --panel-100: #E3DDF8; --panel-50: #F5F2FD;
  --panel-fill: #5A43B5; --panel-fill-strong: #47339A; --panel-on: #FFFFFF;
}
[data-door="clinic"] {
  --panel-bar: #0D2A52; --panel-900: var(--navy-900); --panel-700: var(--navy-700); --panel-500: var(--cyan-500); --panel-100: var(--cyan-100);
  --panel-50: var(--cyan-50); --panel-fill: var(--fill); --panel-fill-strong: var(--fill-strong); --panel-on: var(--fill-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-panel="doctor"] {
    --panel-bar: #0B3330; --panel-900: #B8F0EA; --panel-700: #5FD3C7; --panel-500: #2BB5A8; --panel-100: #14403C; --panel-50: #0E2C2A;
    --panel-fill: #2BB5A8; --panel-fill-strong: #5FD3C7; --panel-on: #062421;
  }
  :root:not([data-theme="light"]) [data-panel="lab"] {
    --panel-bar: #241A52; --panel-900: #DCD4FB; --panel-700: #B3A2F2; --panel-500: #8C78E6; --panel-100: #2C2458; --panel-50: #1D1838;
    --panel-fill: #9C8AEE; --panel-fill-strong: #B3A2F2; --panel-on: #140F2E;
  }
}
:root[data-theme="dark"] [data-panel="doctor"] {
  --panel-bar: #0B3330; --panel-900: #B8F0EA; --panel-700: #5FD3C7; --panel-500: #2BB5A8; --panel-100: #14403C; --panel-50: #0E2C2A;
  --panel-fill: #2BB5A8; --panel-fill-strong: #5FD3C7; --panel-on: #062421;
}
:root[data-theme="dark"] [data-panel="lab"] {
  --panel-bar: #241A52; --panel-900: #DCD4FB; --panel-700: #B3A2F2; --panel-500: #8C78E6; --panel-100: #2C2458; --panel-50: #1D1838;
  --panel-fill: #9C8AEE; --panel-fill-strong: #B3A2F2; --panel-on: #140F2E;
}

.net-root { min-block-size: 100vh; background: var(--ground); color: var(--ink); }
.net-shell, .door[data-panel], .net-auth { --fill: var(--panel-fill); --fill-strong: var(--panel-fill-strong); --fill-ink: var(--panel-on); }

/* ---------- قابِ پنل ---------- */

.net-shell:not([data-net-shell="out"]) {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top" "nav main";
  min-block-size: 100vh;
}

.net-top {
  grid-area: top;
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.5rem 1.25rem;
  background: var(--panel-bar);
  color: #FFFFFF;
}
.net-brand { display: inline-flex; align-items: center; gap: 0.625rem; min-inline-size: 0; color: inherit; text-decoration: none; }
.net-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.14); }
.net-brand-text { display: grid; line-height: 1.5; }
.net-brand-text strong { font-size: var(--fs-m); }
.net-brand-text small { font-size: var(--fs-xs); opacity: 0.8; }
.net-brand:focus-visible, .net-switch:focus-visible, .net-me > summary:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.net-top-actions { display: flex; align-items: center; gap: 0.5rem; }

/* جابه‌جایی بینِ دو پنل: کوچک و فقط برای کسی که هر دو را دارد. */
.net-switch { display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2.25rem; padding-inline: 0.75rem; border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: var(--r-pill); color: inherit; font-size: var(--fs-s); text-decoration: none; white-space: nowrap; }
.net-switch:hover { background: rgb(255 255 255 / 0.12); }

.net-me { position: relative; }
.net-me > summary { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.25rem; padding-inline: 0.25rem 0.625rem; border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.12); cursor: pointer; list-style: none; font-size: var(--fs-s); }
.net-me > summary::-webkit-details-marker { display: none; }
.net-me-name { max-inline-size: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.net-me-menu { position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-end: 0; z-index: 30; display: grid; gap: 0.125rem; min-inline-size: 15rem; padding: 0.625rem;
    border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); color: var(--ink);
    box-shadow: 0 18px 40px rgb(var(--shadow-hue) / 0.22); }
.net-me-menu p { margin: 0 0 0.375rem; padding-inline: 0.5rem; font-size: var(--fs-xs); }
.net-me-menu a, .net-me-menu button { display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.5rem; padding-inline: 0.5rem; border: 0; border-radius: var(--r-s);
    background: none; color: var(--ink); font: inherit; font-size: var(--fs-s); text-align: start; text-decoration: none; cursor: pointer; }
.net-me-menu a:hover, .net-me-menu button:hover { background: var(--surface-2); }
.net-me-menu .icon { color: var(--ink-3); }

.net-nav { grid-area: nav; position: sticky; inset-block-start: 3.5rem; align-self: start; display: grid; gap: 0.25rem; padding: 1rem 0.75rem;
    block-size: calc(100vh - 3.5rem); align-content: start; border-inline-end: 1px solid var(--line); background: var(--surface); overflow-y: auto; }
.net-nav-link { display: flex; align-items: center; gap: 0.625rem; min-block-size: 2.75rem; padding-inline: 0.75rem; border-radius: var(--r-m); color: var(--ink-2);
    font-size: var(--fs-m); text-decoration: none; border-inline-start: 3px solid transparent; }
.net-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.net-nav-link.is-active { background: var(--panel-50); border-inline-start-color: var(--panel-700); color: var(--panel-900); font-weight: 600; }
.net-nav-link.is-active .icon { color: var(--panel-700); }
.net-nav-link:focus-visible { outline: none; box-shadow: var(--ring); }
.net-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: #FFFFFF;
    font-size: var(--fs-xs); font-weight: 600; text-align: center; }

.net-main { grid-area: main; display: grid; gap: 1.25rem; align-content: start; min-inline-size: 0; padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; }
.net-main > * { inline-size: min(100%, 46rem); margin-inline: auto; }
.net-main.is-wide > * { inline-size: min(100%, 76rem); }
.net-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; }
.net-page-head .eyebrow { margin: 0; color: var(--panel-700); font-weight: 600; }
.net-page-head h1 { margin: 0; color: var(--ink); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.5; }
.net-page-head h1:focus { outline: none; }
.net-page-lead { margin: 0.125rem 0 0; }
.net-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.net-page { padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.net-code-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border: 1px solid var(--panel-100); border-radius: var(--r-pill);
    background: var(--panel-50); color: var(--panel-900); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 59.99rem) {
  .net-shell:not([data-net-shell="out"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .net-top { padding-inline: 0.75rem; }
  .net-brand-text small, .net-me-name, .net-switch span { display: none; }
  .net-switch { padding-inline: 0.625rem; }
  /* منو در گوشی نوارِ پایین است: دمِ شست، و فقط بخش‌های اصلی. */
  .net-nav { position: fixed; inset-block: auto 0; inset-inline: 0; z-index: 20; display: flex; justify-content: space-around; gap: 0; block-size: auto;
      padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom, 0px)); border-inline-end: 0; border-block-start: 1px solid var(--line);
      box-shadow: 0 -6px 18px rgb(var(--shadow-hue) / 0.08); overflow: visible; }
  .net-nav-link { position: relative; flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0.125rem; min-block-size: 3.25rem; padding-inline: 0.25rem;
      border-inline-start: 0; border-block-start: 3px solid transparent; border-radius: var(--r-s); font-size: var(--fs-xs); }
  .net-nav-link.is-active { border-block-start-color: var(--panel-700); background: none; }
  .net-nav-link.is-extra { display: none; }
  .net-nav-badge { position: absolute; inset-block-start: 0.25rem; inset-inline-start: calc(50% + 0.375rem); margin: 0; min-inline-size: 1.125rem; padding-inline: 0.25rem; font-size: 0.6875rem; }
  .net-main { padding: 1rem 1rem 5.5rem; }
}

/* ---------- ورود و ثبت‌نامِ هر پنل ---------- */

.net-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-block-size: 100vh; }
.net-auth-brand { display: grid; gap: 1rem; align-content: center; padding: clamp(1.5rem, 5vw, 4rem);
    background: linear-gradient(160deg, var(--panel-bar), color-mix(in srgb, var(--panel-bar) 70%, var(--panel-500))); color: #FFFFFF; }
.net-auth-back { display: inline-flex; align-items: center; gap: 0.25rem; justify-self: start; color: inherit; font-size: var(--fs-s); opacity: 0.85; text-decoration: none; }
.net-auth-back:hover { opacity: 1; text-decoration: underline; }
.net-auth-mark { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: var(--r-l); background: rgb(255 255 255 / 0.14); }
.net-auth-brand h1 { margin: 0; color: #FFFFFF; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); line-height: 1.4; }
.net-auth-brand h1:focus { outline: none; }
.net-auth-pitch { margin: 0; max-inline-size: 26rem; font-size: var(--fs-l); line-height: 1.9; opacity: 0.92; }
.net-auth-points { display: grid; gap: 0.625rem; margin: 0.5rem 0 0; padding: 0; list-style: none; max-inline-size: 28rem; }
.net-auth-points li { display: flex; align-items: flex-start; gap: 0.625rem; line-height: 1.9; }
.net-auth-points .icon { flex: none; margin-block-start: 0.375rem; opacity: 0.85; }
.net-auth-form { display: grid; gap: 0.75rem; align-content: center; justify-self: center; inline-size: min(100%, 26rem); padding: clamp(1.5rem, 4vw, 3rem) 1.25rem; }
.net-auth-form h2 { margin: 0; color: var(--ink); font-size: var(--fs-xl); }
.net-auth-form .lead { margin: 0; }
.net-auth-form .net-login { padding: 0; border: 0; background: none; box-shadow: none; }
.net-auth-else { display: grid; gap: 0.25rem; margin: 0.5rem 0 0; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-s); }
.net-auth-else a { color: var(--panel-700); font-weight: 600; }

@media (max-width: 47.99rem) {
  .net-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .net-auth-brand { gap: 0.625rem; padding: 1.25rem 1.25rem 1.5rem; }
  .net-auth-mark { inline-size: 3rem; block-size: 3rem; }
  .net-auth-pitch { font-size: var(--fs-m); }
  .net-auth-points { display: none; }
  .net-auth-form { align-content: start; }
}

/* ---------- صفحه‌ی اولِ شبکه: سه در ---------- */

.net-landing { display: grid; gap: clamp(2rem, 5vw, 3.5rem); padding-block-end: 2rem; }
.net-landing > section, .landing-foot { inline-size: min(100% - 2rem, 70rem); margin-inline: auto; }
.net-landing h2 { margin: 0 0 1rem; color: var(--ink); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); }

.landing-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 2rem;
    padding: clamp(2rem, 6vw, 4.5rem) max(1rem, calc((100% - 70rem) / 2));
    background: linear-gradient(155deg, #081A33 0%, #0D2A52 55%, #143A6E 100%); color: #FFFFFF; }
.landing-eyebrow { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0 0 0.75rem; color: #7FE3EE; font-size: var(--fs-s); font-weight: 600; }
.landing-hero h1 { margin: 0; color: #FFFFFF; font-size: clamp(1.875rem, 1.2rem + 3.2vw, 3.375rem); font-weight: 700; line-height: 1.45; }
.landing-hero h1:focus { outline: none; }
.landing-hero h1 span { color: #7FE3EE; white-space: nowrap; }
.landing-lead { margin: 1rem 0 0; max-inline-size: 34rem; color: #D4E3F5; font-size: var(--fs-l); line-height: 2; }
.landing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-block-start: 1.5rem; }
.landing-cta .btn-primary { --fill: #2FCFE2; --fill-strong: #7FE3EE; --fill-ink: #06203A; min-block-size: 2.875rem; padding-inline: 1.5rem; font-weight: 700; }
.landing-signed { color: #B9CCE4; font-size: var(--fs-s); }

/* نقشه‌ی شبکه: تصویر است، پس جای گره‌ها مختصاتِ فیزیکیِ همان SVG است (left/top عمدی است، نه جامانده)؛ فقط متنِ درونش راست‌به‌چپ است. */
.landing-map { position: relative; direction: ltr; inline-size: min(100%, 26rem); aspect-ratio: 400 / 320; margin-inline: auto; }
.landing-map > svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.map-edge { fill: none; stroke: #7FE3EE; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0.75; animation: map-flow 7s linear infinite; }
@keyframes map-flow { to { stroke-dashoffset: -110; } }
.map-node, .map-flow { position: absolute; direction: rtl; translate: -50% -50%; white-space: nowrap; }
.map-node { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: var(--r-pill); background: #FFFFFF; color: #0D2A52;
    font-weight: 700; box-shadow: 0 10px 26px rgb(0 0 0 / 0.28); }
.map-node-clinic { top: 19.4%; left: 50%; }
.map-node-doctor { top: 78.75%; left: 77%; color: #0A4D49; }
.map-node-lab { top: 78.75%; left: 23%; color: #37267A; }
.map-node-doctor .icon { color: #0E7A72; }
.map-node-lab .icon { color: #5A43B5; }
.map-node-clinic .icon { color: #1B4A8A; }
.map-flow { padding: 0.125rem 0.5rem; border-radius: var(--r-pill); background: #0D2A52; color: #CFF5FA; font-size: var(--fs-xs); }
.map-flow-doctor { top: 43%; left: 67%; }
.map-flow-lab { top: 57%; left: 30%; }
.map-flow-work { top: 94%; left: 50%; }

.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.door { display: grid; gap: 0.625rem; align-content: start; padding: 1.25rem 1.25rem 1.125rem; border: 1px solid var(--line); border-block-start: 4px solid var(--panel-700);
    border-radius: var(--r-l); background: var(--surface); }
.door.is-mine { border-color: var(--panel-700); box-shadow: 0 0 0 3px var(--panel-100); }
.door-mark { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: var(--r-m); background: var(--panel-50); color: var(--panel-700); }
.door h3 { margin: 0; color: var(--panel-900); font-size: var(--fs-xl); }
.door-pitch { margin: 0; color: var(--ink); font-weight: 600; }
.door ul { display: grid; gap: 0.375rem; margin: 0.25rem 0 0.5rem; padding: 0; list-style: none; color: var(--ink-2); }
.door li { display: flex; align-items: flex-start; gap: 0.5rem; }
.door li .icon { flex: none; margin-block-start: 0.4rem; color: var(--panel-700); }
.door-cta { justify-content: center; min-block-size: 2.875rem; margin-block-start: auto; border-color: var(--panel-fill); background: var(--panel-fill); color: var(--panel-on); font-weight: 700; }
.door-cta:hover { border-color: var(--panel-fill-strong); background: var(--panel-fill-strong); color: var(--panel-on); }
.door-note { margin: 0; color: var(--ink-3); font-size: var(--fs-s); }

.landing-steps ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.landing-steps li { display: grid; gap: 0.375rem; align-content: start; padding: 1rem 1.125rem; border-radius: var(--r-l); background: var(--surface-2); }
.step-num { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--navy-900); color: var(--surface); font-weight: 700; }
.landing-steps h3 { margin: 0.25rem 0 0; color: var(--ink); font-size: var(--fs-l); }
.landing-steps p { margin: 0; color: var(--ink-2); }

.landing-trust ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.landing-trust li { display: flex; align-items: flex-start; gap: 0.75rem; padding-block: 0.75rem; border-block-start: 1px solid var(--line); color: var(--ink-2); }
.landing-trust li .icon { flex: none; margin-block-start: 0.375rem; color: var(--navy-700); }
.landing-trust strong { color: var(--ink); }

.landing-foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-s); }
.landing-foot span { margin-inline-end: auto; }
.landing-foot a { color: var(--ink-2); }

@media (max-width: 55.99rem) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); padding-inline: 1.25rem; }
  .landing-map { inline-size: min(100%, 21rem); font-size: var(--fs-s); }
}
@media (prefers-reduced-motion: reduce) {
  .map-edge { animation: none; }
}

/* ---------- خانه‌ی پنل: ویجت‌ها ---------- */

.net-home { display: grid; gap: 1rem; }
.net-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; align-items: start; }
.net-widget { display: grid; gap: 0.75rem; align-content: start; min-inline-size: 0; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.net-widget.is-lead { border-block-start: 3px solid var(--panel-700); }
.net-widget.has-work { border-color: var(--amber-100); }
.net-widget p { margin: 0; }
.net-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.net-widget-head h2 { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ink); font-size: var(--fs-l); }
.net-widget-head h2 .icon { color: var(--panel-700); }
.net-widget-head .link-button { color: var(--panel-700); font-size: var(--fs-s); white-space: nowrap; }
.net-widget-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; color: var(--ink-3); }
.net-widget-empty .icon { color: var(--ok-700); }
@media (min-width: 64rem) {
  .net-widget.is-lead { grid-column: span 2; }
  .net-widget.is-wide { grid-column: span 2; }
}

.net-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.net-figures.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.net-figures > div { display: grid; gap: 0.125rem; align-content: start; padding: 0.5rem 0.625rem; border-radius: var(--r-m); background: var(--surface-2); }
.net-figures dt { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.7; }
.net-figures dd { margin: 0; color: var(--ink); font-size: var(--fs-xl); font-weight: 700; line-height: 1.4; }
.net-figures .is-alert dd { color: var(--alert-600); }
.net-figures .is-warm dd { color: var(--amber-700); }
.net-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.net-big strong { color: var(--panel-900); font-size: var(--fs-2xl); line-height: 1.3; }
.net-big small { color: var(--ink-2); font-size: var(--fs-s); }

.net-rows, .net-todo, .net-bars { display: grid; margin: 0; padding: 0; list-style: none; }
.net-rows > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; padding-block: 0.5rem; border-block-start: 1px solid var(--line); }
.net-rows > li:first-child, .net-todo > li:first-child { border-block-start: 0; }
.net-row-main { display: grid; flex: 1 1 9rem; min-inline-size: 0; line-height: 1.7; }
.net-row-main .muted { font-size: var(--fs-s); overflow-wrap: anywhere; }
.net-todo > li { display: grid; gap: 0; padding-block: 0.5rem; border-block-start: 1px solid var(--line); }
.net-todo a { color: var(--ink); font-weight: 600; text-decoration: none; }
.net-todo a:hover { color: var(--panel-700); text-decoration: underline; }
.net-todo a strong { color: var(--amber-700); }
.net-todo .muted { font-size: var(--fs-s); }
.net-bars { gap: 0.375rem; }
.net-bars > li { display: grid; grid-template-columns: minmax(4.5rem, 8rem) minmax(2rem, 1fr) auto; align-items: center; gap: 0.5rem; font-size: var(--fs-s); }
.net-bar { display: block; block-size: 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.net-bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--clinic, var(--panel-700)); }
.net-bar.is-good > span { background: var(--ok-700); }
.net-bar.is-low > span { background: var(--alert-600); }
.net-meter { display: grid; gap: 0.5rem; }

.today-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
.today-next { display: grid; gap: 0.125rem; align-content: start; padding: 0.75rem 1rem; border-inline-start: 4px solid var(--clinic, var(--panel-700)); border-radius: var(--r-m); background: var(--panel-50); }
.today-next-label { color: var(--panel-900); font-size: var(--fs-s); font-weight: 600; }
.today-next-time { color: var(--ink); font-size: var(--fs-2xl); line-height: 1.3; }
.today-next-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; color: var(--ink); font-weight: 600; }
.today-next .muted { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-s); }
.today-next .pill { justify-self: start; }
.today-top .net-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.today-line { display: grid; margin: 0; padding: 0; list-style: none; }
.today-line > li { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.375rem; border-block-start: 1px solid var(--line); }
.today-line > li > .num { min-inline-size: 3.25rem; color: var(--ink); font-weight: 600; }
.today-line-who { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-line .muted { font-size: var(--fs-s); white-space: nowrap; }

.net-week { display: grid; grid-template-columns: repeat(7, minmax(5rem, 1fr)); gap: 0.5rem; margin: 0; padding: 0 0 0.25rem; list-style: none; overflow-x: auto; }
.net-week > li { display: grid; gap: 0.25rem; align-content: start; min-block-size: 6.5rem; padding: 0.5rem 0.375rem; border: 1px solid var(--line); border-radius: var(--r-m); }
.net-week > li.is-today { border-color: var(--panel-700); background: var(--panel-50); }
.net-week > li.is-free { background: var(--surface-2); border-style: dashed; }
.net-week-day { color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.net-week-date { color: var(--ink); font-size: var(--fs-l); font-weight: 700; line-height: 1.3; }
.net-week-shift { display: grid; padding: 0.125rem 0.375rem; border-inline-start: 3px solid var(--clinic, var(--panel-700)); border-radius: var(--r-s); background: var(--surface); font-size: var(--fs-s); line-height: 1.7; }
.net-week-shift small { color: var(--ink-2); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.net-stack { display: flex; gap: 2px; min-block-size: 2.75rem; border-radius: var(--r-m); overflow: hidden; }
.net-stack-part { display: grid; place-content: center; justify-items: center; flex: 1 1 0; min-inline-size: 3.25rem; padding: 0.25rem 0.375rem; color: var(--ink); font-size: var(--fs-xs); line-height: 1.5; text-align: center; }
.net-stack-part strong { font-size: var(--fs-m); }
.net-stack-part.stage-1 { background: var(--amber-100); }
.net-stack-part.stage-2 { background: var(--panel-100); }
.net-stack-part.stage-3 { background: var(--cyan-100); }
.net-stack-part.stage-4 { background: var(--ok-50); }
.net-next-stop { display: grid; gap: 0.125rem; padding: 0.625rem 0.875rem; border-radius: var(--r-m); background: var(--panel-50); }
.net-next-stop a { display: inline-flex; align-items: center; gap: 0.375rem; justify-self: start; color: var(--panel-700); font-weight: 600; }

.net-welcome { display: grid; gap: 0.75rem; justify-items: start; padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--line); border-block-start: 4px solid var(--panel-700);
    border-radius: var(--r-l); background: var(--surface); }
.net-welcome-mark { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: var(--r-l); background: var(--panel-50); color: var(--panel-700); }
.net-welcome h2 { margin: 0; color: var(--ink); font-size: var(--fs-xl); }
.net-welcome p { margin: 0; max-inline-size: 40rem; line-height: 2; }
.net-welcome .form-actions { margin: 0.25rem 0; }

@media (max-width: 40rem) {
  .today-top { grid-template-columns: minmax(0, 1fr); }
  .net-figures.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-figures dd { font-size: var(--fs-l); }
  .today-line .muted { display: none; }
}
.net-widget.is-full { grid-column: 1 / -1; }
.net-pairs { display: grid; margin: 0; }
.net-pairs > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.125rem 0.75rem; padding-block: 0.375rem; border-block-start: 1px solid var(--line); }
.net-pairs dt { color: var(--ink-2); font-size: var(--fs-s); }
.net-pairs dd { margin: 0; color: var(--ink); font-weight: 600; }
.net-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1rem 1.5rem; align-items: start; }
.net-split-main { display: grid; gap: 0.75rem; min-inline-size: 0; }
.net-invite-card { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1rem; border-radius: var(--r-m); background: var(--panel-50); }
.net-invite-card > div { display: grid; gap: 0.125rem; min-inline-size: 0; }
.net-invite-card .network-code { color: var(--panel-900); font-size: var(--fs-xl); }
.net-invite-card .network-qr { flex: none; inline-size: 6.5rem; block-size: 6.5rem; }
@media (max-width: 47.99rem) {
  .net-split { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- زنگوله‌ی پنل‌های شبکه و «نمونه» ---------- */

/* همان زنگوله‌ی برنامه‌ی مطب؛ فقط جایش زیرِ نوارِ بالای پنل است و رنگِ تازه‌ها رنگِ همان پنل. */
.net-bell { position: relative; }
.net-bell .bell-button { inline-size: 2.5rem; block-size: 2.5rem; color: #FFFFFF; }
.net-bell .bell-button:hover { background: rgb(255 255 255 / 0.14); }
.net-bell .bell-button:focus-visible { outline-color: #FFFFFF; }
.net-bell .bell-count { background: #FFC857; color: #1F1300; }
.net-bell .bell-panel { inset-block-start: 3.75rem; inset-inline: auto 0.75rem; inline-size: min(25rem, calc(100vw - 1.5rem)); max-block-size: calc(100dvh - 4.75rem); }
.net-bell .bell-item.is-unread .bell-open { background: linear-gradient(to left, var(--panel-50), transparent 70%); }
.net-bell .bell-open:focus-visible { outline-color: var(--panel-700); }
.net-bell .bell-foot { justify-content: flex-start; font-size: var(--fs-xs); }
.net-switch.is-solid { border-color: #FFFFFF; background: #FFFFFF; color: var(--panel-bar); font-weight: 600; }
.net-switch.is-solid:hover { background: rgb(255 255 255 / 0.88); }
.net-demo-banner { align-items: flex-start; margin: 0; }
.net-demo-banner .icon { flex: none; margin-block-start: 0.3rem; }
.net-demo-banner > span { flex: 1 1 14rem; min-inline-size: 0; }
.net-auth-demo { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; padding: 0.5rem 0.875rem; border: 1px dashed var(--panel-500); border-radius: var(--r-m);
    background: var(--panel-50); color: var(--panel-900); font-size: var(--fs-s); font-weight: 600; text-decoration: none; }
.net-auth-demo:hover { border-style: solid; }
.door-demo { display: inline-flex; align-items: center; gap: 0.375rem; justify-self: start; color: var(--panel-700); font-size: var(--fs-s); font-weight: 600; }
@media (max-width: 59.99rem) {
  .net-switch.is-solid span { display: inline; }
  .net-bell .bell-panel { inset-inline: 0.5rem; inline-size: auto; max-block-size: calc(100dvh - 8.75rem); }
}

/* کارتِ نصبِ پنل: یک ردیفِ آرام بالای ویجت‌ها، نه یک پنجره‌ی مزاحم. */
.net-install { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 0.75rem 1rem; border: 1px dashed var(--panel-500); border-radius: var(--r-l); background: var(--panel-50); }
.net-install-mark { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-m); background: var(--surface); color: var(--panel-700); }
.net-install-text { display: grid; flex: 1 1 16rem; min-inline-size: 0; gap: 0.125rem; }
.net-install-text strong { color: var(--panel-900); }
.net-install-text span { color: var(--ink-2); font-size: var(--fs-s); }
.net-install-actions { display: flex; gap: 0.5rem; margin-inline-start: auto; }

/* اعلانِ گوشی در پایینِ زنگوله‌ی پنل. */
.net-push { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; inline-size: 100%; font-size: var(--fs-s); }
.net-push > span:first-child { display: inline-flex; align-items: center; gap: 0.375rem; }
.net-push .hint { flex: 1 1 100%; margin: 0; font-size: var(--fs-xs); }
.net-push .icon { color: var(--ok-700); }
.net-push .btn .icon { color: inherit; }

/* ---------- تکمیلِ پروفایل و درخواستِ نشانِ تأیید (ایده‌ی ۹) ---------- */
.net-meter-card { display: grid; gap: 0.625rem; padding: 0.875rem 1.125rem; border: 1px solid var(--line); border-inline-start: 4px solid var(--panel-500); border-radius: var(--r-l); background: var(--surface); }
.net-meter-card > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.net-meter-card h2 { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ink); font-size: var(--fs-l); }
.net-meter-card h2 .icon { color: var(--panel-700); }
.net-meter-card > header span { color: var(--ink-2); font-size: var(--fs-s); }
.net-meter-card > header strong { color: var(--panel-900); font-size: var(--fs-m); }
.net-meter-card p { margin: 0; font-size: var(--fs-s); }
.net-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.375rem 1rem; margin: 0; padding: 0; list-style: none; }
.net-steps > li { display: grid; gap: 0; padding-inline-start: 0.75rem; border-inline-start: 2px solid var(--panel-100); line-height: 1.7; }
.net-steps a { color: var(--panel-700); font-weight: 600; }
.net-steps .muted { font-size: var(--fs-xs); }
.net-verification { display: grid; gap: 0.75rem; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); scroll-margin-block-start: 5rem; }
.net-verification h2 { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--ink); font-size: var(--fs-l); }
.net-verification h2 .icon { color: var(--panel-700); }
.net-verification p { margin: 0; }
.net-verification .banner > span { flex: 1 1 14rem; min-inline-size: 0; }
.net-file-list { display: grid; gap: 0.25rem; margin: 0.375rem 0 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.net-file-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; overflow-wrap: anywhere; }
.net-file-list .icon { flex: none; color: var(--ink-3); }

/* پیوند و QR ِ دعوتِ مطب (ایده‌ی ۳) */
.partners-link { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 0.875rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); }
.partners-link .network-qr { flex: none; inline-size: 7.5rem; block-size: 7.5rem; padding: 0.375rem; border-radius: var(--r-s); background: #FFFFFF; }
.partners-link-text { display: grid; flex: 1 1 18rem; min-inline-size: 0; gap: 0.375rem; }
.partners-link-text label { color: var(--ink-2); font-size: var(--fs-s); }
.partners-link-text p { margin: 0; }
.partners-link .lookup-row input { flex: 1 1 14rem; text-align: start; text-transform: none; }
.net-join .landing-hero { grid-template-columns: minmax(0, 1fr); }

/* ---------- تخته‌ی «کارها» و «کارهای من» (ایده‌ی ۱) ---------- */
.task-board .panel-head h2, .my-tasks .panel-head h2 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.task-form { margin-block-end: 0.75rem; }
.task-form .filter-chips { margin-block-start: 0.375rem; }
.task-people { margin-block: 0.25rem 0.5rem; }
.task-people .choice-chip .num { margin-inline-start: 0.25rem; font-weight: 700; }
.task-people .choice-chip.is-late { border-color: var(--alert-200); color: var(--alert-700); }
.task-list { display: grid; margin: 0; padding: 0; list-style: none; }
.task-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.375rem 0.75rem; padding: 0.625rem 0.75rem; border-block-start: 1px solid var(--line); border-inline-start: 3px solid transparent; }
.task-row:first-child { border-block-start: 0; }
.task-row.is-late { border-inline-start-color: var(--alert-600); background: var(--alert-50); }
.task-row.is-closed { opacity: 0.8; }
.task-main { display: grid; flex: 1 1 14rem; min-inline-size: 0; gap: 0.125rem; }
.task-main strong { color: var(--ink); overflow-wrap: anywhere; }
.task-main .muted { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: var(--fs-s); }
.task-due { padding-inline: 0.5rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; }
.task-due.is-late { background: var(--alert-600); color: #FFFFFF; }
.task-note { color: var(--ink-2); font-size: var(--fs-s); overflow-wrap: anywhere; }
.task-actions { display: flex; align-items: center; gap: 0.75rem; }
.task-closing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.375rem; }
.task-closing input { flex: 1 1 12rem; }
.task-closed { margin-block-start: 0.5rem; }
.task-closed > summary { padding-block: 0.375rem; color: var(--ink-2); font-size: var(--fs-s); cursor: pointer; }
.my-tasks { margin-block-end: 1rem; }