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

   کاربرش پشت میز ننشسته. ایستاده، دستکش دستش است، نور ایستگاه
   پرستاری کم است و عجله دارد. هدف لمس کوچک یعنی خطای لمس، و خطای
   لمس یعنی گزارش در دسته اشتباه یا رهاکردن صفحه و برداشتن تلفن —
   یعنی شکست ماژول.
   ========================================================================== */

html { overflow-x: clip; }

body.desk {
  background: var(--paper);
  overflow-x: clip;
  color: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ================================================================ سرصفحه */
.desk-top {
  background: var(--blueprint);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  padding-top: calc(var(--s-3) + env(safe-area-inset-top));
}
.desk-top__in {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
}
/*
| دکمه بازگشت.
|
| هدف لمس ۴۴ پیکسل است — استاندارد کمینه برای انگشت، و اینجا لازم‌تر
| از جاهای دیگر چون کاربر ممکن است دستکش دستش باشد. مربع دیداری ۳۴
| است و ::after آن را تا ۴۴ گسترش می‌دهد بدون اینکه چیدمان را هم
| بزند.
|
| فلش به سمت راست است چون در چیدمان راست‌به‌چپ، «عقب» یعنی راست.
*/
.desk-top__back {
  flex: none;
  width: 34px;
  height: 34px;
  margin-inline-start: calc(var(--s-2) * -1);
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--paper);
  position: relative;
}
.desk-top__back::after { content: ''; position: absolute; inset: -5px; }
.desk-top__back svg { width: 20px; height: 20px; }
.desk-top__back:active { background: rgba(248,246,242,.14); }

/*
| سربرگ باید در یک خط بماند.
|
| نام واقعی بیمارستان می‌تواند بلند باشد و با افزودن دکمه بازگشت،
| فضا تنگ‌تر شده. اگر بشکند، سربرگ دو برابر بلند می‌شود و نام بخش —
| که مهم‌ترین چیز صفحه است — پایین‌تر می‌رود.
|
| پس نام کوتاه می‌شود با سه‌نقطه، و در عرض خیلی کم برچسب «میز خدمات
| پشتیبانی» کنار می‌رود: کاربر همین حالا در آن صفحه است و لازم نیست
| اسمش را بخواند.
*/
.desk-top__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.desk-top__sep  { flex: none; width: 1px; height: 14px; background: rgba(248,246,242,.3); }
.desk-top__mod  { flex: none; color: rgba(248,246,242,.7); white-space: nowrap; }
.desk-top__mine {
  flex: none;
  white-space: nowrap;
  margin-inline-start: auto;
  color: var(--oxide-lt);
  font-weight: 500;
  padding: var(--s-1) var(--s-2);
}

@media (max-width: 480px) {
  .desk-top__sep,
  .desk-top__mod { display: none; }
}

.desk-wrap {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--s-4);
}

/* ============================================================== پیام‌ها */
.desk-flash {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  margin-bottom: var(--s-4);
  font-size: var(--t-sm);
  border-inline-start: 3px solid;
}
.desk-flash--ok  { background: var(--ok-pale);     border-color: var(--ok);     color: var(--ok); }
.desk-flash--err { background: var(--danger-pale); border-color: var(--danger); color: var(--danger); }

/* ============================================================== سرصفحه مکان */
.desk-head { margin-bottom: var(--s-6); }

.desk-head__crumb {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  margin-bottom: var(--s-1);
}
.desk-head__name {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;      /* هرگز مثبت — اتصال حروف فارسی را می‌شکند */
}
.desk-head__sub {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  margin-top: var(--s-2);
}
.desk-head__asset {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: var(--concrete);
  border-radius: var(--radius);
  font-size: var(--t-sm);
}

.desk-tag {
  display: inline-block;
  margin-top: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--radius);
  font-size: var(--t-2xs);
  font-weight: 600;
}
.desk-tag--high     { background: var(--warn-pale);   color: var(--warn); }
.desk-tag--critical { background: var(--danger-pale); color: var(--danger); }

/* ========================================================= پرونده‌های باز */
.desk-open {
  background: var(--warn-pale);
  border: 1px solid rgba(168,112,26,.25);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
  margin-bottom: var(--s-6);
}
.desk-open__t {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--warn);
  margin-bottom: var(--s-2);
}
.desk-open__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-2);
  background: var(--white);
  border-radius: var(--radius);
  margin-bottom: var(--s-1);
  font-size: var(--t-xs);
}
.desk-open__cat { font-weight: 600; }
.desk-open__row .ref { margin-inline-start: auto; color: var(--ink-faint); }

/* ================================================================== گام */
.desk-step { margin-bottom: var(--s-7); }

.desk-step__t {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-md);
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.desk-step__n {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--blueprint);
  color: var(--paper);
  border-radius: 50%;
  font-size: var(--t-sm);
  font-weight: 600;
}
.desk-change {
  margin-inline-start: auto;
  background: none;
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-xs);
  color: var(--oxide);
  cursor: pointer;
}

/* ============================================================== کاشی‌ها */
.desk-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 560px) {
  .desk-tiles { grid-template-columns: repeat(3, 1fr); }
}

.desk-tile {
  /* ارتفاع کف ۱۱۲ پیکسل — لمس با دستکش و در حال حرکت */
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-3);
  background: var(--white);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius-lg);
  text-align: start;
  cursor: pointer;
  transition: border-color .12s, transform .06s;
}
.desk-tile:active { transform: scale(.98); }
.desk-tile:hover,
.desk-tile.is-on  { border-color: var(--oxide); }
.desk-tile.is-on  { background: var(--oxide-pale); }

.desk-tile__ic {
  width: 30px; height: 30px;
  color: var(--blueprint);
}
.desk-tile__ic svg { width: 100%; height: 100%; }
.desk-tile.is-on .desk-tile__ic { color: var(--oxide); }

.desk-tile__n {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.5;
}
.desk-tile__h {
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  line-height: 1.7;
}

/* ================================================================= فرم */
.desk-form { display: block; }
/*
| تله ربات — بدون پرتاب کردن عنصر بیرون از سند.
|
| inset-inline-start: -9999px در راست‌به‌چپ یعنی right: -9999px و
| سند را ۹۹۹۹ پیکسل پهن می‌کند.
*/
.desk-hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.desk-field { margin-bottom: var(--s-5); }
.desk-field--sm { max-width: 130px; }

