/* ==========================================================================
   dentistry.center — lab.css  (پنل لابراتوار)
   منبع: HTML ماکاپ «نمونه تعاملی محصول». مارکاپ عیناً کپی شده؛ این فایل هم
   همان CSS ماکاپ است با سه تغییر و بس:

   ۱. قابِ دمو (نوار دمو، سایدبار، تاپ‌بار، main-shell، page-foot) حذف شد،
      چون قابِ پنل از app-shell.css پروژه می‌آید.
   ۲. همه چیز زیر wrapper `.labx` محدود شد، چون ۹ نام کلاس ماکاپ
      (.avatar .toast .modal-* .chip .table-scroll .card-x) با ui-core.css
      یکی است و بدون محدودسازی، بقیهٔ صفحات پروژه خراب می‌شدند.
      همان الگوی استثنای ثبت‌شدهٔ `.edux` — برداشتنش = حذف همین یک فایل.
   ۳. هگزهای خام به توکن نگاشت شدند. خانوادهٔ تیل ماکاپ به مینت/پترول پروژه
      لنگر خورد؛ متن‌ها روی پترول و پُرکننده‌ها روی مینت (دلیل در
      claude/lab-design-constraints.md — کنتراست).

   هیچ فاصله، شعاع، وزن فونت یا چیدمانی تغییر نکرده است.
   ========================================================================== */

.labx{
  /* خانوادهٔ برند — لنگر روی پالت پروژه (ui-core.css) */
  --lab-brand-900: var(--petrol);
  --lab-brand-700: var(--petrol-700);
  --lab-brand-600: var(--mint-600);
  --lab-brand-500: var(--mint);
  --lab-brand-200: rgba(79,182,160,.38);
  --lab-brand-100: rgba(79,182,160,.20);
  --lab-brand-050: var(--mint-050);

  /* خنثی‌ها */
  --lab-ink:          var(--ink);
  --lab-slate-700:    rgba(14,53,54,.78);
  --lab-muted:        var(--muted);
  --lab-slate-400:    rgba(14,53,54,.42);
  --lab-line-strong:  rgba(14,53,54,.16);
  --lab-line:         var(--line);
  --lab-bg:           var(--bg);
  --lab-sunken:       var(--petrol-050);
  --lab-surface:      var(--card);

  /* وضعیت‌ها */
  --lab-amber-700: #B4762A;
  --lab-amber-500: var(--amber);
  --lab-amber-200: rgba(242,166,90,.34);
  --lab-amber-050: var(--amber-050);
  --lab-red-600:   var(--refer);
  --lab-red-200:   rgba(192,69,59,.28);
  --lab-red-050:   var(--refer-050);
  --lab-violet-500:var(--violet);
  --lab-violet-050:var(--violet-050);
  --lab-blue-500:  #4E86A8;
  --lab-blue-050:  #E8F0F6;

  --lab-radius:    var(--radius-sm);
  --lab-radius-sm: 8px;

  /* ── توکن‌های خود ماکاپ، لنگرخورده به پالت پروژه ──
     ماکاپ اینها را روی :root تعریف کرده بود. :root حذف شد (چون سراسری است)
     و همان نام‌ها اینجا بازتعریف می‌شوند تا هیچ var()ای در بدنهٔ CSS نشکند. */
  --navy:      var(--petrol);
  --teal:      var(--petrol);      /* نقشِ متن و پُرکنندهٔ دارای متن سفید */
  --teal-fill: var(--mint);        /* نقشِ پُرکنندهٔ صرفاً گرافیکی */
  --teal-soft: var(--mint-050);
  /* --ink / --muted / --line / --bg اینجا بازتعریف نمی‌شوند.
     قبلاً بودند، به شکل `--ink: var(--ink)` — یعنی یک متغیر که به خودش
     ارجاع می‌داد. طبق استاندارد CSS چنین متغیری «نامعتبر در زمان محاسبه»
     است و مقدارش تهی می‌شود؛ نتیجه‌اش این بود که هر اعلانی که از آنها
     استفاده می‌کرد بی‌صدا دور ریخته می‌شد — از جمله
     `border:1px solid var(--lab-line)` روی همهٔ ورودی‌ها، که چرا کادر
     فیلدها اصلاً دیده نمی‌شد. حالا همان نام‌ها از :root پروژه به ارث
     می‌رسند، که از اول هم مقصود همین بود. */
  --gold:      var(--amber);
  --red:       var(--refer);
  --side:      240px;
}

/* پایهٔ تایپوگرافی ماکاپ — قاعدهٔ body ماکاپ حذف شد، پس اینجا بازگردانده
   می‌شود تا اندازه و ارتفاع خط دقیقاً همان ماکاپ بماند و از ui-core ارث نبرد. */
.labx{ font-size:14px; line-height:1.85; color:var(--ink); }
.labx *{ box-sizing:border-box; }
.labx button,.labx input,.labx select,.labx textarea{ font:inherit; }

.labx button, .labx input, .labx select, .labx textarea{font:inherit}
.labx button{cursor:pointer}
.labx button:disabled{opacity:.45;cursor:not-allowed}
.labx button, .labx a, .labx input, .labx select, .labx textarea, .labx summary{outline-offset:4px}
.labx button:focus-visible, .labx a:focus-visible, .labx input:focus-visible, .labx select:focus-visible, .labx textarea:focus-visible{outline:3px solid var(--lab-amber-500)}
.labx a{color:var(--teal);text-decoration:none}
.labx svg{vertical-align:middle}
.labx .icon{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}
.labx .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block;font-family:Vazirmatn,Arial,sans-serif}
.labx .muted{color:var(--muted)}
.labx .small{font-size:12px}
.labx .strong{font-weight:650}
.labx .hide{display:none!important}
.labx [hidden]{display:none!important}
.labx .avatar{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:12px;background:var(--lab-blue-050);color:var(--lab-slate-700);font-size:13px;font-weight:650}
.labx .icon-btn{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line);background:white;border-radius:8px;color:var(--lab-muted);position:relative}
.labx .page-title{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:25px}
.labx .page-title h1{font-size:23px;line-height:1.6;font-weight:650;letter-spacing:-.5px;margin:0}
.labx .page-title p{font-size:12px;color:var(--lab-muted);margin:4px 0 0}
.labx .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.labx .button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--lab-line-strong);background:#fff;color:var(--lab-slate-700);border-radius:8px;padding:9px 15px;font-size:12px;white-space:nowrap;line-height:1.65;min-height:37px}
.labx .button:hover{background:var(--lab-sunken);border-color:var(--lab-line-strong)}
.labx .button.primary{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 3px 7px rgba(14,53,54,.08)}
.labx .button.primary:hover{background:var(--lab-brand-900)}
.labx .button.danger{color:var(--lab-red-600);border-color:var(--lab-red-200);background:var(--lab-red-050)}
.labx .button.soft{background:var(--teal-soft);color:var(--lab-brand-900);border-color:var(--lab-brand-200)}
.labx .button.text{border:0;padding:5px 8px;min-height:28px;background:transparent}
.labx .button.tiny{font-size:11px;padding:5px 9px;min-height:29px}

/* عملیات یک ردیف جدول: دکمه‌ها و فرم‌های تک‌دکمه‌ای در یک خط.
   هر دکمهٔ POST باید فرم خودش باشد (پنل جاوااسکریپت ندارد) و فرم به‌طور
   پیش‌فرض بلوک است — بدون این، هر عملیات یک سطر جدا می‌گرفت و ردیف جدول
   چهار برابر بلند می‌شد. */