.desk-row { display: flex; gap: var(--s-3); align-items: flex-start; }
.desk-row .desk-field { flex: 1; }

.desk-label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}

.desk-form textarea,
.desk-form input[type=text],
.desk-form input[type=tel],
.desk-form select {
  width: 100%;
  padding: var(--s-3);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--t-base);   /* زیر ۱۶ پیکسل، iOS صفحه را زوم می‌کند */
  line-height: 1.9;
}
.desk-form textarea:focus,
.desk-form input:focus,
.desk-form select:focus { border-color: var(--oxide); outline: none; }

.desk-code { text-align: center; font-size: var(--t-lg) !important; }

/* ============================================================== تراشه‌ها */
.desk-chips { display: grid; gap: var(--s-2); }
@media (min-width: 480px) {
  .desk-chips { grid-template-columns: repeat(3, 1fr); }
}
.desk-chips--sm { grid-template-columns: repeat(4, 1fr); }

.desk-chip {
  display: block;
  position: relative;
  padding: var(--s-3);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  min-height: 52px;
}
/*
| رادیوی مخفی، با مرجع جایگاه.
|
| بدون position: relative روی والد، این عنصر نسبت به کل صفحه چیده
| می‌شود و عرض کامل می‌گیرد — از لبه بیرون می‌زند و چون نامرئی است
| کسی نمی‌بیندش؛ فقط صفحه چند پیکسل می‌لغزد.
|
| همان اشکالی که در فرم ابلاغیه گزارش شد. اینجا هم بود و پیدا نشده
| بود.
*/
.desk-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.desk-chip__t { display: block; font-size: var(--t-sm); font-weight: 600; }
.desk-chip__d { display: block; font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.6; margin-top: 2px; }

.desk-chip:has(input:checked) { border-color: var(--blueprint); background: var(--concrete); }
.desk-chip--urgent:has(input:checked)    { border-color: var(--warn);   background: var(--warn-pale);   color: var(--warn); }
.desk-chip--emergency:has(input:checked) { border-color: var(--danger); background: var(--danger-pale); color: var(--danger); }

/* ============================================================ ضبط صدا */
.desk-rec {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.desk-rec__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  min-height: 44px;
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--t-xs);
  cursor: pointer;
}
.desk-rec__btn svg { width: 18px; height: 18px; }
.desk-rec__btn.is-rec { border-color: var(--danger); color: var(--danger); background: var(--danger-pale); }
.desk-rec__btn.is-rec svg { animation: desk-pulse 1.1s infinite; }
@keyframes desk-pulse { 50% { opacity: .35; } }

.desk-rec__time { font-size: var(--t-sm); font-weight: 600; }
.desk-rec__drop { background: none; border: none; color: var(--danger); font-size: var(--t-xs); cursor: pointer; }

/* ================================================================ عکس */
.desk-photo { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.desk-photo__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  min-height: 48px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--t-xs);
  cursor: pointer;
}
.desk-photo__btn svg { width: 20px; height: 20px; }
.desk-photo__btn--sm { min-height: 40px; margin-top: var(--s-2); }

.desk-photo__prev { width: 78px; height: 78px; object-fit: cover; border-radius: var(--radius); }
.desk-photo__drop { background: none; border: none; color: var(--danger); font-size: var(--t-xs); cursor: pointer; }

.desk-note {
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  margin-top: var(--s-2);
  line-height: 1.8;
}
.desk-note--warn {
  color: var(--warn);
  background: var(--warn-pale);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
}

/* ============================================================== ارسال */
.desk-submit {
  width: 100%;
  min-height: 56px;
  background: var(--oxide);
  color: var(--on-fill);
  border: none;
  border-radius: var(--radius);
  font-size: var(--t-md);
  font-weight: 600;
  cursor: pointer;
}
.desk-submit:active { background: var(--c-primary-2); }
.desk-submit--sm { min-height: 48px; font-size: var(--t-sm); margin-top: var(--s-3); }

/* ============================================================ پیگیری */
.desk-head--track { margin-bottom: var(--s-4); }

.desk-track__meta { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }

.desk-st {
  display: inline-block;
  padding: 3px var(--s-3);
  border-radius: var(--radius);
  font-size: var(--t-2xs);
  font-weight: 600;
  background: var(--idle-pale);
  color: var(--idle);
}
.desk-st--new         { background: var(--concrete);    color: var(--ink-soft); }
.desk-st--assigned,
.desk-st--in_progress { background: var(--warn-pale);   color: var(--warn); }
.desk-st--on_hold     { background: var(--idle-pale);   color: var(--idle); }
.desk-st--resolved    { background: var(--oxide-pale);  color: var(--oxide); }
.desk-st--verified,
.desk-st--auto_closed { background: var(--ok-pale);     color: var(--ok); }
.desk-st--cancelled   { background: var(--danger-pale); color: var(--danger); }

/* نوار پیشرفت */
.desk-prog {
  display: flex;
  list-style: none;
  margin-bottom: var(--s-6);
  counter-reset: none;
}
.desk-prog__i { flex: 1; text-align: center; position: relative; }
.desk-prog__i::before {
  content: '';
  position: absolute;
  top: 7px;
  inset-inline-end: 50%;
  width: 100%;
  height: 2px;
  background: var(--line-mid);
}
.desk-prog__i:first-child::before { display: none; }
.desk-prog__i.is-done::before { background: var(--ok); }

.desk-prog__dot {
  position: relative;
  display: block;
  width: 16px; height: 16px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--concrete-dk);
  border: 2px solid var(--paper);
  z-index: 1;
}
.desk-prog__i.is-done .desk-prog__dot { background: var(--ok); }

.desk-prog__l {
  display: block;
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  margin-top: var(--s-2);
  line-height: 1.5;
}
.desk-prog__i.is-done .desk-prog__l { color: var(--ink); font-weight: 600; }

/* ====================================================== راستی‌آزمایی */
.desk-verify {
  background: var(--oxide-pale);
  border: 1px solid var(--oxide);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
}
.desk-verify__t { font-size: var(--t-md); font-weight: 700; margin-bottom: var(--s-3); }
.desk-verify__action {
  background: var(--white);
  padding: var(--s-3);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.9;
}
.desk-verify__ask { font-size: var(--t-sm); font-weight: 600; margin: var(--s-4) 0 var(--s-3); }

.desk-verify__btns { display: grid; gap: var(--s-3); }
@media (min-width: 480px) { .desk-verify__btns { grid-template-columns: 1fr 1fr; } }

.desk-btn {
  min-height: 60px;
  border: none;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  padding: var(--s-3);
}
.desk-btn--yes   { background: var(--ok);     color: var(--on-fill); }
.desk-btn--no    { background: var(--white);  color: var(--danger); border: 2px solid var(--danger); }
.desk-btn--ghost { background: var(--white);  color: var(--blueprint); border: 1px solid var(--line-mid); min-height: 48px; }

.desk-verify__more { margin-top: var(--s-4); }

.desk-metoo {
  text-align: center;
  padding: var(--s-4);
  background: var(--concrete);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-6);
}
.desk-metoo p { font-size: var(--t-sm); margin-bottom: var(--s-3); }

/* ================================================================ کارت */
.desk-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.desk-card__t { font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s-4); }

.desk-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--t-xs); }
.desk-dl dt { color: var(--ink-faint); }
.desk-dl dd { font-weight: 500; }

.desk-desc {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.95;
}

.desk-shots { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.desk-shots img { width: 104px; height: 104px; object-fit: cover; border-radius: var(--radius); }
.desk-shots--sm img { width: 72px; height: 72px; }
.desk-shots audio { width: 100%; max-width: 300px; }

/* ============================================================== کارنامه */
.desk-trail { list-style: none; }
.desk-trail__i { display: flex; gap: var(--s-3); padding-bottom: var(--s-4); position: relative; }
.desk-trail__i:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-inline-start: 5px;
  top: 14px; bottom: 0;
  width: 1px;
  background: var(--line-mid);
}
.desk-trail__d {
  flex: none;
  width: 11px; height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--blueprint);
  z-index: 1;
}
.desk-trail__l { font-size: var(--t-xs); font-weight: 600; }
.desk-trail__n { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.85; margin-top: 2px; }
.desk-trail__t { display: block; font-size: var(--t-2xs); color: var(--ink-faint); margin-top: 3px; }

/* =========================================================== فهرست من */
.desk-mine {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}
.desk-mine__top  { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.desk-mine__cat  { font-weight: 600; font-size: var(--t-sm); }
.desk-mine__loc  { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s-1); }
.desk-mine__foot { display: flex; gap: var(--s-3); font-size: var(--t-2xs); color: var(--ink-faint); margin-top: var(--s-2); }
.desk-mine__call {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--oxide);
  color: var(--on-fill);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: center;
}

.desk-empty { text-align: center; color: var(--ink-faint); padding: var(--s-8) 0; }

.desk-back {
  display: block;
  text-align: center;
  padding: var(--s-4);
  color: var(--blueprint);
  font-size: var(--t-sm);
  font-weight: 500;
}

/* ============================================================== پاورقی */
.desk-foot {
  max-width: 720px;
  margin: var(--s-7) auto 0;
  padding: var(--s-5) var(--s-4) var(--s-8);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  line-height: 1.9;
}
.desk-foot__warn { color: var(--danger); font-weight: 600; margin-top: var(--s-2); }


/* ==========================================================================
   نشان شرکت — تصویر رسمی، نه بازترسیم
   --------------------------------------------------------------------------
   نشان حالا <img> است. پس اندازه‌دهی عوض می‌شود: پیش از این عرض و
   ارتفاع هر دو ثابت بودند؛ حالا فقط ارتفاع تعیین می‌شود و عرض خودش
   می‌آید تا نسبت اصلی (۱٫۵۴ به ۱) دست‌نخورده بماند.
   ========================================================================== */

.logo__mark {
  width: auto;
  height: 30px;
  display: block;
  object-fit: contain;
}


/*
| پلاک نباید ارتفاع نشان را بخورد.
|
| سامانه روی همه عناصر box-sizing: border-box دارد، پس height شامل
| padding هم می‌شود — با ارتفاع ۳۰ و padding ۶، خودِ نشان ۱۸ پیکسل
| می‌ماند و خوانا نیست. content-box یعنی عدد ارتفاع مال خودِ تصویر
| است و پلاک از بیرون اضافه می‌شود.
*/
.desk-top__mark {
  box-sizing: content-box;
  height: 22px;
  width: auto;
  padding: 4px 6px;
  background: var(--paper);
  border-radius: 3px;
}


/* ==========================================================================
   نظرسنجی خدمت — ستاره‌ها
   --------------------------------------------------------------------------
   با رادیو و CSS ساخته شده، بدون جاوااسکریپت.

   -------------------------------------------------------------------------
   چطور کار می‌کند

   ستاره‌ها در HTML به ترتیب معکوس‌اند (۵ تا ۱) و با direction به
   جای درست برمی‌گردند.

   آنگاه با ~ می‌شود گفت «این و همه بعدی‌ها» — که در ترتیب معکوس
   یعنی «این و همه قبلی‌ها» که چشم می‌بیند.

   بدون این ترفند، رنگ کردن ستاره‌های قبلی جاوااسکریپت می‌خواهد.
   ========================================================================== */