.labx .row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.labx .row-actions form{margin:0}
.labx .button .icon{width:15px;height:15px}
.labx .pill{display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:3px 8px;font-size:10px;font-weight:500;white-space:nowrap;line-height:1.7}
.labx .pill.teal{background:var(--lab-brand-100);color:var(--lab-brand-700)}
.labx .pill.blue{background:var(--lab-blue-050);color:var(--lab-blue-500)}
.labx .pill.amber{background:var(--lab-amber-050);color:var(--lab-amber-700)}
.labx .pill.red{background:var(--lab-red-050);color:var(--lab-red-600)}
.labx .pill.gray{background:var(--lab-sunken);color:var(--lab-muted)}
.labx .pill.purple{background:var(--lab-violet-050);color:var(--lab-violet-500)}
.labx .pill.route{font-size:10px;color:var(--lab-slate-700);background:var(--lab-sunken)}
.labx .pill::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor}
.labx .ref{font-family:Arial,sans-serif;direction:ltr;unicode-bidi:isolate;color:var(--lab-slate-700);font-size:12px;letter-spacing:.35px;white-space:nowrap}
.labx .summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:24px}
.labx .metric{background:#fff;border:1px solid var(--line);border-radius:11px;padding:18px 19px;position:relative;min-height:119px}
.labx .metric-label{font-size:11px;color:var(--lab-muted)}
.labx .metric-value{font-size:30px;font-weight:600;line-height:1.5;margin:5px 0 2px}
.labx .metric-note{font-size:10px;color:var(--lab-muted)}
.labx .metric-icon{position:absolute;top:18px;left:18px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--lab-slate-400);background:var(--lab-sunken)}
.labx .metric.accent{border-color:var(--lab-brand-200);background:linear-gradient(130deg,var(--lab-brand-050),#fff)}
.labx .metric.accent .metric-icon{background:var(--lab-brand-100);color:var(--lab-brand-700)}
.labx .metric.money .metric-value{font-size:24px}
.labx .split>*, .labx .grid-two>*, .labx .grid-three>*, .labx .summary-grid>*{min-width:0}
.labx .split{display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:21px;align-items:start}
.labx .panel{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:21px}
.labx .panel-header{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid var(--lab-sunken)}
.labx .panel-title{font-size:13px;font-weight:650;display:flex;align-items:center;gap:8px}
.labx .panel-title .icon{width:17px;height:17px;color:var(--lab-muted)}
.labx .panel-body{padding:20px}
.labx .panel-header .muted{font-size:11px}
.labx .table-scroll{overflow:auto}
.labx table{width:100%;border-collapse:collapse;font-size:11px;white-space:nowrap}
.labx th{text-align:right;background:#fff;color:var(--lab-muted);font-size:10px;font-weight:500;padding:12px 17px;border-bottom:1px solid var(--lab-sunken)}
.labx td{padding:15px 17px;border-bottom:1px solid var(--lab-sunken);color:var(--lab-slate-700);vertical-align:middle}
.labx tr:last-child td{border-bottom:0}
.labx tbody tr:hover{background:#fff}
.labx td .sub{display:block;color:var(--lab-slate-400);font-size:10px;margin-top:3px}
.labx .row-title{color:var(--lab-slate-700);font-size:12px;font-weight:500}
.labx .person-cell{display:flex;gap:9px;align-items:center}
.labx .person-cell .avatar{width:29px;height:29px;font-size:10px;border-radius:9px}
.labx .empty{padding:47px 22px;text-align:center;color:var(--lab-muted);font-size:12px}
.labx .empty .icon{width:31px;height:31px;margin-bottom:10px;color:var(--lab-slate-400)}
.labx .empty strong{display:block;color:var(--lab-muted);font-size:13px;margin-bottom:6px}
.labx .empty p{margin:0}
.labx .filter-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px;flex-wrap:wrap}
.labx .tabs{display:flex;gap:5px;align-items:center;border-bottom:1px solid var(--lab-line);padding-bottom:8px;margin-bottom:19px;overflow-x:auto}
.labx .tab{padding:7px 13px;border:0;background:transparent;font-size:12px;color:var(--lab-muted);white-space:nowrap;border-radius:6px}
.labx .tab.active{color:var(--lab-brand-900);background:var(--lab-brand-100);font-weight:600}
.labx .search{display:flex;gap:8px;align-items:center;border:1px solid var(--lab-line);background:#fff;padding:7px 12px;border-radius:7px;max-width:330px}
.labx .search input{border:0;outline:0;width:190px;min-width:0;font-size:11px;background:transparent;color:var(--lab-slate-700)}
.labx .search .icon{width:16px;height:16px;color:var(--lab-slate-400)}
.labx .select-filter{font-size:11px;background:white;border:1px solid var(--lab-line);padding:8px 10px;border-radius:7px;color:var(--lab-muted);min-height:34px}
.labx .note-strip{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--lab-amber-200);background:var(--lab-amber-050);color:var(--lab-amber-700);border-radius:8px;padding:12px 15px;font-size:11px;margin-bottom:20px}
.labx .note-strip.teal{color:var(--lab-brand-700);background:var(--lab-brand-050);border-color:var(--lab-brand-200)}
.labx .note-strip .icon{width:17px;height:17px;margin-top:2px;flex:none}
.labx .attention-item{padding:16px 18px;border-bottom:1px solid var(--lab-sunken);display:flex;gap:10px;align-items:flex-start}
.labx .attention-item:last-child{border:0}
.labx .attention-icon{width:30px;height:30px;background:var(--lab-amber-050);color:var(--lab-amber-500);display:grid;place-items:center;border-radius:8px;flex:none}
.labx .attention-icon .icon{width:16px;height:16px}
.labx .attention-text strong{font-size:11px;display:block;font-weight:550}
.labx .attention-text span{font-size:10px;color:var(--lab-muted);display:block;margin-top:3px}
.labx .attention-text button{margin-top:6px}
.labx .activity-list{padding:8px 20px}
.labx .activity-item{position:relative;padding:12px 16px 15px 0;border-right:1px solid var(--lab-line);margin-right:5px}
.labx .activity-item:last-child{border-color:transparent}
.labx .activity-item::before{content:'';position:absolute;width:6px;height:6px;right:-3.5px;top:19px;background:var(--lab-brand-500);border:2px solid #fff;box-sizing:content-box;border-radius:50%}
.labx .activity-item strong{font-size:11px;font-weight:500;display:block}
.labx .activity-item p{font-size:10px;color:var(--lab-muted);margin:2px 0}
.labx .mini-callout{padding:18px;border-radius:10px;background:var(--lab-sunken);border:1px solid var(--lab-line);margin-bottom:21px}
.labx .mini-callout .icon{color:var(--lab-brand-600)}
.labx .mini-callout strong{font-size:12px;display:block;margin:8px 0 4px}
.labx .mini-callout p{font-size:11px;color:var(--lab-muted);margin:0 0 13px}
.labx .grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.labx .grid-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.labx .order-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.labx .order-icon{width:45px;height:45px;background:var(--lab-brand-100);color:var(--teal);border-radius:12px;display:grid;place-items:center}
.labx .order-icon .icon{width:24px;height:24px}
.labx .detail-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.labx .detail-field label{font-size:10px;color:var(--lab-slate-400);display:block;margin-bottom:5px}
.labx .detail-field strong{font-size:12px;font-weight:550;display:block}
.labx .detail-field span{font-size:11px}
.labx .steps{display:flex;overflow-x:auto;padding:25px 20px 20px;gap:0}
.labx .step{flex:1;position:relative;min-width:86px;text-align:center}
.labx .step:not(:last-child)::after{content:'';position:absolute;top:14px;right:calc(50% + 16px);width:calc(100% - 32px);height:2px;background:var(--lab-line)}
.labx .step.done::after{background:var(--lab-brand-500)}
.labx .step-circle{width:28px;height:28px;border-radius:50%;background:var(--lab-sunken);color:var(--lab-slate-400);margin:0 auto 9px;display:grid;place-items:center;font-size:11px;position:relative;z-index:1}
.labx .step.done .step-circle{background:var(--lab-brand-100);color:var(--lab-brand-700)}
.labx .step.current .step-circle{background:var(--teal);color:#fff;box-shadow:0 0 0 5px var(--lab-brand-100)}
.labx .step-name{font-size:10px;color:var(--lab-muted);line-height:1.6}
.labx .step.done .step-name, .labx .step.current .step-name{color:var(--lab-brand-700)}
.labx .fulfillment{border:1px solid var(--lab-line);border-radius:9px;margin-bottom:14px}
.labx .fulfillment:last-child{margin-bottom:0}
.labx .fulfillment-header{padding:15px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--lab-sunken)}
.labx .fulfillment-header strong{font-size:12px;font-weight:550}
.labx .fulfillment-body{padding:15px}
.labx .fulfillment-info{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;color:var(--lab-muted);margin-bottom:14px}
.labx .file-item{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--lab-line);background:#fff;border-radius:8px;margin:8px 0}
.labx .file-item .icon{color:var(--lab-brand-600);width:23px;height:23px}
.labx .file-item strong{font-size:11px;display:block;font-weight:500}
.labx .file-item span{font-size:10px;color:var(--lab-slate-400);display:block}
.labx .file-item button{margin-right:auto}

/* ── انتخاب فایل پرونده هنگام ثبت سفارش ──────────────────────────────
   کارت‌ها به‌جای فهرست چک‌باکسی: پزشک عکس‌ها را با نگاه می‌شناسد و نه با
   نام فایل، که در این پروژه رشتهٔ تصادفیِ آپلود است. اسکن سه‌بعدی
   پیش‌نمایش ندارد (دیسک خصوصی) و آیکون می‌گیرد. */
.labx .asset-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.labx .asset-card{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid var(--lab-line);
  border-radius:8px;background:var(--lab-surface);cursor:pointer;transition:border-color .15s,background .15s}
.labx .asset-card:hover{border-color:var(--mint)}
/* انتخاب‌شدن باید بدون خواندن چک‌باکس هم دیده شود. */
.labx .asset-card:has(input:checked){border-color:var(--mint);background:var(--lab-sunken)}
.labx .asset-card input{accent-color:var(--mint);width:16px;height:16px;min-height:0;flex:0 0 auto;margin:0}
.labx .asset-card .asset-thumb{width:42px;height:42px;border-radius:6px;overflow:hidden;flex:0 0 auto;
  background:var(--lab-sunken);display:grid;place-items:center;color:var(--lab-brand-600)}
.labx .asset-card .asset-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.labx .asset-card .asset-thumb svg{width:20px;height:20px}
.labx .asset-card .asset-meta{min-width:0}
/* نام فایل در این پروژه گاهی لاتین است و گاهی فارسی. `plaintext` جهت را از
   خودِ رشته می‌گیرد، پس نامِ لاتین از سمت درست کوتاه می‌شود — وگرنه ابتدای
   نام، که شناسایی‌کننده‌ترین بخش است، با سه‌نقطه می‌رفت. */
.labx .asset-card .asset-meta strong{display:block;font-size:11px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.labx .asset-card .asset-meta span{display:block;font-size:10px;color:var(--lab-slate-400)}
/* «۱.۲ MB» نباید وسطش بشکند. */
.labx .asset-card .asset-meta bdi{white-space:nowrap}
/* فایلی که قبلاً رفته، دوباره فرستاده نمی‌شود — ولی پنهان هم نمی‌شود،
   وگرنه پزشک فکر می‌کند پاک شده. */
.labx .asset-card.is-shared{opacity:.6;cursor:default}
.labx .asset-card.is-shared:hover{border-color:var(--lab-line)}
/* ورودی فایل: قاب نقطه‌چین تا با کادرهای متنی اشتباه گرفته نشود. */
.labx .field input[type=file]{padding:9px 11px;border-style:dashed;font-size:11px;cursor:pointer}
@media (max-width:560px){ .labx .asset-pick{grid-template-columns:1fr} }
.labx .message-box{padding:15px;background:var(--lab-sunken);border-radius:8px;font-size:12px;line-height:1.95;color:var(--lab-muted)}
.labx .description-label{font-size:10px;color:var(--lab-slate-400);margin-bottom:7px}
.labx .invoice-line{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:10px 0;gap:12px}
.labx .invoice-line.total{border-top:1px solid var(--lab-line);margin-top:7px;font-size:14px;font-weight:650;color:var(--teal)}

/* جمع‌های پیش‌فاکتور، هم‌ترازِ ستونِ مبلغِ جدولِ بالایش.
   بدون این محدودیت، `.invoice-line` تمام عرض پنل را می‌گیرد و روی دسکتاپ
   عنوان در یک لبه و عدد در لبهٔ مقابل می‌افتد — عددی که باید زیر ستون
   «جمع ردیف» بنشیند، دو وجب دورتر از آن می‌ماند. */
.labx .quote-totals{max-width:340px;margin-inline-start:auto;margin-top:4px}

/* روی موبایل، جدولِ ریزِ پیش‌فاکتور به‌جای اسکرول افقی جمع می‌شود.
   `white-space:nowrap` سراسریِ جدول‌ها اینجا برداشته می‌شود تا نام خدمت
   بشکند و ستون مبلغ — که اصلاً دلیل نگاه کردن به این جدول است — از لبهٔ
   صفحه بیرون نیفتد. جدولِ پُرستون (با تخفیف و مالیاتِ ردیف) همچنان اسکرول
   می‌شود؛ آن حالت نادر است و جمع‌کردنش ستون‌ها را ناخوانا می‌کرد. */
@media (max-width:560px){
  .labx .quote-lines table{white-space:normal;font-size:10px}
  .labx .quote-lines th{padding:10px 7px}
  .labx .quote-lines td{padding:11px 7px}
  .labx .quote-lines .row-title{font-size:11px}
  /* فقط ستونِ نام می‌شکند — با کلاس و نه با شمارهٔ ستون، چون جای این ستون
     در جدول پیش‌فاکتور و جدول فاکتور یکی نیست. مبلغ و تعداد نباید وسطشان
     بشکنند: «۱٬۲۵۰٬/۰۰۰» در دو خط، عدد نیست، دو تکه است. */
  .labx .quote-lines th, .labx .quote-lines td{white-space:nowrap}
  .labx .quote-lines th.svc-cell, .labx .quote-lines td.svc-cell{white-space:normal}
}
@media (max-width:560px){ .labx .quote-totals{max-width:none} }
.labx .progress{height:5px;background:var(--lab-sunken);border-radius:10px;overflow:hidden}
.labx .progress span{height:100%;display:block;background:var(--lab-brand-500);border-radius:10px}
.labx .progress-label{display:flex;justify-content:space-between;font-size:10px;color:var(--lab-muted);margin-bottom:8px}
.labx .stage-tags{display:flex;gap:7px;flex-wrap:wrap;font-size:10px}
.labx .stage-tag{padding:4px 9px;border:1px solid var(--lab-line);border-radius:5px;color:var(--lab-slate-400)}
.labx .stage-tag.done{border-color:var(--lab-brand-200);background:var(--lab-brand-050);color:var(--lab-brand-600)}
.labx .stage-tag.active{border-color:var(--lab-brand-200);background:var(--lab-brand-100);color:var(--lab-brand-700)}
.labx .kanban{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:16px;align-items:start;overflow:auto}
.labx .kanban-column{background:var(--lab-sunken);border:1px solid var(--lab-line);border-radius:10px;padding:13px;min-height:330px}
.labx .kanban-header{display:flex;align-items:center;justify-content:space-between;padding:0 3px 13px;font-size:12px;font-weight:550}
.labx .kanban-header span{font-size:10px;font-weight:400;color:var(--lab-slate-400);background:var(--lab-line);border-radius:5px;padding:0 7px}
.labx .task{background:white;border:1px solid var(--lab-line);border-radius:8px;padding:15px;margin-bottom:12px;box-shadow:0 2px 5px rgba(14,53,54,.02)}
.labx .task:last-child{margin-bottom:0}
.labx .task-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.labx .task h3{font-size:12px;font-weight:600;margin:0 0 5px}
.labx .task-meta{font-size:10px;color:var(--lab-slate-400);display:flex;gap:12px;margin:7px 0 12px}
.labx .task-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--lab-sunken);margin-top:13px;padding-top:11px}
.labx .task-person{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--lab-slate-400)}
.labx .task-person .avatar{width:23px;height:23px;font-size:9px;border-radius:50%}
.labx .task-actions{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.labx .task .button{flex:1;font-size:10px}
.labx .stage-mini{display:flex;gap:4px;margin-top:10px}
.labx .stage-mini span{height:3px;border-radius:4px;background:var(--lab-line);flex:1}
.labx .stage-mini .done{background:var(--lab-brand-500)}
.labx .stage-mini .active{background:var(--lab-amber-500)}
.labx .market-hero{padding:24px 28px;border-radius:12px;background:linear-gradient(100deg,var(--lab-brand-100),var(--lab-brand-050) 70%);border:1px solid var(--lab-brand-100);margin-bottom:25px;display:flex;align-items:center;justify-content:space-between}
.labx .market-hero h2{font-size:20px;color:var(--lab-brand-900);margin:0 0 6px;font-weight:600}
.labx .market-hero p{font-size:12px;color:var(--lab-muted);margin:0;max-width:540px}
.labx .market-hero .hero-mark{width:78px;height:78px;background:var(--lab-brand-200);border-radius:22px;display:grid;place-items:center;color:var(--lab-brand-600);transform:rotate(-8deg);flex:none;margin-right:20px}
.labx .market-hero .hero-mark .icon{width:39px;height:39px}
.labx .lab-card{background:white;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.labx .lab-cover{height:84px;background:linear-gradient(120deg,var(--lab-brand-100),var(--lab-brand-200));display:flex;align-items:center;justify-content:space-between;padding:19px}
.labx .lab-cover.blue{background:linear-gradient(120deg,var(--lab-blue-050),var(--lab-blue-050))}
.labx .lab-cover.gold{background:linear-gradient(120deg,var(--lab-amber-050),var(--lab-amber-200))}
.labx .lab-symbol{font-size:20px;color:var(--lab-brand-700);background:rgba(255,255,255,.69);border-radius:12px;width:48px;height:48px;display:grid;place-items:center;font-weight:600}
.labx .lab-body{padding:19px}
.labx .lab-body h3{font-size:15px;margin:0 0 4px;font-weight:600}
.labx .lab-location{font-size:10px;color:var(--lab-slate-400);display:flex;gap:5px;align-items:center}
.labx .lab-location .icon{width:13px;height:13px}
.labx .service-tags{display:flex;gap:5px;flex-wrap:wrap;margin:16px 0}
.labx .service-tags span{font-size:10px;color:var(--lab-muted);background:var(--lab-sunken);padding:3px 8px;border-radius:5px}
.labx .lab-detail{font-size:11px;display:flex;justify-content:space-between;color:var(--lab-muted);margin:10px 0}
.labx .lab-detail strong{font-weight:500;color:var(--lab-slate-700)}
.labx .lab-body .button{width:100%;margin-top:14px}
.labx .stars{font-size:10px;color:var(--lab-amber-500)}
.labx .new-order-choice{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:20px}
.labx .choice{padding:15px;border:1px solid var(--lab-line);border-radius:9px;cursor:pointer;background:#fff}
.labx .choice.selected{border-color:var(--lab-brand-500);background:var(--lab-brand-050)}
.labx .choice strong{display:block;font-size:12px;margin-bottom:5px}
.labx .choice span{font-size:10px;color:var(--lab-muted);line-height:1.8;display:block}
.labx .choice input{accent-color:var(--teal)}
.labx .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
/* دکمهٔ بعد از شبکهٔ فرم بدون فاصله می‌چسبید به کادرِ آخرین فیلد و
   روی حلقهٔ فوکوسِ آن می‌نشست. شبکه margin پایین ندارد و دکمه هم
   margin بالا نداشت. */
.labx .form-grid + .button,
.labx .form-grid + .actions,
.labx .form-grid + button{margin-top:16px}
.labx .field label{display:block;font-size:11px;color:var(--lab-muted);margin-bottom:6px}
.labx .field input:not([type=checkbox]):not([type=radio]), .labx .field select, .labx .field textarea{width:100%;border:1px solid var(--lab-line);border-radius:7px;padding:9px 11px;background:#fff;color:var(--lab-slate-700);font-size:12px;min-height:40px}
.labx .field textarea{min-height:85px;resize:vertical}
.labx .field.full{grid-column:1/-1}
.labx .field input[type=file]{font-size:11px;background:#fff;border-style:dashed}
/* فیلدِ فقط-خواندنی باید فقط-خواندنی به نظر برسد. کدِ خدمت و کدِ مرحله
   عمداً قابل ویرایش نیستند؛ اگر مثل بقیهٔ ورودی‌ها سفید بمانند، کاربر داخلشان
   تایپ می‌کند و بعد دنبال دلیلِ کار نکردنش می‌گردد. */
.labx .field input:not([type=checkbox]):not([type=radio]):disabled,
.labx .field select:disabled,
.labx .field textarea:disabled{background:var(--lab-sunken);color:var(--lab-muted);cursor:not-allowed}
.labx .help-text{font-size:10px;color:var(--lab-slate-400);margin-top:6px}
.labx .form-error{font-size:11px;color:var(--lab-red-600);background:var(--lab-red-050);padding:10px;border-radius:6px;margin:12px 0}
.labx .form-error:empty{display:none}
.labx .modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:23px;padding-top:18px;border-top:1px solid var(--lab-line)}
.labx .field label.checkbox-row, .labx .checkbox-row{display:flex;align-items:flex-start;gap:9px;padding:11px 0;border-bottom:1px solid var(--lab-sunken);font-size:12px;color:var(--lab-muted)}
.labx .checkbox-row:last-child{border:0}
/* چک‌باکس‌های انتخاب داخل جدول (صف QC) ردیفِ checkbox-row ندارند و بدون
   این قاعده با اندازه و رنگِ پیش‌فرضِ مرورگر می‌ماندند. */
.labx td>input[type=checkbox]{accent-color:var(--mint);width:16px;height:16px;min-height:0}
.labx .checkbox-row input[type=checkbox], .labx .checkbox-row input[type=radio]{accent-color:var(--mint);width:16px;height:16px;min-height:0;flex:0 0 auto;margin-top:2px}
.labx .invoice-banner{display:flex;align-items:center;gap:13px;padding:18px;background:var(--lab-sunken);border:1px solid var(--lab-line);border-radius:9px;margin-bottom:21px}
.labx .invoice-banner .icon{color:var(--lab-brand-600);width:24px;height:24px}
.labx .invoice-banner strong{display:block;font-size:13px}
.labx .invoice-banner span{display:block;font-size:11px;color:var(--lab-muted)}
.labx .balance-box{padding:20px;background:var(--lab-brand-050);border:1px solid var(--lab-brand-200);border-radius:9px}
.labx .balance-box label{font-size:11px;color:var(--lab-muted);display:block}
.labx .balance-box strong{font-size:23px;color:var(--lab-brand-700);display:block;margin:5px 0}
.labx .subscription-banner{background:linear-gradient(100deg,var(--lab-ink),var(--lab-ink));border-radius:12px;padding:28px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:23px}
.labx .subscription-banner h2{font-size:21px;font-weight:550;margin:5px 0}
.labx .subscription-banner p{font-size:12px;color:var(--lab-slate-400);margin:0 0 17px}
.labx .subscription-banner .button{background:#fff;color:var(--lab-slate-700);border:0}
.labx .sub-price{font-size:29px;font-weight:550;white-space:nowrap}
.labx .sub-price small{display:block;font-size:11px;color:var(--lab-slate-400);font-weight:400}
.labx .feature-list{padding:0;list-style:none;margin:5px 0}
.labx .feature-list li{display:flex;align-items:center;gap:9px;font-size:12px;padding:9px 0;color:var(--lab-muted)}
.labx .feature-list .icon{color:var(--lab-brand-600);width:16px;height:16px}
.labx .delivery-card{border:1px solid var(--lab-line);border-radius:9px;padding:19px;margin-bottom:13px}
.labx .delivery-card:last-child{margin:0}
.labx .delivery-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.labx .delivery-route{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--lab-slate-700);margin:16px 0;flex-wrap:wrap}
.labx .delivery-route .icon{width:18px;height:18px;color:var(--lab-slate-400)}
.labx .delivery-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--lab-slate-400)}
.labx .qr-shell{text-align:center;padding:18px}
.labx .qr-image{background:white;border:1px solid var(--lab-line);border-radius:10px;padding:16px;display:inline-block;margin:8px 0 16px;max-width:100%}
.labx .qr-image svg{display:block;max-width:235px;width:100%;height:auto}
.labx .qr-token{font-size:10px;font-family:monospace;direction:ltr;word-break:break-all;color:var(--lab-slate-400);max-width:320px;margin:0 auto 16px;line-height:1.8}
.labx .segmented{display:inline-flex;gap:4px;border:1px solid var(--lab-line);border-radius:8px;background:#fff;padding:4px}
.labx .segmented button{border:0;background:transparent;color:var(--lab-muted);padding:6px 13px;border-radius:5px;font-size:11px}
.labx .segmented button.active{background:var(--lab-brand-100);color:var(--lab-brand-900)}
.labx .toast{position:fixed;bottom:24px;left:26px;max-width:440px;background:var(--lab-ink);color:white;padding:14px 20px;border-radius:9px;font-size:12px;box-shadow:0 7px 24px rgba(14,53,54,.13);z-index:90;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s}
.labx .toast.visible{opacity:1;transform:translateY(0)}
.labx .toast.error{background:var(--lab-red-600)}
.labx .modal-overlay{position:fixed;inset:0;background:rgba(14,53,54,.64);backdrop-filter:blur(3px);z-index:70;display:flex;align-items:center;justify-content:center;padding:24px}
.labx .modal{background:#fff;border-radius:13px;width:640px;max-width:100%;max-height:92vh;box-shadow:0 15px 70px rgba(14,53,54,.25);display:flex;flex-direction:column}
.labx .modal.wide{width:810px}
.labx .modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 25px;border-bottom:1px solid var(--lab-line);gap:12px}
.labx .modal-head h2{font-size:16px;font-weight:600;margin:0}
.labx .modal-body{padding:23px 25px;overflow:auto}
.labx .modal-body>p{font-size:12px;line-height:2;color:var(--lab-muted)}
.labx .modal-head .icon-btn{border:0}

/* ── مدال بدون جاوااسکریپت ───────────────────────────────────────────────
   پنل عمداً هیچ جاوااسکریپتی ندارد، پس باز و بسته شدن با `:target` انجام
   می‌شود: لینکِ باز کردن به `#id` می‌رود و لینکِ بستن به `#`.

   دو فایدهٔ جانبی که با جاوااسکریپت باید دستی ساخته می‌شدند: دکمهٔ بازگشتِ
   مرورگر مدال را می‌بندد، و آدرسِ باز بودنِ مدال قابل اشتراک است.

   `.is-open` برای وقتی است که سرور خطا برگردانده: بعد از رفرش، hash از
   بین می‌رود و کاربر باید دوباره مدال را باز می‌کرد تا بفهمد کجا اشتباه
   کرده. با این کلاس، مدال با همان خطا باز می‌ماند.
   ===================================================================== */
.labx .modal-overlay{display:none}
.labx .modal-overlay:target,
.labx .modal-overlay.is-open{display:flex}

/* ─────────────────────────────────────────────────────────────────────
   خنثی‌سازی دو همسایهٔ هم‌نام.

   `.modal-overlay` در ui-core.css و `.modal` در بوت‌استرپِ قالب، هر دو
   پیش از lab.css لود می‌شوند و هر دو دقیقاً همین دو نام کلاس را دارند.

     • ui-core: `opacity:0; visibility:hidden; pointer-events:none` و فقط
       با کلاس `.open` برمی‌گردد. چون این مدال با `:target` باز می‌شود نه
       با جاوااسکریپت، آن کلاس هیچ‌وقت نمی‌آمد و مدال باز می‌شد ولی
       نامرئی و بی‌کلیک می‌ماند — یعنی کاربر روی صفحهٔ قفل‌شده می‌ماند.
     • بوت‌استرپ: `top/right:0; height:100%; overflow:hidden`. با
       `position:relative` دو تای اول بی‌اثرند ولی `height:100%` قاب را
       تا کفِ صفحه می‌کشید و `overflow:hidden` محتوای بلند را می‌بُرید
       بدون اینکه اسکرول بدهد.

   هر دو اینجا و فقط زیر `.labx` برگردانده می‌شوند؛ بیرون از این ماژول
   رفتار آن دو فایل دست‌نخورده می‌ماند.
   ───────────────────────────────────────────────────────────────────── */
.labx .modal-overlay:target,
.labx .modal-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;z-index:1060}
.labx .modal{top:auto;right:auto;bottom:auto;left:auto;height:auto;overflow:visible;outline:0}

/* پوششِ پشتِ مدال خودش یک لینکِ بستن است — کلیک بیرون، می‌بندد. */
.labx .modal-scrim{position:absolute;inset:0;cursor:default}
.labx .modal{position:relative;z-index:1}

.labx .modal-close{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;border:1px solid var(--lab-line);
  color:var(--lab-muted);font-size:17px;line-height:1;text-decoration:none
}
.labx .modal-close:hover{background:var(--lab-sunken);color:var(--lab-red-600);border-color:var(--lab-red-200)}

/* جدول ردیف‌های مدال — نرخ‌ها زیر هم و هم‌عرض. */
.labx .modal .rate-table{width:100%;border-collapse:collapse}
.labx .modal .rate-table th{
  text-align:right;font-size:11px;font-weight:500;color:var(--lab-muted);
  padding:0 0 8px;border-bottom:1px solid var(--lab-line)
}
.labx .modal .rate-table td{padding:11px 0;border-bottom:1px solid var(--lab-sunken);vertical-align:middle}
.labx .modal .rate-table tr:last-child td{border-bottom:0}
.labx .modal .rate-table .svc{display:block;font-size:13px;color:var(--lab-slate-700)}
.labx .modal .rate-table .qty{display:block;font-size:11px;color:var(--lab-muted);margin-top:3px}
.labx .modal .rate-table input{
  width:100%;border:1px solid var(--lab-line);border-radius:7px;padding:8px 10px;
  background:#fff;color:var(--lab-slate-700);font-size:12px;min-height:38px;text-align:left
}
.labx .modal .rate-table td.money{width:170px;padding-inline-start:12px}
/* خطای یک ردیف، زیر همان ورودی — نه یک نوار پهن وسط فرم. */
.labx .modal .rate-table .form-error{margin:6px 0 0;padding:6px 8px;font-size:10px;text-align:right}
.labx .modal .field .form-error{margin:6px 0 0;padding:6px 8px;font-size:10px}
/* بوت‌استرپ به `.modal-footer` یک `padding:1rem` می‌دهد و پاورقی را نسبت به
   فیلدهای بالایش تورفته می‌کرد. لبه‌ها باید یکی باشند. */
.labx .modal-footer{padding-inline:0;padding-bottom:0}
.labx .modal-footer .button{min-width:110px;justify-content:center}

/* روی موبایل، دکمه‌ها زیر هم و تمام‌عرض — نه دو دکمهٔ باریکِ چسبیده به یک
   گوشه که انگشت باید دنبالشان بگردد. کنشِ اصلی بالا می‌ماند. */
@media (max-width:560px){
  .labx .modal-footer{flex-direction:column;align-items:stretch;gap:9px}
  .labx .modal-footer .button{width:100%}
}
.labx .model-view{height:230px;background:radial-gradient(ellipse at center,var(--lab-brand-100),var(--lab-sunken));border:1px solid var(--lab-line);border-radius:9px;display:grid;place-items:center;overflow:hidden}
.labx .model-view svg{width:82%;max-width:340px;height:190px}
.labx .model-caption{font-size:10px;color:var(--lab-slate-400);text-align:center;margin-top:9px}
@media(min-width:1600px){
.labx .summary-grid{gap:21px}
.labx .split{grid-template-columns:minmax(0,1fr) 330px}
.labx .metric{padding:21px 23px}
}
@media(max-width:1200px){
.labx .split{grid-template-columns:minmax(0,1fr) 260px;gap:15px}
.labx .metric{padding:15px}
.labx .metric-icon{left:12px;top:14px;width:28px;height:28px}
.labx .metric-label{font-size:10px}
.labx .grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}
.labx .detail-meta{gap:14px}
.labx .kanban{grid-template-columns:repeat(4,230px)}
}
@media(max-width:980px){
.labx .split{grid-template-columns:minmax(0,1fr)}
.labx .side-column{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.labx .summary-grid{gap:10px}
.labx .metric{min-height:116px}
.labx .metric-icon{display:none}
.labx .page-title h1{font-size:21px}
.labx .detail-meta{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
.labx .demo-controls label{font-size:10px}
.labx .sidebar.open{display:flex;transform:none}
.labx .page-title{align-items:flex-start;margin-bottom:19px;gap:10px}
.labx .page-title h1{font-size:19px}
.labx .page-title p{font-size:11px}
.labx .page-title .actions .button{font-size:11px;padding:8px 10px}
.labx .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;margin-bottom:18px}
.labx .metric.money .metric-value{font-size:22px}
.labx .metric{min-height:111px;padding:15px}
.labx .metric-icon{display:grid}
.labx .metric-label{font-size:11px}
.labx .metric-value{font-size:26px}
.labx .split, .labx .grid-two, .labx .grid-three{grid-template-columns:minmax(0,1fr)}
.labx .side-column{grid-template-columns:1fr}
.labx .panel-header{padding:15px}
.labx .panel-body{padding:16px}
.labx .detail-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.labx .detail-field strong{font-size:11px}
.labx .form-grid{grid-template-columns:1fr}
.labx .field input:not([type=checkbox]):not([type=radio]), .labx .field select, .labx .field textarea{font-size:16px}
.labx .modal-overlay{padding:12px}
.labx .modal{max-height:94vh}
.labx .modal-head{padding:17px}
.labx .modal-body{padding:18px}
.labx .new-order-choice{gap:9px}
.labx .choice{padding:11px}
.labx .choice strong{font-size:11px}
.labx .market-hero{padding:20px}
.labx .market-hero h2{font-size:18px}
.labx .market-hero .hero-mark{display:none}
.labx .subscription-banner{padding:22px;flex-wrap:wrap}
.labx .sub-price{font-size:24px}
.labx .filter-row{gap:10px}
.labx .search{width:100%;max-width:none}
.labx .search input{width:100%;font-size:14px}
.labx .kanban{grid-template-columns:repeat(4,260px)}
.labx .toast{bottom:16px;left:15px;right:15px;max-width:none}
.labx .button{min-height:40px}
.labx .task .button{min-height:36px}
.labx .button.tiny{min-height:34px}
.labx .segmented{max-width:100%;overflow:auto}
.labx .segmented button{white-space:nowrap}
.labx .detail-tabs{gap:2px}
.labx .tab{padding:6px 10px;font-size:11px}
.labx .steps{padding:24px 12px}
.labx .step{min-width:90px}
.labx .demo-controls label{display:none}
}
@media print{
.labx .demo-bar, .labx .sidebar, .labx .topbar, .labx .page-foot, .labx .toast, .labx .actions, .labx .modal-overlay, .labx .button{display:none!important}
.labx .panel{break-inside:avoid}
.labx .table-scroll{overflow:visible}
.labx .summary-grid{grid-template-columns:repeat(4,1fr)}
}
.labx .section-intro{margin-bottom:20px;color:var(--lab-muted);font-size:12px;line-height:2}
.labx .group-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:linear-gradient(100deg,var(--lab-brand-050),#fff);border-bottom:1px solid var(--line);flex-wrap:wrap}
.labx .group-heading h3{margin:0 0 5px;font-size:16px}
.labx .group-heading .total{font-size:23px;color:var(--lab-brand-900);font-weight:600}
.labx .group-heading p{margin:0;font-size:11px;color:var(--lab-muted)}
.labx .payment-group{overflow:hidden}
.labx .pending-strip{padding:10px 24px;background:var(--lab-amber-050);border-bottom:1px solid var(--lab-amber-200);color:var(--lab-amber-700);font-size:11px}
.labx .case-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--lab-line);background:white;border-radius:12px;padding:23px;margin-bottom:23px}
.labx .case-name{display:flex;align-items:center;gap:14px}
.labx .case-name .avatar{width:52px;height:52px;font-size:18px}
.labx .case-name h1{font-size:23px;margin:0 0 5px}
.labx .case-name p{margin:0;color:var(--lab-muted);font-size:12px}
.labx .file-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.labx .asset-card{border:1px solid var(--lab-line);border-radius:9px;padding:17px;background:#fff;display:flex;gap:13px;align-items:flex-start;min-width:0}
.labx .asset-card.selected{border-color:var(--lab-brand-600);background:var(--lab-brand-050)}
.labx .asset-card .icon{color:var(--lab-muted);width:27px;height:27px;flex-shrink:0}
.labx .asset-card strong{font-size:12px;display:block;overflow-wrap:anywhere}
.labx .asset-card p{font-size:10px;color:var(--lab-muted);margin:5px 0 11px}
.labx .asset-card input{accent-color:var(--lab-brand-900)}
.labx .asset-actions{display:flex;gap:7px;flex-wrap:wrap}
.labx .case-actions{display:flex;gap:8px;flex-wrap:wrap}
.labx .card-number-box{background:linear-gradient(125deg,var(--lab-ink),var(--lab-slate-700));padding:23px;color:white;border-radius:12px;margin-bottom:20px}
.labx .card-number-box .card-number{font:600 25px/1.6 monospace;letter-spacing:2px;direction:ltr;margin:20px 0 14px}
.labx .card-number-box small{color:var(--lab-line-strong)}
.labx .card-number-box strong{font-size:14px}
.labx .card-number-box .button{color:#fff;border-color:var(--lab-muted);background:rgba(255,255,255,.07)}
.labx .card-number-box .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.labx .date-field{position:relative}
.labx .date-control{display:flex;justify-content:space-between;align-items:center;background:white;border:1px solid var(--lab-line);border-radius:7px;padding:9px 11px;min-height:40px;width:100%;font-size:12px;color:var(--lab-slate-700)}
.labx .date-control .icon{color:var(--lab-muted);width:17px;height:17px}
.labx .calendar-popover{border:1px solid var(--lab-line);border-radius:9px;box-shadow:0 8px 26px rgba(14,53,54,.11);padding:13px;background:#fff;margin-top:7px;width:100%;max-width:320px;position:relative;z-index:5}
.labx .calendar-head{display:flex;align-items:center;gap:6px;justify-content:space-between;margin-bottom:10px}
.labx .calendar-head select{min-height:31px;padding:4px;font-size:12px;border:1px solid var(--line);border-radius:5px;min-width:0;max-width:100px}
.labx .calendar-week, .labx .calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.labx .calendar-week span{font-size:9px;color:var(--lab-slate-400);padding:5px 0}
.labx .calendar-day{border:0;background:transparent;padding:6px 0;min-height:32px;font-size:12px;border-radius:5px;color:var(--lab-slate-700)}
.labx .calendar-day:hover{background:var(--lab-brand-050)}
.labx .calendar-day.chosen{background:var(--lab-brand-900);color:#fff}
.labx .calendar-day.today{outline:1px solid var(--lab-brand-500)}
.labx .calendar-day:disabled{opacity:.32;cursor:default}
.labx .calendar-foot{font-size:9px;color:var(--lab-slate-400);padding-top:7px;text-align:center}
.labx .receipt-preview{display:block;max-width:100%;max-height:340px;object-fit:contain;margin:12px auto;border:1px solid var(--lab-line);border-radius:8px}
.labx .received-metrics{display:flex;gap:18px;flex-wrap:wrap;padding:12px 0;font-size:11px;color:var(--lab-muted)}
.labx .received-metrics strong{color:var(--lab-slate-700)}
.labx .pinned-master{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(110deg,var(--lab-brand-100),#fff);border:1px solid var(--lab-brand-200);border-radius:12px;padding:25px;margin-bottom:24px}
.labx .pinned-master h2{font-size:21px;margin:7px 0}
.labx .pinned-master p{color:var(--lab-muted);font-size:12px;margin:0}
.labx .pinned-master .master-emblem{width:60px;height:60px;border-radius:15px;background:var(--lab-brand-200);color:var(--lab-brand-900);display:grid;place-items:center;flex-shrink:0}
.labx .pinned-master .master-emblem .icon{width:32px;height:32px}
.labx .master-intro{display:flex;align-items:center;gap:18px}
.labx .table-scroll td.wrap{white-space:normal;min-width:150px;max-width:300px}
.labx .small-note{padding:12px 16px;border-radius:8px;background:var(--lab-sunken);color:var(--lab-muted);line-height:1.9;font-size:11px}
.labx .label-preview-grid{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;background:var(--lab-sunken);padding:22px;border-radius:9px;margin:16px 0;max-height:390px;overflow:auto}
.labx .thermal-label{background:#fff;color:var(--lab-ink);box-sizing:border-box;border:1px dashed var(--lab-slate-400);display:flex;align-items:center;justify-content:center;gap:2mm;padding:2mm;flex-shrink:0;overflow:hidden}
.labx .thermal-label .qr-svg{flex:none;display:flex;align-items:center;justify-content:center}
.labx .thermal-label svg{width:100%;height:100%;display:block}
.labx .label-caption{font-size:8pt;line-height:1.55;overflow-wrap:anywhere;min-width:0}
.labx .label-caption .code{font-family:monospace;font-size:9pt;font-weight:bold;direction:ltr}
.labx .label-caption .job-service{font-size:7pt}
.labx .label-footer{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:10px;color:var(--lab-slate-400)}
.labx .batch-tools{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:20px;flex-wrap:wrap}
.labx .task .select-task{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--lab-muted);cursor:pointer;margin-bottom:12px}
.labx .task .select-task input{accent-color:var(--lab-brand-900)}
.labx .account-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px}
.labx .account-summary .balance-box{padding:16px}
.labx .account-summary .balance-box strong{font-size:22px}
.labx .amount-danger{color:var(--lab-red-600)!important}
.labx .summary-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.labx .summary-grid.five .metric-value{font-size:24px}
.labx .partner-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.labx .partner-card{border:1px solid var(--line);border-radius:11px;background:#fff;padding:22px}
.labx .partner-card h3{margin:0 0 12px;font-size:17px}
.labx .partner-card .invoice-line{font-size:12px}
.labx .public-status-card .fulfillment-header{background:#fff}
.labx .payment-targets{max-height:210px;overflow:auto;margin-top:16px;border:1px solid var(--line);border-radius:8px}
.labx .payment-targets .table-scroll{border:0}
.labx .quiet-label{font-size:11px;color:var(--lab-slate-400)}
.labx .draft-alert{border:1px solid var(--lab-brand-200);background:var(--lab-brand-050);padding:14px 18px;border-radius:9px;margin-bottom:18px;color:var(--lab-brand-700);font-size:12px;line-height:1.9}
.labx .print-root{display:none}
.labx .cal-actions{display:flex;gap:5px}
.labx .line-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.labx .line-controls .field{flex:1;min-width:150px}
.labx .v13-status{font-size:10px;color:var(--lab-muted)}
.labx .intro-callout{padding:18px;border:1px solid var(--lab-brand-200);background:var(--lab-brand-050);border-radius:10px;margin-bottom:20px;line-height:2;font-size:12px;color:var(--lab-muted)}
.labx .sticky-footer{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.labx .modal-body{overflow-x:hidden}
.labx .print-options{margin-bottom:15px}
.labx .pill{white-space:nowrap}
.labx .meta-value{font-size:13px;font-weight:500}
.labx .small-table-total{padding:13px 22px;display:flex;justify-content:space-between;background:#fff;font-size:12px}
.labx .picker-search{max-width:350px;width:100%}
.labx .picker-search input{width:100%}
.labx .lab-catalog-footer{display:flex;justify-content:center;gap:12px;align-items:center;margin:20px 0}
.labx .partners-toolbar{margin-bottom:22px;display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.labx .balance-unallocated{color:var(--lab-muted);font-size:10px;margin-top:8px}
@media(max-width:1100px){
.labx .summary-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
.labx .summary-grid.five .metric-value{font-size:22px}
}
@media(max-width:700px){
.labx .file-grid, .labx .partner-list, .labx .account-summary{grid-template-columns:minmax(0,1fr)}
.labx .summary-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}
.labx .group-heading{padding:16px}
.labx .pinned-master{padding:18px;align-items:flex-start;flex-direction:column}
.labx .case-banner{align-items:flex-start;flex-direction:column}
.labx .case-name h1{font-size:20px}
.labx .card-number-box .card-number{font-size:20px;letter-spacing:1px}
.labx .calendar-popover{max-width:100%}
.labx .modal-body{padding:18px}
.labx .pending-strip{padding:10px 16px}
.labx .master-intro{gap:12px}
.labx .pinned-master h2{font-size:18px}
.labx .account-summary .balance-box strong{font-size:22px}
.labx .partner-card{padding:18px}
.labx .group-heading .total{font-size:21px}
.labx .label-preview-grid{padding:12px}
.labx .demo-label>span{display:none}
}
@media print{
html, .labx body{margin:0!important;padding:0!important;background:#fff!important}
.labx body>*:not(#print-root){display:none!important}
.labx #print-root{display:block!important;margin:0!important;padding:0!important}
.labx .thermal-label{border:0!important;box-shadow:none!important;margin:0!important;break-after:page;page-break-after:always;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.labx .thermal-label:last-child{break-after:auto;page-break-after:auto}
}


/* ── اصلاح نقش رنگ: پُرکننده‌های صرفاً گرافیکی مینت می‌مانند ──────────────
   در ماکاپ همهٔ اینها var(--teal) بودند. جاهایی که متنِ روی رنگ دارند به
   پترول رفتند (کنتراست سفید روی مینت ۲.۴۶:۱ است و رد می‌شود)؛ جاهایی که
   فقط شکل‌اند مینت ماندند. شرح در claude/lab-design-constraints.md */
.labx .order-icon{ color:var(--mint-600); }
.labx .choice input{ accent-color:var(--mint); }
.labx .checkbox-row input{ accent-color:var(--mint); }
.labx .asset-card input{ accent-color:var(--mint); }
.labx .task .select-task input{ accent-color:var(--mint); }
.labx .progress span{ background:var(--mint); }

/* ── رنگ متن دکمه‌ها: آخرین حرف ───────────────────────────────────────────
   چرا !important، با اینکه معمولاً نشانهٔ بوی بد است:

   یکی از شیت‌های قالبِ قدیمی رنگ متن دکمه‌ها را با !important می‌نشاند و
   نتیجه‌اش متنِ آبیِ آن قالب روی دکمهٔ پترولِ این پنل بود — یعنی متن روی
   پس‌زمینهٔ تیره، خوانا نبود. در برابر یک اعلانِ !important نه وزنِ انتخابگر
   کمک می‌کند و نه ترتیبِ بارگذاری؛ تنها !important با وزنِ بالاتر جواب
   می‌دهد.

   دامنه‌اش عمداً باریک است: فقط `color` و فقط داخل `.labx`. هیچ دکمه‌ای
   بیرون از پنل لابراتوار تحت تأثیر نیست.
   ====================================================================== */
.labx .button{ color:var(--lab-slate-700) !important; }
.labx .button.primary{ color:#fff !important; }
.labx .button.danger{ color:var(--lab-red-600) !important; }
.labx .button.soft{ color:var(--lab-brand-900) !important; }
.labx .subscription-banner .button{ color:var(--lab-slate-700) !important; }

/* چاپ: قابِ پنل پروژه هم باید مخفی شود، نه فقط قابِ ماکاپ */
@media print{
  .shx-topbar,.shx-sidebar,.shx-scrim,.shx-app>.impersonation-banner{ display:none !important; }
  .shx-content{ margin:0 !important; padding:0 !important; }
}

/* ── <details> به‌عنوان دکمه ────────────────────────────────────────────
   برد تولید برای «تعیین مسئول» از <details> استفاده می‌کند تا بدون یک خط
   جاوااسکریپت باز و بسته شود. این دو قاعده مثلثِ پیش‌فرضِ مرورگر را برمی‌دارد
   (سافاری قاعدهٔ وبکیتی خودش را می‌خواهد و list-style تنها کافی نیست). */
.labx details > summary{ list-style:none; cursor:pointer; }
.labx details > summary::-webkit-details-marker{ display:none; }
.labx details > summary::marker{ content:''; }

/* ── دکمهٔ آپلود فارسی و انتخاب همه (موارد ۳ و ۲) ───────────────────────
   متن دکمهٔ `input[type=file]` را مرورگر از زبان خودش می‌دهد و با HTML و CSS
   عوض نمی‌شود. پس ورودیِ بومی از چشم پنهان می‌شود و یک `<label for>` جایش
   می‌نشیند؛ کلیکِ لیبل رفتار بومی است و به اسکریپت وابسته نیست.

   پنهان کردن نه با `display:none` و نه `visibility:hidden`: هر دو ورودی را
   از ترتیب تب بیرون می‌برند و فرم با کیبورد پر نمی‌شود.

   خصیصه‌گرها عمداً بلندند: قاعدهٔ موجودِ `.labx .field input[type=file]`
   وزن (۰,۳,۱) دارد و یک خصیصه‌گر کوتاه‌تر زیرش می‌ماند و `padding` را
   برنمی‌گرداند — همان تلهٔ بند ۳.۱ سند قیود. */
.labx .filepick{position:relative;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.labx .filepick input[type=file].filepick-input{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* سه خصیصه‌گر، به همان دلیلِ قابِ بندانگشتی: قاعدهٔ موجودِ
   `.labx .field label` وزن (۰,۲,۱) دارد و روی این `<label>` هم می‌نشیند —
   `display:block` و `font-size:11px` را برمی‌گرداند و `gap` و
   `align-items` بی‌اثر می‌شوند، یعنی آیکون و متنِ دکمه هم‌تراز نمی‌مانند. */
.labx .field .filepick-btn,
.labx .filepick-btn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:37px;padding:0 14px;border:1px dashed var(--lab-line-strong);border-radius:8px;background:var(--lab-sunken);color:var(--lab-slate-700);font-size:12px;font-weight:600;cursor:pointer;margin:0}
.labx .filepick-btn:hover{border-color:var(--teal-fill);color:var(--teal)}
.labx .filepick input[type=file].filepick-input:focus-visible+.filepick-btn{outline:2px solid var(--teal-fill);outline-offset:2px}
.labx .filepick-out{min-width:0;flex:1;font-size:11px;color:var(--lab-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.labx .filepick.has-file .filepick-out{color:var(--teal);font-weight:600}

/* نوار «انتخاب همه» بالای فهرست فایل‌های پرونده. با `hidden` می‌آید و
   `file-pick.js` بازش می‌کند: چک‌باکسی که کار نکند بدتر از نبودنش است. */
.labx .pick-all{display:flex;align-items:center;gap:9px;padding:9px 11px;margin-bottom:10px;border:1px solid var(--lab-line);border-radius:8px;background:var(--lab-sunken);font-size:12px;color:var(--lab-slate-700)}
.labx .pick-all input[type=checkbox]{width:16px;height:16px;flex:none;accent-color:var(--teal-fill);margin:0}
/* حالتِ «هنوز آماده نیست»: تا `file-pick.js` نرسد چک‌باکس غیرفعال است.
   کم‌رنگ می‌شود تا کسی روی چیزی که کار نمی‌کند کلیک نکند، ولی دیده می‌شود
   تا اگر اسکریپت اصلاً نرسید، نبودنش پیدا باشد و نه بی‌صدا. */
.labx .pick-all:not(.is-ready){opacity:.55}
.labx .pick-all:not(.is-ready) label{cursor:default}
.labx .pick-all label{margin:0;font-size:12px;font-weight:600;cursor:pointer}
.labx .pick-all .pick-count{margin-inline-start:auto;font-size:11px;color:var(--lab-muted);font-weight:600}

/* ── بزرگ‌نمایی تصویر (مورد ۱) ───────────────────────────────────────────
   خارج از `.labx` است و این تنها استثنای عمدیِ این فایل: لایه به `<body>`
   الحاق می‌شود تا `position:fixed` داخل هیچ ظرفِ ترنسفورم‌داری گیر نکند، و
   آنجا دیگر زیر `.labx` نیست. نام‌ها با `lbx-` پیشوند دارند تا با هیچ‌کدام
   از پنج فایلِ CSS قبلی هم‌نام نشوند. */
/* پوشش: شفافیتِ `--petrol` و نه یک رنگِ تازه. */
.lbx{position:fixed;inset:0;z-index:100200;display:flex;align-items:center;justify-content:center;gap:8px;padding:18px;background:color-mix(in srgb,var(--petrol) 78%,transparent)}
.lbx[hidden]{display:none}
/* صفحهٔ پشت اسکرول نخورد وقتی لایه باز است. */
html.lbx-on{overflow:hidden}
.lbx-figure{margin:0;display:flex;flex-direction:column;gap:10px;max-width:min(1000px,100%);max-height:100%;background:var(--card);border-radius:11px;padding:11px;overflow:auto}
.lbx-figure img{max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;display:block;margin-inline:auto;border-radius:8px;background:var(--lab-sunken)}
.lbx-figure figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--lab-muted)}
.lbx-cap{min-width:0;overflow-wrap:anywhere;unicode-bidi:plaintext}
.lbx-full{flex:none;font-size:11px;color:var(--teal);font-weight:600}
/* شفافیتِ رنگِ کارت روی پوششِ تیره، و نه هگز خام — همان الگوی
   `color-mix` که لایهٔ هدرِ پنل لابراتوار دارد. */
.lbx-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--card) 16%,transparent);color:var(--card)}
.lbx-btn:hover{background:color-mix(in srgb,var(--card) 28%,transparent)}
.lbx-btn[hidden]{display:none}
.lbx-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* بستن در گوشهٔ بالا می‌نشیند و نه در ردیفِ دکمه‌ها: در موبایل که دکمه‌های
   جهت زیر تصویر می‌روند، «بستن» باید همان‌جای همیشگی‌اش بماند. */
.lbx-close{position:absolute;top:14px;inset-inline-end:14px}
/* در راست‌به‌چپ «قبلی» سمت راست است. نمادها هم همان جهت را نشان می‌دهند. */
.lbx-prev{order:3}
.lbx-figure{order:2}
.lbx-next{order:1}
@media (max-width:560px){
  .lbx{padding:10px;flex-wrap:wrap}
  .lbx-figure{order:1;flex:1 0 100%}
  .lbx-prev{order:2}
  .lbx-next{order:3}
}

/* بندانگشتیِ قابل بزرگ‌نمایی. `zoom-in` می‌گوید کلیک چه می‌کند — بدون آن،
   کاربر فرض می‌کند کلیک روی عکس هم مثل بقیهٔ ردیف، انتخابش می‌کند. */
.labx [data-lightbox]{cursor:zoom-in}
/* دو خصیصه‌گر و نه یکی: قاعدهٔ موجودِ `.labx .file-item span` وزن (۰,۲,۱)
   دارد و `display:block` و `font-size:10px` را روی هر `<span>` داخل ردیف
   می‌نشاند — از جمله روی قابِ بندانگشتی، که آن را از grid بیرون می‌برد. */
.labx .file-thumb,
.labx .file-item .file-thumb{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--lab-line);border-radius:7px;overflow:hidden;background:var(--lab-sunken);color:var(--lab-muted);font-size:0}
.labx .file-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.labx .file-thumb svg{width:18px;height:18px}
.labx span.file-thumb[data-lightbox]:hover,
.labx .file-thumb[data-lightbox]:focus-visible{border-color:var(--teal-fill)}

/* ── گفتگو با لابراتوار — صفحهٔ سفارش پزشک (پنل لابراتوار، فاز ۲.۳) ── */
.labx .lab-chat{display:flex;flex-direction:column;gap:10px}
.labx .lab-msg{border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:8px 12px;max-width:92%}
.labx .lab-msg.mine{align-self:flex-start;background:var(--primary-050,#eef6f5)}
.labx .lab-msg.theirs{align-self:flex-end}
.labx .lab-msg-h{display:flex;gap:8px;align-items:center;font-size:12.5px;flex-wrap:wrap}
.labx .lab-msg-h time{margin-inline-start:auto;opacity:.7}
.labx .lab-msg p{margin:4px 0;white-space:pre-wrap}
.labx .lab-msg-read{font-size:11.5px;opacity:.7}
.labx .lab-msg-form{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.labx .lab-msg-form textarea{width:100%}

/* ── نمودار دندان در فرم سفارش (lab-teeth.js) ────────────────────── */
.labx .teeth-field{display:flex;gap:6px;align-items:center;min-width:170px}
.labx .teeth-field input{flex:1;min-width:0}
.labx .teeth-btn{min-height:34px;padding:6px 10px}
.labx .tc-scrim{position:fixed;inset:0;background:rgba(10,30,30,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:1000}
.labx .tc-scrim[hidden]{display:none}
.labx .tc-modal{background:#fff;border-radius:14px;width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:16px 18px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.labx .tc-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.labx .tc-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--lab-muted)}
.labx .tc-sets{display:flex;gap:6px}
.labx .tc-sets .button.soft[aria-pressed="true"]{background:var(--teal);color:#fff !important;border-color:var(--teal)}
.labx .tc-hint{font-size:12px;color:var(--lab-muted);margin:8px 0}
.labx .tc-jaw{font-size:12px;color:var(--lab-muted);margin:8px 0 4px;text-align:center}
.labx .tc-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.labx .tc-quad{display:flex;gap:4px}
.labx .tc-right{border-right:2px solid var(--lab-line-strong);padding-right:10px}
.labx .tc-tooth{width:34px;height:36px;border:1px solid var(--lab-line-strong);border-radius:8px;background:#fff;font:600 13px/1 inherit;cursor:pointer;color:var(--lab-slate-700)}
.labx .tc-tooth:hover{background:var(--lab-sunken)}
.labx .tc-tooth[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.labx .tc-sum{font-size:13px;margin:12px 0 0;direction:rtl}
.labx .tc-f{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
html.tc-open{overflow:hidden}
@media (max-width:560px){.labx .tc-tooth{width:32px;height:34px;font-size:12px}.labx .tc-row{gap:6px}.labx .tc-right{border-right:0;padding-right:0}.labx .tc-quad{flex-wrap:wrap;justify-content:center}}

/* شماره دندان و رنگ در جدول‌های سفارش */
.labx .rx-meta{display:block;font-size:12px;color:var(--lab-muted)}
.labx .tc-sum bdi{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* لینک «نمایش سه‌بعدی» کنار فایل‌های STL پرونده (نمایشگر سامانه) */
.labx .asset-view{display:inline-block;margin-top:4px;font-size:12px;color:var(--teal);text-decoration:underline;text-underline-offset:3px}