.desk-rate {
  margin-top: var(--s-5, 16px);
  padding-top: var(--s-4, 12px);
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.desk-rate__h {
  margin-bottom: var(--s-3, 9px);
}

.desk-rate__h strong {
  display: block;
  font-size: 15px;
}

.desk-rate__h span {
  font-size: 12px;
  color: #777;
}

.desk-rate__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.desk-rate__row:last-of-type { border-bottom: 0; }

.desk-rate__k {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.desk-rate__k span {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: #888;
}

/* -------------------------------------------------- ستاره‌ها */

.desk-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
  flex: 0 0 auto;
}

.desk-stars input { position: absolute; opacity: 0; width: 0; height: 0; }

/*
| ستاره — هدف لمس بزرگ.
|
| روی موبایل، ستاره ریز یعنی انگشت خطا می‌کند و کاربر امتیاز
| اشتباه می‌دهد.
|
| ۳۴ پیکسل کمینه‌ای است که خطا نمی‌سازد.
*/
.desk-stars label {
  font-size: 27px;
  line-height: 1;
  color: #d8d3cc;
  cursor: pointer;
  padding: 3px 2px;
  min-width: 34px;
  text-align: center;
  transition: color .12s ease, transform .12s ease;
  user-select: none;
}

/*
| این و همه قبلی‌ها.
|
| در ترتیب معکوس، ~ به ستاره‌های سمت راست اشاره می‌کند — که چشم
| آن‌ها را «قبلی» می‌بیند.
*/
.desk-stars input:checked ~ label,
.desk-stars label:hover,
.desk-stars label:hover ~ label {
  color: #E0A800;
}

.desk-stars label:active { transform: scale(1.14); }

.desk-stars input:focus-visible + label {
  outline: 2px solid #0A6E71;
  outline-offset: 2px;
  border-radius: 4px;
}

.desk-rate textarea {
  width: 100%;
  margin-top: var(--s-3, 9px);
  padding: 9px 11px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

@media screen and (max-width: 420px) {
  /*
  | روی صفحه باریک، برچسب بالای ستاره‌ها.
  |
  | کنار هم بودنشان یعنی یا نام کوتاه می‌شود یا ستاره‌ها ریز —
  | و هر دو بد است.
  */
  .desk-rate__row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .desk-stars { align-self: center; }
  .desk-stars label { font-size: 30px; min-width: 38px; }
}


/* ==========================================================================
   نصب روی گوشی و دکمه خانه
   ========================================================================== */

/*
| نام بیمارستان — دکمه خانه.
|
| در هر سایتی نام بالای صفحه به خانه می‌برد؛ کاربر این را بی‌آنکه
| بداند، می‌داند.
*/
.desk-top__home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  border-radius: 7px;
  padding: 3px 5px;
  margin-inline-start: -5px;
  transition: background .12s ease;
}

.desk-top__home:active { background: rgba(255, 255, 255, .12); }

/* ==================================================== نوار نصب */

/*
| ویژگی hidden باید برنده شود.
|
| -------------------------------------------------------------------------
| ایرادی که اینجا بود
|
| نوارها با hidden ساخته می‌شوند و جاوااسکریپت وقتی لازم باشد
| بازشان می‌کند.
|
| ولی `display: flex` بر hidden غالب است — چون hidden فقط
| `display: none` پیش‌فرض مرورگر را می‌دهد، و هر قاعده‌ای که display
| بدهد آن را می‌شکند.
|
| نتیجه: هر سه نوار همیشه دیده می‌شدند، حتی وقتی نباید.
|
| این قاعده با !important جلویش را می‌گیرد — یکی از معدود جاهایی که
| واقعاً لازم است.
*/
.pwa-bar[hidden],
.pwa-ios[hidden] {
  display: none !important;
}

.pwa-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #16394E;
  color: var(--on-fill);
}

.pwa-bar__t { flex: 1 1 auto; min-width: 0; line-height: 1.5; }

.pwa-bar__t strong { display: block; font-size: 14px; }

.pwa-bar__t span {
  font-size: 11.5px;
  opacity: .82;
}

.pwa-bar__a { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/*
| دکمه نصب — هدف لمس بزرگ.
|
| روی موبایل، دکمه ریز یعنی انگشت خطا می‌کند و کاربر تصادفی
| می‌بندد.
*/
.pwa-bar__yes {
  padding: 9px 18px;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: var(--c-surface);
  color: #16394E;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.pwa-bar__yes:active { opacity: .85; }

.pwa-bar__no {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  color: var(--on-fill);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* ==================================================== راهنمای آیفون */

/*
| آیفون رویداد نصب ندارد، پس باید دستی گفته شود.
|
| بدون این، کاربرانش هرگز نمی‌فهمند می‌شود نصبش کرد.
*/
.pwa-ios {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #FBF4E2;
  color: #6B4E0A;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.pwa-ios__t { flex: 1 1 auto; line-height: 1.7; }

.pwa-ios__t strong { display: block; font-size: 13.5px; }

.pwa-ios__t span { font-size: 12px; }

.pwa-ios__t svg {
  vertical-align: -3px;
  margin: 0 2px;
}

.pwa-ios .pwa-bar__no {
  background: rgba(0, 0, 0, .08);
  color: #6B4E0A;
  flex: 0 0 auto;
}

@media print {
  .pwa-bar, .pwa-ios { display: none !important; }
}


/* ==================================================== صفحه آفلاین */

.desk-offline { text-align: center; padding: 30px 20px; }

.desk-offline__i { color: #B9B2A8; margin-bottom: 14px; }

.desk-offline__t { font-size: 18px; margin: 0 0 10px; }

.desk-offline__p {
  font-size: 14px;
  color: #666;
  line-height: 2;
  margin: 0 0 20px;
}

.desk-offline__n {
  margin-top: 18px;
  font-size: 12px;
  color: #888;
}


/* ==================================================== آماده‌سازی عکس */

/*
| پیام وضعیت عکس.
|
| بدون آن، کاربر نمی‌داند عکسش پذیرفته شده یا نه — و روی گوشی کند،
| چند ثانیه سکوت یعنی «کار نکرد».
*/
.photo-note {
  margin-top: 6px;
  font-size: 11.5px;
  color: #777;
  line-height: 1.6;
}

.photo-note.is-ok { color: #0A6669; }

/*
| دکمه در حال ارسال.
|
| روی اینترنت کند، کاربر فکر می‌کند دکمه کار نکرده و دوباره
| می‌زند — و دو گزارش یکسان ثبت می‌شود.
*/
button[disabled] {
  opacity: .6;
  cursor: wait;
}


/* ==========================================================================
   قاعده سراسری hidden
   --------------------------------------------------------------------------
   ویژگی hidden فقط `display: none` پیش‌فرض مرورگر را می‌دهد — و هر
   قاعده‌ای که display بدهد آن را می‌شکند.

   پس عنصری که با hidden ساخته شده و کلاسش flex یا grid دارد،
   همیشه دیده می‌شود.

   این یکی از معدود جاهایی است که important واقعاً لازم است: هدف
   قاعده این است که بر همه غالب شود.
   ========================================================================== */

[hidden] { display: none !important; }


/* ==========================================================================
   جلوگیری از جابجایی افقی روی موبایل
   --------------------------------------------------------------------------
   مسئله‌ای که حل می‌کند:

   صفحه روی گوشی از مرکز جابجا می‌شد و کاربر باید با انگشت
   برمی‌گرداندش.

   -------------------------------------------------------------------------
   چرا overflow-x: clip کافی نبود

   clip سرریز را پنهان می‌کند ولی عرض سند را کوچک نمی‌کند. اگر
   عنصری پهن‌تر از صفحه باشد، مرورگر همچنان فضای افقی می‌سازد.

   سه قاعده با هم این را می‌بندند:

     max-width روی html و body     عرض سند قفل می‌شود
     position: relative            تا clip مرجع داشته باشد
     min-width: 0 روی flex         تا فرزندان جمع شوند
   ========================================================================== */

html,
body.desk {
  max-width: 100vw;
  position: relative;
  overflow-x: hidden;
}

/*
| هر عنصر مستقیم بدنه، حداکثر عرض صفحه.
|
| -------------------------------------------------------------------------
| چرا لازم است
|
| overflow روی بدنه، سرریز فرزندان را پنهان می‌کند ولی عرض سند را
| کوچک نمی‌کند — مرورگر همچنان فضای افقی می‌سازد و صفحه جابجا
| می‌شود.
|
| با قفل کردن عرض هر فرزند مستقیم، هیچ‌چیز نمی‌تواند صفحه را پهن
| کند.
*/
body.desk > * {
  max-width: 100%;
  overflow-x: clip;
}

/*
| فرزندان flex باید بتوانند جمع شوند.
|
| پیش‌فرض flex این است که عنصر از محتوایش کوچک‌تر نشود — پس نام
| طولانی یا نشانی بلند، کل ردیف را پهن می‌کند.
*/
.desk-top__in,
.desk-top__home,
.pwa-bar,
.pwa-bar__t,
.pwa-ios,
.pwa-ios__t {
  min-width: 0;
}

/*
| متن بلند بشکند.
|
| نشانی یا نام بی‌فاصله، ستون را پهن می‌کند و راهی جز شکستن ندارد.
*/
.desk-top__name,
.desk-top__mod,
.pwa-bar__t span,
.pwa-ios__t span {
  overflow-wrap: anywhere;
}

/*
| تصویر و جدول هرگز از صفحه بیرون نزنند.
|
| رایج‌ترین علت سرریز همین دو هستند — عکس بزرگ یا جدول پرستون.
*/
.desk-wrap img,
.desk-wrap video,
.desk-wrap canvas {
  max-width: 100%;
  height: auto;
}

.desk-wrap table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===================================================================
   بازگرداندن عرض ستون میز خدمت
   ===================================================================

   این صفحه از یک جایی به بعد تمام‌عرض شد. علتش یک برخورد اولویت
   بود، نه تغییر عمدی:

     .desk-wrap        { max-width: 720px }   ویژگی ۰،۱،۰
     body.desk > *     { max-width: 100%  }   ویژگی ۰،۱،۱

   قاعده دوم برای بستن اسکرول افقی نوشته شده بود و کارش را هم درست
   انجام می‌داد. ولی <main class="desk-wrap"> فرزند مستقیم بدنه
   است، پس همان قاعده max-width آن را هم بازنویسی می‌کرد — و ۷۲۰
   پیکسل از بین می‌رفت.

   -------------------------------------------------------------------
   چرا این‌طور اصلاح شد

   می‌شد قاعده دوم را محدود کرد، ولی آن نگهبان اسکرول افقی است و
   دست بردن در دامنه‌اش، ایراد قبلی را برمی‌گرداند.

   به‌جایش عرض ستون با همان ویژگی بازنویسی می‌شود — صریح، و پس از
   آن.
   =================================================================== */

body.desk > .desk-wrap {
  max-width: 720px;
  margin-inline: auto;
}

/* ------------------------------------- پیوندهای زیر دکمه */

/*
| همان الگوی صفحه ورود کارکنان.
|
| خطی باریک بالایش، متن کوچک، و نقطه‌ای میان دو پیوند — تا بخشی از
| فرم به نظر نرسد.
*/
.desk-alt {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--t-sm);
}

.desk-alt a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
}

.desk-alt a:hover,
.desk-alt a:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.desk-alt__sep {
  color: var(--line);
}

/* ===================================================================
   درگاه‌های پیشین — بالای کادر ورود کد
   -------------------------------------------------------------------
   هدف‌های لمسی بزرگ، چون کاربرش پرستاری است که با یک دست گوشی را
   گرفته و شاید دستکش دارد.
   =================================================================== */

.desk-recent {
  margin-bottom: var(--s-5);
}

.desk-recent__t {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3);
}

.desk-recent__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/*
| هر درگاه یک ردیف لمسی.
|
| ارتفاع کمینه ۵۲ پیکسل: بالاتر از حداقل ۴۴ که راهنماهای دسترس‌پذیری
| می‌گویند، چون این صفحه نیمه‌شب و با عجله استفاده می‌شود.
*/
.desk-recent__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}

.desk-recent__item:hover,
.desk-recent__item:focus-visible {
  border-color: var(--brand, #16394E);
  background: color-mix(in srgb, var(--brand, #16394E) 5%, #FFFFFF);
}

.desk-recent__ic {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--brand, #16394E);
  opacity: .75;
}

/*
| متن، فضای باقیمانده را می‌گیرد و در صورت بلندی کوتاه می‌شود.
|
| min-width صفر لازم است: فرزند flex به‌طور پیش‌فرض از محتوایش
| کوچک‌تر نمی‌شود، پس نام بلند بخش ردیف را پهن می‌کرد.
*/
.desk-recent__txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.45;
}

.desk-recent__txt strong {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desk-recent__txt small {
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* پیکان در RTL به چپ اشاره می‌کند — جهت «جلو رفتن» */
.desk-recent__go {
  flex: 0 0 auto;
  color: var(--ink-faint);
}

.desk-recent__hint {
  margin: var(--s-3) 0 0;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

/* ===================================================================
   کارت‌های گزارش، سربرگ رنگی، و پنل تأمین کالا
   ===================================================================

   این صفحه‌ها را مدیران بیمارستان هم می‌بینند. رنگ اینجا تزئین
   نیست — قبل از هر متنی می‌گوید پرونده کجاست.

     سبز     تمام و تأیید شده
     فیروزه  انجام شده، منتظر تأیید گزارش‌دهنده
     نارنجی  در جریان
     آبی     منتظر تأمین کالا — بیرون از دست فنی
     قرمز    هنوز کسی سراغش نرفته
     خاکستری باطل

   هر رنگ سه متغیر دارد: خط، پس‌زمینه ملایم، و جوهر تیره برای متن.
   با color-mix ساخته نمی‌شوند چون باید روی پس‌زمینه رنگی هم خوانا
   بمانند و ترکیب خودکار، تضاد را تضمین نمی‌کند.
   =================================================================== */

.desk-rc,
.desk-hero {
  --t-line: #C9CFD6;
  --t-soft: #F4F6F8;
  --t-ink:  #37414B;
}

.desk-rc--ok,     .desk-hero--ok     { --t-line: #2E9E63; --t-soft: #E9F7EF; --t-ink: #186B41; }
.desk-rc--check,  .desk-hero--check  { --t-line: #0E9AA0; --t-soft: #E4F6F7; --t-ink: #0A6669; }
.desk-rc--work,   .desk-hero--work   { --t-line: #D98324; --t-soft: #FDF1E3; --t-ink: #8A4E0B; }
.desk-rc--supply, .desk-hero--supply { --t-line: #2A6FB8; --t-soft: #E8F1FB; --t-ink: #1A4A7E; }
.desk-rc--wait,   .desk-hero--wait   { --t-line: #CC3A4A; --t-soft: #FDECEE; --t-ink: #8D1F2C; }
.desk-rc--void,   .desk-hero--void   { --t-line: #9AA2AB; --t-soft: #F2F3F5; --t-ink: #5A636C; }

/* ------------------------------------------------ سربرگ پیگیری */

.desk-hero {
  background: var(--t-soft);
  border: 1px solid color-mix(in srgb, var(--t-line) 35%, transparent);
  border-top: 3px solid var(--t-line);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}

.desk-hero__crumb {
  font-size: 12px;
  color: var(--t-ink);
  opacity: .75;
  margin-bottom: 4px;
}

.desk-hero__name {
  margin: 0 0 var(--s-3);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}

.desk-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.desk-hero__st {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--t-line);
  color: var(--on-fill);
  font-size: 13px;
  font-weight: 600;
}

.desk-hero__ref { color: var(--t-ink); opacity: .8; }

/*
| سه عدد زیر سربرگ.
|
| شبکه خودکار: روی گوشی دو ستون، روی صفحه بزرگ‌تر سه — بدون
| نقطه‌شکست دستی.
*/
.desk-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in srgb, var(--t-line) 25%, transparent);
}

.desk-hero__fact { display: flex; flex-direction: column; line-height: 1.5; }
.desk-hero__fact span   { font-size: 11px; color: var(--t-ink); opacity: .8; }
.desk-hero__fact strong { font-size: 14px; color: var(--ink); }

/* ------------------------------------------- کارت گزارش‌های من */

.desk-rc {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--t-soft);
  border: 1px solid color-mix(in srgb, var(--t-line) 30%, transparent);
  border-radius: var(--radius);
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}

.desk-rc:hover,
.desk-rc:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(20, 24, 28, .09);
}

/*
| نوار رنگی کناری.
|
| روی کارت‌های پشت سر هم، لبه رنگی از پس‌زمینه ملایم سریع‌تر
| خوانده می‌شود — چشم ستون نوارها را یکجا می‌بیند.
*/
.desk-rc__bar {
  flex: 0 0 5px;
  background: var(--t-line);
}

.desk-rc__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
}

.desk-rc__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.desk-rc__st {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--t-line);
  color: var(--on-fill);
  font-size: 12px;
  font-weight: 600;
}

.desk-rc__cat { font-size: 12px; color: var(--t-ink); }

.desk-rc__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.desk-rc__loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.desk-rc__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--ink-faint);
}

/*
| فراخوان — فقط وقتی کاری با کاربر هست.
|
| کارتی که هیچ اقدامی نمی‌خواهد این نوار را ندارد، تا وقتی هست
| واقعاً معنا داشته باشد.
*/
.desk-rc__call {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--t-line) 40%, transparent);
  font-size: 13px;
  font-weight: 600;
  color: var(--t-ink);
}

/* --------------------------------------------- خلاصه بالای فهرست */

.desk-sum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: var(--s-4);
}

.desk-sum__i {
  text-align: center;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--c-surface);
}

.desk-sum__i strong { display: block; font-size: 20px; line-height: 1.3; }
.desk-sum__i span   { font-size: 12px; color: var(--ink-faint); }

.desk-sum__i.is-hot {
  border-color: #D98324;
  background: #FDF1E3;
}

.desk-sum__i.is-hot strong { color: #8A4E0B; }

/* --------------------------------------------- پنل تأمین کالا */

.desk-act {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--c-surface);
}

.desk-act--supply {
  border-color: #2A6FB8;
  border-top-width: 3px;
  background: #F4F8FD;
}

.desk-act__t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--s-3);
  font-size: 15px;
  color: #1A4A7E;
}

.desk-act__ic { display: inline-flex; flex: 0 0 auto; }

/*
| متن نیاز، با نقل‌قول دیداری.
|
| این جمله را تکنسین نوشته، نه سامانه — و باید همین‌طور دیده شود.
*/
.desk-act__need {
  margin: 0 0 var(--s-3);
  padding: 8px 12px;
  border-inline-start: 3px solid #2A6FB8;
  background: var(--c-surface);
  border-radius: 6px;
  font-size: 14px;
}

.desk-act__ask {
  margin: 0 0 var(--s-4);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-soft);
}

.desk-opt {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
  margin-inline-start: 4px;
}

/* --------------------------------------------- کادر با دکمه اکنون */

.desk-now {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.desk-now input { flex: 1 1 auto; min-width: 0; }

.desk-now__btn {
  flex: 0 0 auto;
  padding: 0 16px;
  border: 1px solid #2A6FB8;
  border-radius: var(--radius);
  background: var(--c-surface);
  color: #1A4A7E;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.desk-now__btn:hover { background: #E8F1FB; }

/* بازخورد لمس — وگرنه کاربر نمی‌فهمد کار کرده و دوباره می‌زند */
.desk-now__btn.is-set {
  background: #2A6FB8;
  color: var(--on-fill);
}

.desk-submit--go {
  background: #2E9E63;
}

.desk-dl--tight dt,
.desk-dl--tight dd { padding-block: 4px; }

/* --------------------------------------------- نوار پیشرفت شش‌گامه */

/*
| با افزوده شدن گام تأمین، نوار شش‌گام می‌شود و برچسب‌ها روی گوشی
| روی هم می‌افتند.
*/
.desk-prog--6 .desk-prog__l { font-size: 10px; }

@media (max-width: 420px) {
  .desk-prog--6 .desk-prog__l { font-size: 9px; letter-spacing: -.2px; }
}

/* گام جاری — نبض ملایم، تا معلوم شود همین‌جا ایستاده‌ایم */
.desk-prog__i.is-now .desk-prog__dot {
  background: #2A6FB8;
  box-shadow: 0 0 0 4px rgba(42, 111, 184, .18);
}

.desk-prog__i.is-now .desk-prog__l {
  color: #1A4A7E;
  font-weight: 600;
}

/* --------------------------------------------- سمت تکنسین */

.sd-act--supply .sd-act__hint,
.sd-supply-wait .hint {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 4px;
}

.sd-supply-wait {
  padding: 10px 12px;
  border: 1px solid #2A6FB8;
  border-radius: var(--radius);
  background: #F4F8FD;
}

/* ===================================================================
   انتخابگر تاریخ شمسی در میز خدمات
   ===================================================================

   همان چیدمان کاردکس: روز، ماه، سال در یک ردیف؛ ساعت و دقیقه و
   دکمه «اکنون» در ردیف دوم.

   -------------------------------------------------------------------
   تله‌ای که اینجا هست

   قاعده پایه فرم روی هر select عرض صد درصد می‌گذارد:

       .desk-form select { width: 100% }

   در flex، اگر پایه auto باشد، از همان width خوانده می‌شود — یعنی
   صد درصدِ ظرف. نتیجه‌اش این بود که فهرست ساعت تمام ردیف را
   می‌گرفت و دقیقه و دکمه بیرون کارت می‌افتادند.

   ردیف تاریخ سالم بود چون flex: 1 1 0 پایه را صفر می‌کند و width
   را بی‌اثر می‌گذارد.

   راه‌حل: ردیف ساعت با grid ساخته می‌شود، نه flex. آنجا عرض ستون
   را شبکه تعیین می‌کند و width: 100% داخل سلول، همان سلول را پر
   می‌کند — نه بیشتر.
   =================================================================== */

.desk-jdt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ------------------------------------------------ ردیف تاریخ */

.desk-jdt__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
| سه فهرست تاریخ، عرض برابر.
|
| پایه صفر لازم است: بدون آن «اردیبهشت» ستون ماه را پهن می‌کند و
| ردیف با هر تغییر ماه می‌پرد.
*/
.desk-jdt__row > select {
  flex: 1 1 0;
  min-width: 0;
}

/* ------------------------------------------------ ردیف ساعت */

.desk-jdt__row--time {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

/*
| داخل شبکه، عرض صد درصد بی‌خطر است: سلول قبلاً اندازه گرفته.
| minmax(0, 1fr) هم می‌گذارد ستون از محتوایش کوچک‌تر شود.
*/
.desk-jdt__row--time > select {
  width: 100%;
  min-width: 0;
}

.desk-jdt__lbl {
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.desk-jdt__colon {
  color: var(--ink-faint);
  text-align: center;
}

.desk-jdt__now {
  padding: 0 16px;
  min-height: 44px;
  white-space: nowrap;
  border: 1px solid #2A6FB8;
  border-radius: var(--radius);
  background: var(--c-surface);
  color: #1A4A7E;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.desk-jdt__now:hover { background: #E8F1FB; }

/* بازخورد لمس — وگرنه کاربر دوباره می‌زند */
.desk-jdt__now.is-set {
  background: #2A6FB8;
  color: var(--on-fill);
}

.desk-jdt__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ------------------------------------------------ گوشی باریک */

/*
| زیر ۴۶۰ پیکسل، پنج ستون در یک خط جا نمی‌شود.
|
| ساعت و دقیقه بالا می‌مانند و دکمه به خط دوم می‌رود و تمام‌عرض
| می‌شود — هدفی که با شست زده می‌شود.
*/
@media (max-width: 460px) {
  .desk-jdt__row--time {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .desk-jdt__now {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
  }
}

/* ===================================================================
   بخش توضیح در فرم راستی‌آزمایی
   ===================================================================

   کادر توضیح مربعِ باریک می‌افتاد و دکمه «افزودن عکس» کنارش معلق
   می‌ماند.

   -------------------------------------------------------------------
   علت

   قاعده عرض صد درصد فقط روی فرم‌هایی اعمال می‌شود که کلاس
   desk-form دارند:

       .desk-form textarea { width: 100% }

   فرم راستی‌آزمایی آن کلاس را ندارد. پس مرورگر عرض پیش‌فرض خودش را
   می‌داد — حدود بیست کاراکتر — و نتیجه‌اش همان مربع بود.

   -------------------------------------------------------------------
   چرا کلاس desk-form به فرم اضافه نشد

   چون آن قاعده روی input[type=text] و select هم اثر می‌گذارد، و
   این فرم دکمه‌های رادیویی و ستاره‌های نظرسنجی دارد که چیدمان
   خودشان را دارند. اضافه کردن کلاس، آن‌ها را به هم می‌ریخت.

   پس فقط همین بخش، صریح تنظیم می‌شود.
   =================================================================== */

.desk-verify__more {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.desk-verify__more textarea {
  width: 100%;
  min-height: 92px;
  padding: var(--s-3);
  border: 1px solid var(--line-mid);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
  font-size: var(--t-base);   /* زیر ۱۶ پیکسل، iOS صفحه را زوم می‌کند */
  line-height: 1.9;

  /*
  | تغییر اندازه فقط عمودی.
  |
  | کشیدن افقی، کادر را از کارت بیرون می‌برد و همان به‌هم‌ریختگی
  | را دوباره می‌سازد.
  */
  resize: vertical;
}

.desk-verify__more textarea:focus {
  border-color: var(--oxide);
  outline: none;
}

.desk-verify__more .desk-label { margin-bottom: 0; }

/*
| دکمه عکس، تمام‌عرض و هم‌تراز با بقیه.
|
| به‌عنوان inline-flex به اندازه متنش بود و در ستون، وسطِ خالی
| می‌ایستاد. حالا مثل کادر توضیح و دکمه ثبت، لبه‌هایش یکی است.
*/
.desk-verify__more .desk-photo__btn {
  justify-content: center;
  width: 100%;
  margin-top: 0;
}

.desk-verify__more .desk-submit { margin-top: 0; }

/*
| پیش‌نمایش عکسِ انتخاب‌شده، اگر اسکریپت آن را بسازد.
*/
.desk-verify__more .desk-photo__prev {
  align-self: flex-start;
}

/* ===================================================================
   کد ورود مکان
   =================================================================== */

.desk-pin__input {
  text-align: center;
  font-size: 30px !important;
  font-weight: 600;
  letter-spacing: 12px;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.desk-pin__hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink-faint);
  text-align: center;
}

.desk-pin__staff {
  margin-top: var(--s-5, 20px);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}

.desk-pin__staff a { color: var(--oxide, #C75B39); font-weight: 600; }

/* ==========================================================================
   کارنامه مارپیچ — سه کارت در ردیف، با فلش
   --------------------------------------------------------------------------
   ردیف فرد راست‌به‌چپ، ردیف زوج چپ‌به‌راست؛ میان ردیف‌ها فلش رو به
   پایین از همان لبه‌ای که ردیف تمام شد. روی گوشی یک ستون.
   ========================================================================== */

.trl {
  --trl-arrow: 44px;
  --trl-line: color-mix(in srgb, var(--ink-faint, #8A8F96) 55%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0;
  direction: rtl;
}

.trl__row {
  display: flex;
  align-items: stretch;
}

/* ردیف چپ‌به‌راست که کمتر از سه کارت دارد، از لبه چپ شروع شود */
.trl__row.is-ltr { justify-content: flex-end; }

.trl__card {
  flex: 0 0 calc((100% - 2 * var(--trl-arrow)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line, #E3DED5);
  border-top: 3px solid var(--trl-c, #7A8591);
  border-radius: 12px;
  background: var(--white, #FFFFFF);
  box-shadow: 0 1px 3px rgba(20, 24, 28, .05);
}

.trl__card.is-internal { border-style: dashed; border-top-style: solid; opacity: .92; }

/* رنگ هر نوع رویداد */
.trl__card--start { --trl-c: #1B6EC2; }
.trl__card--assign{ --trl-c: #7A5AC8; }
.trl__card--work  { --trl-c: #0E7C7B; }
.trl__card--wait  { --trl-c: #A8701A; }
.trl__card--done  { --trl-c: #2F7A4F; }
.trl__card--ok    { --trl-c: #2F7A4F; }
.trl__card--bad   { --trl-c: #B3341F; }
.trl__card--alarm { --trl-c: #B3341F; background: color-mix(in srgb, #B3341F 5%, var(--white, #FFFFFF)); }
.trl__card--note  { --trl-c: #7A8591; }

.trl__top { display: flex; align-items: center; gap: 6px; }

.trl__n {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--trl-c, #7A8591);
  color: var(--on-fill);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trl__l { font-size: 13px; color: var(--ink, #1F2328); line-height: 1.5; }

.trl__tag {
  margin-inline-start: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--concrete, #EFEBE4);
  color: var(--ink-soft, #5A5F66);
  font-size: 10.5px;
}

.trl__to   { font-size: 12px; color: var(--bcd-blue, #1B6EC2); font-weight: 600; }
.trl__note { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft, #5A5F66); overflow-wrap: anywhere; }

.trl__t {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  justify-content: space-between;
  border-top: 1px dashed var(--line, #E3DED5);
  font-size: 11px;
  color: var(--ink-faint, #8A8F96);
}

/* ------------------------------------------------ فلش افقی */

.trl__arrow {
  position: relative;
  flex: 0 0 var(--trl-arrow);
  align-self: center;
  height: 2px;
  background: var(--trl-line);
}

.trl__arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--trl-line);
  border-right: 2px solid var(--trl-line);
}

/* در RTL، «چپ» یعنی رو به انتهای خط */
.trl__arrow--left::after  { left: 0;  transform: translateY(-50%) rotate(-135deg); }
.trl__arrow--right::after { right: 0; transform: translateY(-50%) rotate(45deg); }

/* ------------------------------------------------ پیچ رو به پایین */

.trl__turn {
  display: flex;
  height: 34px;
}

.trl__turn.at-left  { justify-content: flex-end; }    /* لبه چپ در RTL */
.trl__turn.at-right { justify-content: flex-start; }  /* لبه راست در RTL */

.trl__turn .trl__arrow--down {
  flex: 0 0 calc((100% - 2 * var(--trl-arrow)) / 3);
  align-self: stretch;
  height: auto;
  background: none;
}

.trl__turn .trl__arrow--down::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 4px;
  width: 2px;
  margin-left: -1px;
  background: var(--trl-line);
}

.trl__turn .trl__arrow--down::after {
  top: auto;
  bottom: 3px;
  left: 50%;
  margin-left: -4px;
  transform: rotate(135deg);
}

/* ------------------------------------------------ گوشی: یک ستون */

@media (max-width: 760px) {
  .trl__row { flex-direction: column; align-items: stretch; }
  .trl__row.is-ltr { flex-direction: column-reverse; }   /* ترتیب زمانی بماند */
  .trl__card { flex: 1 1 auto; }

  .trl__row .trl__arrow {
    flex: 0 0 24px;
    width: 2px;
    height: 24px;
    align-self: center;
  }

  .trl__row .trl__arrow::after,
  .trl__row .trl__arrow--left::after,
  .trl__row .trl__arrow--right::after {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    margin-left: -4px;
    transform: rotate(135deg);
  }

  .trl__turn,
  .trl__turn.at-left,
  .trl__turn.at-right { justify-content: center; height: 24px; }
  .trl__turn .trl__arrow--down { flex: 0 0 24px; }
}

/* ===================================================================
   تماس با تکنسین — یک لمس تا شماره‌گیر
   =================================================================== */

.desk-call {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #0E7C7B;
  color: var(--on-fill);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(14, 124, 123, .28);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}

.desk-call:active { transform: scale(.98); }

.desk-call__ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.desk-call__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.6; }
.desk-call__t strong { font-size: 15px; }
.desk-call__t span   { font-size: 13px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.desk-call .num, .desk-tel .num { direction: ltr; unicode-bidi: isolate; letter-spacing: .5px; }

.desk-tel { color: #0E7C7B; font-weight: 600; text-decoration: none; }

/* برچسب «اختیاری» کنار عنوان فیلد */
.desk-opt { font-size: 11.5px; font-weight: 400; color: var(--ink-faint); margin-inline-start: 4px; }