/* ============================================================
   app-extras.css — لایه‌ی برند این پروژه
   مکمل morvarid.css است، نه جایگزین آن. فقط چیزهایی که مختص
   «ثبت خزر» است اینجا می‌آید و همه‌اش از توکن‌های مروارید
   استفاده می‌کند. بعد از morvarid.css بارگذاری شود.
   ============================================================ */

/* ── این‌ها به خودِ مروارید رفتند (۱۴۰۵/۰۶/۰۴) ─────────────────
   پالتِ تیل‌محور، `--head-tint`، `--on-teal`، فونتِ Kufi (`--font-display`
   + `.f-display`)، حاشیه‌ی ۱pxِ `.card`/`.stat` و کامپوننتِ دیسکلوژر
   تا ۱۴۰۵/۰۶/۰۴ اینجا بازتعریف می‌شدند چون هنوز «آزمایشیِ همین پروژه»
   بودند. حالا در `morvarid.css` و در skill هستند، پس نسخه‌ی محلی حذف
   شد — دو تعریفِ یکسان در دو فایل یعنی روزی که یکی عوض شود، دیگری
   بی‌صدا عقب می‌ماند.
   ⚠ هر تغییری در آن‌ها از این به بعد در skill انجام می‌شود و از آنجا
   کپی می‌شود، نه اینجا. */

/* ── دورِ دومِ ارتقا (۱۴۰۵/۰۶/۱۳) ────────────────────────────────
   این فایل به ۳۳۹۸ خط رسیده بود، یعنی ۹۰۶ کلاس در برابر ۲۰۶ کلاسِ
   مروارید: عملاً سیستمِ طراحی اینجا زندگی می‌کرد و استانداردِ مشترک
   عقب مانده بود. ۱۹۳ قاعده در ۱۳ خانواده که نامشان **شکل** بود نه
   **دامنه**، به مروارید رفتند:

     .plane*        بستر+کارت (قاعده‌ی سطح)
     .cgrid/.kv-grid چیدمانِ کارتی به‌جای ستونِ عمودی
     .av*، .tone-c*  آواتار و تُنِ نامِ فرستنده
     .fd-*، .chat-day حبابِ گفتگو و رویدادِ سیستمی
     .ldrawer       پنلِ کشویی از کنار
     .uptile*       کاشیِ آپلود
     .bar-*، .trend-*، .legend  نمودارِ نواری و خطی
     .more-*، .nb*   منوی بیشتر و اعلان
     .dsearch/.ds-* سرچِ زنده
     .jdate-*، .money ورودیِ تاریخ و مبلغ (JSشان هم به morvarid.js رفت)
     .dnd-*         درگ‌ودراپِ Pointer Events — قبلاً `.svb-*` نام داشت

   ⚠ تغییرِ نام: `.svb-dropline/.svb-ghost/.svb-dragging` حالا
   `.dnd-line/.dnd-ghost/.dnd-dragging`اند. نامِ قبلی دامنه‌ای به‌نظر
   می‌رسید ولی الگویش عمومی بود. کانبانِ بازاریابی هنوز درگِ قدیمیِ
   خودش را دارد (`.lead-card.is-dragging`) و می‌تواند به همین مهاجرت کند.

   همچنین `[hidden]{display:none!important}` و ظاهرِ `<a>` برای
   `.tabs`/`.seg` و وضعیتِ `.file-row .fi.st-*` بالا رفتند، پس ۱۳ وصله‌ی
   موردیِ `[hidden]` از این فایل حذف شد.

   واریانت‌های `.plane[data-stage="..."]` عمداً **نرفتند**: نامِ مرحله‌ها
   (new/negotiating/qualified) مالِ پایپ‌لاینِ بازاریابیِ همین پروژه است.
   `.ru-*`، `.dash-*`، `.sandbox-bar` و `.acc-tile` هم ماندند — تا وقتی
   پروژه‌ی دومی لازمشان نشده، بالا بردنشان استاندارد را شلوغ می‌کند. */


/* ── دامِ `[hidden]` — یک‌بار برای همیشه ──────────────────────
   `[hidden]{display:none}` قاعده‌ی **UA** است، و هر `display:`ِ نویسنده
   (حتی با ویژگیِ برابر) رویش می‌نشیند. یعنی روی هر جزئی که
   `display:flex|grid|inline-flex` دارد — `.field`، `.fgrid`، `.sw`،
   `.picks`، `.btn`، `.tabs`، `.pipeline`، `.svb-sec`، … — نوشتنِ
   `el.hidden = true` در JS **هیچ اثری ندارد و هیچ خطایی هم نمی‌دهد**.

   این پروژه تا امروز ده‌بار جداگانه به این دام خورده و هربار یک وصله‌ی
   موردی گرفته (`.dp-row[hidden]`، `.btn[hidden]`، `.uptile-ring[hidden]`،
   …). آخرین قربانی‌اش فیلدهای شرطیِ مودالِ آیتم بود: `گزینه‌ها` و
   `حداقل/حداکثر` روی `.field` بودند و بی‌صدا برای **همه‌ی** نوع‌ها دیده
   می‌شدند. این یک خط جای همه‌شان را می‌گیرد؛ وصله‌های قبلی بی‌ضررند و
   دست‌نخورده مانده‌اند.

   ⚠ اگر روزی جایی لازم شد عنصری `hidden` باشد ولی دیده شود (که یعنی
   `hidden` جای اشتباهی به‌کار رفته)، از یک کلاس استفاده کن نه از
   بازنویسیِ این قاعده. */


/* ── پایپ‌لاینِ سرنخ (بازاریابی) ──────────────────────────────
   ⚠ عمداً از `.board`/`.board-col`/`.stat`ِ عمومیِ مروارید استفاده
   نمی‌کند. نسخه‌ی اول همین بخش از آن‌ها استفاده کرده بود تا «کم‌ریسک»
   باشد، ولی نتیجه دیگر همان ماکتی نبود که تأیید شده بود — کارفرما
   مستقیم مقایسه کرد و فرق را دید. اینجا CSSِ خودِ ماکت، فقط با
   توکن‌های واقعیِ مروارید، عیناً پیاده شده. */

.lead-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.lead-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.lead-kpi .top{display:flex;align-items:center;justify-content:space-between}
.lead-kpi .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.lead-kpi .val{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;margin-top:12px}
.lead-kpi .lbl{font-size:12px;color:var(--ink2);margin-top:4px}
.lead-kpi .trend{font-size:11.5px;display:flex;align-items:center;gap:4px;margin-top:6px}
.lead-kpi .trend.up{color:var(--teal)} .lead-kpi .trend.warn{color:var(--coral-on)} .lead-kpi .trend.flat{color:var(--ink3)}

.lead-toolrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.fpills{display:flex;gap:8px;flex-wrap:wrap}
/* ── فیلترِ خاموش/روشن ───────────────────────────────────────
   ⚠ ایرادی که کارفرما گرفت: این‌ها **دکمه‌ی دوحالته** بودند ولی مثلِ
   برچسبِ ثابت دیده می‌شدند — هیچ‌چیز در ظاهرشان نمی‌گفت خاموش/روشن
   می‌شوند. حالا یک جعبه‌ی تیکِ واقعی دارند: خالی = خاموش، تیک‌خورده =
   روشن. حالتِ روشن هم پُر می‌شود تا از دور هم پیدا باشد.
   وضعیت با `:has(input:checked)` خوانده می‌شود نه با کلاسِ سروری، تا
   بازخورد **پیش از** رفت‌وبرگشتِ صفحه دیده شود. */
.fpill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);
    color:var(--ink2);border-radius:99px;padding:6px 13px 6px 11px;font-size:12.5px;font-weight:600;
    cursor:pointer;transition:all .15s;user-select:none}
.fpill:hover{border-color:var(--ink3);color:var(--ink)}
.fpill input{position:absolute;opacity:0;width:0;height:0}

/* جعبه‌ی تیک — نشانه‌ی «این چیز خاموش/روشن می‌شود» */
.fp-box{width:15px;height:15px;flex:none;border-radius:5px;border:1.5px solid var(--ink3);
    display:grid;place-items:center;color:transparent;transition:all .15s}
.fpill:hover .fp-box{border-color:var(--teal)}

.fpill:has(input:checked){background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.fpill:has(input:checked) .fp-box{background:var(--on-teal);border-color:var(--on-teal);color:var(--teal)}
/* دسترسی با کیبورد: ورودی پنهان است، پس حلقه‌ی فوکوس باید روی خودِ قرص بیفتد */
.fpill:has(input:focus-visible){outline:2px solid var(--ring,var(--teal));outline-offset:2px}

/* شمارنده‌ی کنارِ برچسب — روی بسترِ روشن و تیره هر دو خوانا */
.fp-n{font-family:var(--mono);font-size:11px;background:var(--card2);color:var(--ink2);
    border-radius:99px;padding:1px 7px}
.fpill:has(input:checked) .fp-n{background:rgba(255,255,255,.22);color:#fff}

/* ── مودالِ تبدیل به پرونده ──────────────────────────────────
   ⚠ چیدمانِ قبلی سطربه‌سطر بود: هشدار، برچسب، سلکت، دکمه‌ها… و
   «ساختِ مشتریِ جدید» ته صفحه گم می‌شد. دو ستون شد چون فرم واقعاً
   دو سؤال دارد: «برای چه کسی» و «چه خدمتی» — و هر کدام سرتیترِ
   خودش را دارد تا با یک نگاه معلوم باشد. */
.cvt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.cvt-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.cvt-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ink2);
    padding-bottom:9px;border-bottom:1px solid var(--line);margin:0}

/* برچسبِ لازم/اختیاری — به‌جای اینکه کاربر امتحان کند و خطا بخورد */
.cvt-req,.cvt-opt{font-size:9.5px;font-weight:700;border-radius:99px;padding:1px 6px;margin-inline-start:5px}
.cvt-req{background:var(--red-soft);color:var(--red-on)}
.cvt-opt{background:var(--card2);color:var(--ink3)}

/* سلکت + دکمه‌ی «جدید» کنارِ هم — دکمه دیگر زیرِ فرم گم نمی‌شود */
.cvt-pair{display:flex;gap:8px;align-items:center}
.cvt-pair .inp{flex:1;min-width:0}
.cvt-pair .btn{flex:none}

/* مشتریِ از قبل مشخص — فقط تأیید، نه یک سلکتِ تکراری */
.cvt-known{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:var(--r-sm);
    background:var(--teal-soft);color:var(--teal-on);font-size:13px}

/* ── فهرستِ خدمت داخلِ مودال ─────────────────────────────────
   اندازه‌گیری: با همین ۶ خدمت هم بدنه ۶۳۵px بود در برابرِ ۵۵۶px فضا،
   یعنی از همان اول اسکرول داشت — و چون **کلِ بدنه** اسکرول می‌شد،
   ستونِ «برای چه کسی» هم با آن می‌رفت.
   دو کار: (۱) فهرست اسکرولِ **خودش** را دارد تا ستونِ کناری سرِ جا
   بماند، (۲) کارت‌ها جمع‌وجورتر شدند تا تعدادِ بیشتری جا شود.
   ⚠ سقف با `vh` است نه درصد: والد فقط `max-height` دارد نه `height`،
   و درصد روی والدِ نامعین به `none` تبدیل می‌شود (درسِ .sp-work). */
.cvt-svc{grid-template-columns:1fr;gap:8px;
    max-height:min(46vh,330px);overflow-y:auto;overscroll-behavior:contain;padding-inline-end:4px}
.cvt-svc .svc-pick{padding:9px 11px;gap:10px}
.cvt-svc .svc-ico{width:32px;height:32px;border-radius:9px}
.cvt-svc .svc-t{font-size:13px}
/* شرح یک سطر بماند — در فهرستِ بلند، سطرِ دومِ توضیح فقط ارتفاع می‌خورد */
.cvt-svc .svc-d{font-size:10.5px;margin-top:1px;display:-webkit-box;-webkit-line-clamp:1;
    -webkit-box-orient:vertical;overflow:hidden}

@media (max-width:760px){
    .cvt-grid{grid-template-columns:1fr;gap:18px}
}

.pipeline{display:grid;grid-template-columns:repeat(3,minmax(210px,1fr)) minmax(180px,.72fr);gap:14px;align-items:start}

/* ── ریلِ روند ──────────────────────────────────────────────
   نسخه‌ی اول یک خطِ سراسریِ `.pipeline::before` بود که از پشتِ متنِ
   سرستون‌ها رد می‌شد (اندازه‌گیری: عنوانِ «تماس گرفته شد» در ۷۳۹..۸۵۱
   و خط در ۸۶..۱۰۹۱ — یعنی تداخلِ کامل). حالا هر ستون تکه‌ی خودش را
   دارد که با flex:1 فقط **فضای باقی‌مانده** را پر می‌کند، پس از نظر
   هندسی امکان افتادن روی متن ندارد — هر چقدر هم عنوان بلند شود.
   margin-inline-end منفی به‌اندازه‌ی gapِ گرید، تکه را به نقطه‌ی
   ستونِ بعدی می‌رساند تا ریل پیوسته دیده شود. */
.plane[data-stage="new"] .plane-head::after{background:linear-gradient(to left,var(--ink3),var(--gold))}
.plane[data-stage="negotiating"] .plane-head::after{background:linear-gradient(to left,var(--gold),var(--teal))}
/* آخرین مرحله انتهای ریل است — دنباله ندارد */
.plane[data-stage="qualified"] .plane-head::after{display:none}
.plane[data-stage="new"] .plane-dot{color:var(--ink3)}
.plane[data-stage="negotiating"] .plane-dot{color:var(--gold)}
.plane[data-stage="qualified"] .plane-dot{color:var(--teal)}

/* ── پایانِ مسیر ─────────────────────────────────────────────
   «تبدیل به پرونده» و «ازدست‌رفته» ستونِ کانبان نیستند: هیچ‌کس در
   آن‌ها «کار» نمی‌کند و کارتی در آن‌ها نمی‌ماند. پس منطقه‌ی رهاکردن
   شدند — و چون هر دو ورودیِ اجباری دارند (دلیل / خدمت و مبلغ)،
   رهاکردن مستقیم ثبت نمی‌کند بلکه مودالِ مربوط را باز می‌کند. */
/* ستونِ چهارم چسبان می‌ماند تا با فهرستِ بلند، مقصدِ رهاکردن همیشه دمِ
   دست باشد. `align-self:start` لازم است وگرنه آیتمِ گرید کشیده می‌شود و
   sticky چیزی برای لغزیدن ندارد. */
.endcol{position:sticky;top:14px;align-self:start}
/* ستونِ پایانی مرحله نیست، پس ریلِ روند ندارد */
.endcol .plane-head::after{display:none}
.endcol .plane-title{color:var(--ink3)}
.endzones{display:flex;flex-direction:column;gap:10px}
.endzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    border:2px dashed var(--line);border-radius:var(--r);padding:18px 12px;min-height:96px;
    color:var(--ink3);transition:all .15s;text-align:center}
.endzone b{font-family:var(--font-display);font-size:13px;color:var(--ink2)}
.endzone span{font-size:11px;line-height:1.6}
/* فقط وقتی چیزی در دست است پررنگ می‌شود — وگرنه دو جعبه‌ی خالیِ
   دائمی روی صفحه‌اند که توجه می‌دزدند */
body.is-dragging-lead .endzone{border-color:var(--ink3);color:var(--ink2)}
.endzone.is-over{border-style:solid;transform:scale(1.01)}
.endzone.tone-ok.is-over{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-on)}
.endzone.tone-ok.is-over b{color:var(--teal-on)}
.endzone.tone-bad.is-over{border-color:var(--red);background:var(--red-soft);color:var(--red-on)}
.endzone.tone-bad.is-over b{color:var(--red-on)}

@media (max-width:1100px){
    /* داخلِ بردِ اسکرول‌شونده‌ی افقی، sticky عمودی گیج‌کننده می‌شود */
    .endcol{position:static}
}
/* ── حالت‌های درگ‌ودراپ (سبکِ ماکت) ─────────────────────────
   کارتِ درحالِ‌کشیدن کم‌رنگ می‌شود و ستونِ مقصد روشن و تو‌پُر —
   یعنی هم‌زمان معلوم است «چه چیزی» کشیده می‌شود و «کجا» می‌افتد. */
.lead-card{cursor:grab}
.lead-card:active{cursor:grabbing}
.lead-card.is-dragging{opacity:.4}

/* ── واکنش‌گرا ───────────────────────────────────────────────
   قاعده‌ی «هیچ اسکرولِ افقی روی صفحه»: ستون‌ها زیرِ ۲۳۰px باریک
   نمی‌شوند، پس به‌جای فشرده‌شدن، خودِ بردْ اسکرولِ افقی می‌گیرد و
   بدنه‌ی صفحه سالم می‌ماند. */
@media (max-width:1100px){
    .lead-kpis{grid-template-columns:repeat(2,1fr)}
    .pipeline{overflow-x:auto;padding-bottom:6px}
}
@media (max-width:620px){
    .lead-toolrow{align-items:stretch}
    .fpills{width:100%}
    .fpill{flex:1;justify-content:center}
}

.lead-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px;
    display:flex;flex-direction:column;gap:9px;transition:border-color .15s,box-shadow .15s}
.lead-card:hover{border-color:var(--teal);box-shadow:var(--sh)}
.lead-card .top{display:flex;align-items:flex-start;gap:9px}
.lead-avatar{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
    background:var(--teal-soft);color:var(--teal-on)}
.lead-card .name{font-family:var(--font-display);font-weight:700;font-size:13px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
/* چیپِ پیگیری — تنها چیپی که اجازه‌ی دو خط دارد.
   متن عمداً جمله است («۳ روز دیگر تماس گرفته شود») نه فقط تاریخ، چون
   تاریخِ شمسیِ تنها خوانده نمی‌شود و خواننده باید در ذهن با امروز
   مقایسه‌اش کند. پس `white-space:nowrap`ِ `.chip` اینجا برداشته می‌شود
   و شعاع از ۹۹px به ۱۰px می‌آید — کپسولِ دوخطی بد می‌افتد. */
.fu-chip{align-self:flex-start;white-space:normal;border-radius:10px;
    padding:6px 10px;font-size:11px;font-weight:600;line-height:1.7;
    align-items:flex-start;gap:6px}
.fu-chip svg{margin-top:3px;flex-shrink:0}
.fu-chip .mono{font-weight:700;flex-shrink:0}
/* جداکننده مثلِ سطرِ متای همان کارت — بدونِ آن «1405/06/04 3» یک لحظه
   مثلِ یک عدد خوانده می‌شود. */
.fu-chip .mono + span::before{content:'· ';opacity:.5}

.lead-card .meta{font-size:11.5px;color:var(--ink2);margin-top:2px}
/* خطِ «آخرین رویداد» روی کارت — جانشینِ فیلدِ مبلغ (۱۴۰۵/۰۶/۰۴).
   مبلغ اینجا اشتباه بود: عددی که هنوز سرِ آن چانه‌زنی می‌شود، نه قابلِ
   اتکاست نه به تصمیمِ «حالا سراغِ کدام سرنخ بروم؟» کمک می‌کند. چیزی که
   کمک می‌کند این است که دفعه‌ی قبل چه شد.
   ⚠ یک خط و فقط یک خط: ستونِ برد ~۲۵۰px است و دوخطی‌شدنِ این متن
   ارتفاعِ کارت‌ها را نامنظم می‌کند. متنِ کامل در title می‌ماند. */
.lead-last{display:flex;align-items:center;gap:6px;min-width:0;
    font-size:11px;color:var(--ink2);line-height:1.6}
.lead-last svg{flex-shrink:0;color:var(--ink3)}
.lead-last span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-last.is-none{color:var(--ink3)}
.lead-card .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
    border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.lead-assignee{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2);min-width:0}
.avatar-tiny{width:18px;height:18px;border-radius:50%;background:var(--card2);color:var(--ink2);
    display:grid;place-items:center;font-size:9.5px;font-weight:700;flex-shrink:0}

/* ── فهرستِ پرونده‌ها ───────────────────────────────────────
   زبانِ طراحیِ پایپ‌لاینِ سرنخ (بالا) برای KPI/پیل/کارت اینجا هم
   تکرار شده، عمداً کپی نه اشتراکِ کلاس با `.lead-*` (نگاه کنید به
   کامنتِ بالا) — هر صفحه CSSِ خودش را دارد.
   ⚠ کانبانِ چهاروضعیتی (باز/در حال بررسی/در انتظارِ مشتری/متوقف) در
   ۱۴۰۵/۰۶/۰۸ حذف شد: کارفرما گفت آنجا کاربردی نداشت — بیشترِ پرونده‌ها
   بلافاصله به «در حال بررسی» می‌روند (`WorkflowService@refreshCaseStatus`)
   و سه ستونِ دیگر تقریباً همیشه خالی بودند. حالا یک گریدِ کارتیِ ساده
   با تبِ وضعیت است، نه کانبان. */
.case-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.case-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.case-kpi .top{display:flex;align-items:center;justify-content:space-between}
.case-kpi .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.case-kpi .val{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;margin-top:12px}
.case-kpi .lbl{font-size:12px;color:var(--ink2);margin-top:4px}
.case-kpi .trend{font-size:11.5px;display:flex;align-items:center;gap:4px;margin-top:6px}
.case-kpi .trend.warn{color:var(--coral-on)} .case-kpi .trend.flat{color:var(--ink3)}

.case-toolrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}

.grid-head{display:flex;align-items:baseline;gap:4px;margin-bottom:12px;color:var(--ink2);font-size:12.5px}
.grid-head b{font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--ink)}

/* سینیِ تیره‌تر زیرِ کارت‌ها — عیناً `.plane-body`ی کانبانِ بازاریابی
   (کارفرما روی ماکت همین را خواست، ۱۴۰۵/۰۶/۰۹)؛ کارت‌ها را از
   پس‌زمینه‌ی صفحه جدا می‌کند بدونِ اینکه ظرفِ سفیدِ جدولی بشود. */
.grid-tray{background:var(--card2);border:1px dashed var(--line);border-radius:var(--r);padding:12px}

/* گریدِ کارت — به‌جای کانبانِ ستونی؛ ۴ ستونِ ثابت (مثلِ `.case-kpis`)
   نه auto-fill — کارفرما (۱۴۰۵/۰۶/۰۹) عددِ دقیقِ ۴ را خواست، نه هرچقدر
   که در عرض جا شود.
   ⚠ اسمش عمداً `.cases-grid` (جمع) است نه `.case-grid` — آن یکی از قبل
   برای چیدمانِ دوستونیِ صفحه‌ی خودِ پرونده (show.blade.php) گرفته شده
   بود؛ هم‌نامی باعث می‌شد این‌جا هم گریدِ ۲ستونیِ آن اعمال شود. */
.cases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.case-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px;
    display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
    transition:border-color .15s,box-shadow .15s}
.case-card:hover{border-color:var(--teal);box-shadow:var(--sh)}
.case-card .top{display:flex;align-items:flex-start;gap:9px}
.case-avatar{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
    background:var(--teal-soft);color:var(--teal-on)}
.case-card .name{font-family:var(--font-display);font-weight:700;font-size:13px}
.case-card .meta{font-size:11.5px;color:var(--ink2);margin-top:2px}
.case-stage-line{display:flex;align-items:center;gap:6px;min-width:0;
    font-size:11px;color:var(--ink2);line-height:1.6}
.case-stage-line svg{flex-shrink:0;color:var(--ink3)}
.case-stage-line span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-card .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
    border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.case-assignee{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2);min-width:0}

/* چیپِ وضعیت روی خودِ کارت — چون دیگر رنگِ ستون نیست که وضعیت را بگوید */
.case-card .top .chip{margin-inline-start:auto;flex-shrink:0}

@media (max-width:1100px){
    .case-kpis{grid-template-columns:repeat(2,1fr)}
    .cases-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
    .case-toolrow{align-items:stretch}
    /* یک ستون، نه ۲ — کارت محتوای چندخطی دارد (نام+متا+خطِ مرحله+پابرگ)؛
       زیرِ ~۲۰۰px اسمِ کاربر وسطِ کلمه می‌شکند */
    .cases-grid{grid-template-columns:1fr}
}

/* ── فهرستِ مشتریان ─────────────────────────────────────────
   همان فرمول (KPI + پیل + تب + `.grid-tray`ِ کارتی، ۴ ستون)، کپیِ
   دیگری از الگوی پرونده‌ها — `.grid-tray`/`.grid-head` را چون کاملاً
   عمومی‌اند مستقیم از بالا به اشتراک می‌گذارد. */
.cust-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.cust-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.cust-kpi .top{display:flex;align-items:center;justify-content:space-between}
.cust-kpi .top>span{font-size:12.5px;color:var(--ink2);font-weight:600}
.cust-kpi .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.cust-kpi .val{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;margin-top:12px}
.cust-kpi .lbl{font-size:12px;color:var(--ink2);margin-top:4px}
.cust-kpi .trend{font-size:11.5px;display:flex;align-items:center;gap:4px;margin-top:6px}
.cust-kpi .trend.warn{color:var(--coral-on)} .cust-kpi .trend.flat{color:var(--ink3)}

.cust-toolrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}

.cust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.cust-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px;
    display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
    transition:border-color .15s,box-shadow .15s}
.cust-card:hover{border-color:var(--teal);box-shadow:var(--sh)}
.cust-card .top{display:flex;align-items:flex-start;gap:9px}
.cust-avatar{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
    background:var(--teal-soft);color:var(--teal-on)}
.cust-card .name{font-family:var(--font-display);font-weight:700;font-size:13px;display:flex;align-items:center;flex-wrap:wrap}
.cust-card .meta{font-size:11.5px;color:var(--ink2);margin-top:2px}
.cust-card .top .chip{margin-inline-start:auto;flex-shrink:0}
.cust-card .foot{display:flex;align-items:center;gap:14px;
    border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.cust-stat{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2)}
.cust-stat svg{color:var(--ink3)}

@media (max-width:1100px){
    .cust-kpis{grid-template-columns:repeat(2,1fr)}
    .cust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
    .cust-toolrow{align-items:stretch}
    .cust-grid{grid-template-columns:1fr}
}

/* ── فهرستِ خدمات (تعریفِ خدمات و مراحل) ───────────────────────
   همان فرمول، کپیِ دیگری از الگو — `.grid-tray`/`.grid-head` چون کاملاً
   عمومی‌اند مستقیم از بالا به اشتراک می‌روند.
   ⚠ اسمش عمداً `.stype-*` است نه `.svc-*` — آن یکی از قبل برای
   کارتِ‌انتخابِ‌خدمتِ رادیویی در مودال‌ها گرفته شده (`.svc-grid`/`.svc-pick`
   در تبدیلِ سرنخ و تأییدِ مالی)؛ هم‌نامی همان دامِ `.case-grid` را تکرار می‌کرد. */
.stype-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stype-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stype-kpi .top{display:flex;align-items:center;justify-content:space-between}
.stype-kpi .top>span{font-size:12.5px;color:var(--ink2);font-weight:600}
.stype-kpi .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.stype-kpi .val{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;margin-top:12px}
.stype-kpi .trend{font-size:11.5px;display:flex;align-items:center;gap:4px;margin-top:6px}
.stype-kpi .trend.warn{color:var(--coral-on)} .stype-kpi .trend.flat{color:var(--ink3)}

.stype-toolrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}

.stype-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

.stype-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px;
    display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
    transition:border-color .15s,box-shadow .15s}
.stype-card:hover{border-color:var(--teal);box-shadow:var(--sh)}
.stype-card .top{display:flex;align-items:flex-start;gap:9px}
.stype-avatar{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
    background:var(--teal-soft);color:var(--teal-on)}
.stype-card .name{font-family:var(--font-display);font-weight:700;font-size:13px}
.stype-card .meta{font-size:11.5px;color:var(--ink2);margin-top:2px;line-height:1.6}
.stype-card .top .chip{margin-inline-start:auto;flex-shrink:0}
.stype-card .foot{display:flex;align-items:center;gap:14px;
    border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.stype-stat{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2)}
.stype-stat svg{color:var(--ink3)}

@media (max-width:1100px){
    .stype-kpis{grid-template-columns:repeat(2,1fr)}
    .stype-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
    .stype-toolrow{align-items:stretch}
    .stype-grid{grid-template-columns:1fr}
}

/* ── پنلِ کشویی سرنخ ────────────────────────────────────────
   کلیک روی کارت به‌جای رفتن به صفحه‌ی تازه، این پنل را باز می‌کند.
   لبه: `inset-inline-end` که در RTL می‌شود سمتِ **چپ** — عمداً همان
   سمتی که سایدبارِ ناوبری نیست، وگرنه پنل روی منو می‌افتد.
   z-index زیرِ ۱۰۰ می‌ماند تا مودال‌ها (که ۱۰۰ دارند) همچنان بالاتر
   بنشینند؛ و بالای سایدبار (۶۰) تا رویش بیفتد. */
.lp-ovl{position:fixed;inset:0;background:rgba(9,17,21,.45);backdrop-filter:blur(2px);
    z-index:80;opacity:0;transition:opacity .18s}
.lp-ovl.on{opacity:1}

/* نسخه‌ی عریض‌تر — برای محتوایِ فرم‌محور (شبکه‌ی مدارک، فیلدهای چندگانه)
   که در ۴۱۰px بیش‌ازحد فشرده می‌شود (پنلِ کارِ صفحه‌ی پرونده). */

.lp-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 13px;
    border-bottom:1px solid var(--line);background:var(--head-tint);flex-shrink:0}
.lp-avatar{width:40px;height:40px;border-radius:12px;background:var(--teal-soft);color:var(--teal-on);
    display:grid;place-items:center;flex-shrink:0}
.lp-ttl{min-width:0;flex:1}
.lp-ttl b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:800}
.lp-ttl small{display:block;font-size:11px;color:var(--ink2);margin-top:3px;line-height:1.7}

.lp-body{flex:1;overflow-y:auto;padding:16px 18px}
.lp-h{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--ink2);
    margin-bottom:10px;letter-spacing:.02em}


/* ── پنلِ سریع (نسخه‌ی ساده‌شده) ─────────────────────────────
   نسخه‌ی اول همه‌ی صفحه‌ی سرنخ را در ۴۶۰px تکرار می‌کرد: اطلاعات،
   کارشناس، تایم‌لاینِ ۱۲تایی. یعنی یک صفحه‌ی دومِ کوچک‌شده، نه ابزارِ
   اقدامِ سریع. حالا فقط چیزی مانده که برای «زدنِ نتیجه» لازم است. */
.lp-phone{display:flex;align-items:center;gap:9px;padding:9px 11px;margin-bottom:14px;
    border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card2);color:var(--ink2)}
.lp-phone a{font-size:14px;font-weight:700;color:var(--ink);flex:1;letter-spacing:.4px}
.lp-phone a:hover{color:var(--teal)}

.lp-lbl{display:block;font-size:11px;font-weight:700;color:var(--ink3);margin-bottom:6px}

/* چیپِ انتخابی — رادیوی واقعی نگه داشته می‌شود (نه دکمه‌ی جعلی) تا با
   کیبورد و صفحه‌خوان کار کند؛ فقط دیده نمی‌شود.
   ⚠ مشترکِ پنلِ کشویی و کامپوزرِ صفحه‌ی سرنخ (.lcomp) — قبلِ حذف/تغییر
   هر دو را چک کنید. */
.lp-chips{display:flex;gap:6px;flex-wrap:wrap}
.lp-chip{border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:99px;
    padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;transition:all .15s}
.lp-chip:hover{border-color:var(--ink3);color:var(--ink)}
.lp-chip input{position:absolute;opacity:0;width:0;height:0}
.lp-chip:has(input:checked){background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.lp-chip:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
/* ── نشانه‌ی «این را جا انداختی» ────────────────────────────
   واژگانِ مشترکِ همه‌ی گاردهای سمتِ کلاینت، تا خطا **قبل** از ارسال
   دیده شود نه به‌شکلِ توستِ بعد از ۴۲۲.
   (`.dcard.is-missing` از قبل بود و همین رنگ را داشت — همان قرارداد.) */
.inp.is-missing{border-color:var(--red)}
.lp-chips.is-missing{outline:2px solid var(--red);outline-offset:5px;border-radius:10px}

.lp-quick .lp-lbl:not(:first-child){margin-top:14px}
.lp-quick textarea{width:100%;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-sm);
    background:var(--card);color:var(--ink);padding:8px 11px;font-size:13px;line-height:1.7;
    resize:vertical;min-height:38px}
.lp-quick textarea:focus{outline:0;border-color:var(--teal)}
.lp-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* رویدادهای اخیر — پنجره‌ی ۵تایی با ریلِ فشرده.
   ⚠ چگالی عمدی است: نقطه‌ی ۲۱px، عنوان و زمان روی یک خط، متن یک‌خطی
   با ellipsis. اگر سطرها بلند شوند، ۵ رویداد فرمِ «ثبتِ نتیجه» را از
   قابِ ۸۰۰px بیرون می‌راند و پنل دوباره اسکرولی می‌شود.
   زمان نسبی است (jalali_ago) چون سؤالِ واقعیِ کاربر «چند وقت پیش؟»
   است نه «چه تاریخی؟»؛ تاریخِ دقیق در title می‌ماند. */
.lp-last{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.lp-evh{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lp-evh .lp-lbl{margin-bottom:8px}
.lp-evh a{font-size:11px;font-weight:700;color:var(--teal)}
.lp-evh a:hover{text-decoration:underline}
.lp-ev{list-style:none;margin:0;padding:0}
.lp-ev li{display:flex;gap:9px;padding-bottom:9px;position:relative}
.lp-ev li:last-child{padding-bottom:0}
/* ریلِ عمودی از مرکزِ نقطه تا سطرِ بعد — روی آخری کشیده نمی‌شود */
.lp-ev li:not(:last-child)::before{content:'';position:absolute;inset-inline-start:10px;
    top:23px;bottom:0;width:1px;background:var(--line)}
.lp-ev-d{width:21px;height:21px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;
    background:var(--card2);color:var(--ink3);border:1px solid var(--line)}
.lp-ev-d.is-note{background:var(--teal-soft);color:var(--teal-on);border-color:transparent}
.lp-ev-c{min-width:0;flex:1}
.lp-ev-t{display:flex;align-items:baseline;gap:6px;min-width:0}
.lp-ev-t b{font-size:12px;font-weight:700;white-space:nowrap}
.lp-ev-t span{font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-ev-t time{margin-inline-start:auto;font-size:10px;font-weight:600;color:var(--ink3);
    white-space:nowrap;flex-shrink:0}
.lp-ev-c p{margin:1px 0 0;font-size:11.5px;color:var(--ink2);line-height:1.7;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* اقدام‌های کم‌بسامد: لینک‌های کوچکِ کنارِ هم، نه دکمه‌ی تمام‌عرض */
.lp-foot-min{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lp-foot-min > *{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:4px 2px;
    font-size:11.5px;font-weight:600;color:var(--ink3);cursor:pointer;transition:color .15s}
.lp-foot-min > *:hover{color:var(--ink)}
.lp-foot-min [data-lp-lost]:hover{color:var(--red)}

.lp-foot{border-top:1px solid var(--line);padding:13px 18px;display:flex;flex-direction:column;gap:8px;flex-shrink:0}

/* کارتِ بازشده روی برد نشانه بگیرد تا معلوم باشد پنل مالِ کدام است */
.lead-card.is-open{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-soft)}

/* ── کامپوزرِ جمع‌وجور (صفحه‌ی سرنخ) ─────────────────────────
   نسخه‌ی قبلی یک کارتِ کامل با پنج کنترلِ همیشه‌باز بود که کلِ ستون را
   می‌گرفت و «روندِ پیگیری» را به پایینِ صفحه می‌راند — در حالی که در
   بیشترِ مراجعه‌ها اصلاً استفاده نمی‌شود. حالا پیش‌فرض یک سطر است و
   فقط با فوکوس باز می‌شود (افشای تدریجی). */
.lcomp{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card2);padding:9px}
.lcomp:focus-within{border-color:var(--teal)}
.lcomp-row{display:flex;gap:8px;align-items:flex-end}
.lcomp textarea{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r-sm);
    background:var(--card);color:var(--ink);padding:8px 11px;font-size:13px;line-height:1.7;
    resize:none;height:38px;overflow:hidden;transition:height .12s}
.lcomp textarea:focus{outline:0;border-color:var(--teal)}
.lcomp-row .btn{flex:none}

/* بخشِ بازشونده — نمایش با کلاس، نه با [hidden]، چون گرید است */
.lcomp-more{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
    gap:12px;flex-direction:column}
.lcomp.is-open .lcomp-more{display:flex}
.lcomp-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lcomp-lbl{font-size:11px;color:var(--ink3);font-weight:700;min-width:74px;flex:none}
.lcomp-more .lp-chips{margin-bottom:0}

@media (max-width:620px){
    .lcomp-row{flex-wrap:wrap}
    .lcomp-row .btn{flex:1}
    .lcomp textarea{flex-basis:100%}
}

@media (max-width:620px){
    /* ⚠ `.ldrawer.wide` دو کلاس است (اختصاصیت بیشتر از `.ldrawer` تنها)،
       پس بدونِ ذکرِ صریحش اینجا، در موبایل هم عرضِ ۴۸۰px‌اش را نگه می‌داشت. */
    .ldrawer, .ldrawer.wide{width:100%;inset-inline:0}
}

/* دیسکلوژر (`.disc-head`/`.disc-body`) از ۱۴۰۵/۰۶/۰۴ در خودِ مروارید
   است — اینجا حذف شد تا دو تعریفِ موازی نماند. نشانه‌گذاری و توضیحش
   در `morvarid.css` کنارِ `.c-head`. */


/* ── نشان برند ──────────────────────────────────────────────
   لوگوی ثبت خزر آبی است و رنگ برند رابط فیروزه‌ای؛ پس لوگو را
   روی بستر سفید می‌نشانیم تا در هر دو تم هویت خودش را نگه دارد
   و با گرادیان فیروزه‌ای تداخل رنگی پیدا نکند. */
.s-mark.brand {
    background: #fff;
    padding: 5px;
    box-shadow: 0 4px 14px -4px rgba(23, 38, 46, .3);
}
[data-theme="dark"] .s-mark.brand {
    background: #fff;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, .7);
}
.s-mark.brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── عمل‌های انتهای ردیف کارتی ──────────────────────────────
   مروارید .row .act را دارد ولی برای یک عمل. اینجا چند فرمِ
   POST جدا کنار هم می‌نشینند (ویرایش/فعال‌سازی/حذف)، پس ظرفِ
   خودشان را لازم دارند. */

/* ── نوار فیلتر ─────────────────────────────────────────────
   ردیف افقی از فیلدهای فرم بالای یک فهرست. مروارید .fgrid را
   برای فرم‌های چندستونی دارد؛ این برای نوار فیلتر است که
   عرض فیلدهایش نامساوی است و در موبایل عمودی می‌شود. */

@media (max-width: 600px) {
    .filter-bar .field,
    .filter-bar .btn { flex: 1 1 100%; }
    .filter-bar .btn { justify-content: center; }
}


/* ══════════════════════════════════════════════════════════
   برد پرونده — اجزای اختصاصی دامنه‌ی این پروژه
   ──────────────────────────────────────────────────────────
   مروارید برای «ناوبرِ مراحل»، «فضای کاریِ مرحله»، «تایم‌لاینِ
   فرایند» و «ویرایشگرِ فیلدهای داده» معادلی ندارد؛ این‌ها UIِ
   دامنه‌اند نه تکرارِ سیستمِ طراحی.

   چیدمانِ کارکرده حفظ شده و فقط پالت به توکن‌های مروارید ترجمه
   شده است — هیچ رنگِ ثابتی نمانده جز پرده‌ی مشکیِ روی تصویر.
   ══════════════════════════════════════════════════════════ */
/* ══ STEP / TIMELINE (روند پرونده) ══ */
.timeline { position:relative; padding-right:24px; }
/* ══ صفحات/اجزای مدرک (رو و پشت کارت ملی، اسناد چندصفحه‌ای) ══ */
.page-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pv-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.pv-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pv-add .inp { flex: 1; min-width: 140px; margin: 0; padding: 8px 11px; font-size: 13px; }
/* ══ مدارک: گروه‌بندی بر اساس شخص + گرید کارت ══ */
.dgroup { margin-bottom: 14px; }
.dgroup-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; margin-bottom: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.dgroup-avatar { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--ring); }
.dgroup-name { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
a.dgroup-name:hover { color: var(--teal); }
.dgroup-id { font-size: 11px; color: var(--ink3); }
.dgroup-count { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--card2); border: 1px solid var(--line); color: var(--ink2); }
.dgroup-count.is-ok { background: var(--teal-soft); border-color: transparent; color: var(--teal); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.dcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.dcard:hover { border-color: var(--teal); }
.dcard.is-ok { border-color: var(--teal); }
.dcard.is-bad { border-color: var(--red); }
.dcard.is-empty { border-style: dashed; background: transparent; }
.dcard.is-missing { border-color: var(--red); }
.dcard.is-reuse { border-color: var(--teal-soft); }
.dcard-thumb { position: relative; width: 100%; height: 108px; border: none; padding: 0; cursor: pointer; background: var(--card2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard-fileico { font-size: 30px; opacity: .85; }
.dcard-state { position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 7px; font-size: 11px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px solid var(--line); }
.dcard-pages { position: absolute; bottom: 6px; inset-inline-start: 6px; font-size: 10px; padding: 2px 7px; border-radius: 20px; background: rgba(0, 0, 0, .55); color: #fff; }
.dcard-body { padding: 9px 10px; flex: 1; }
.dcard-title { font-size: 13px; font-weight: 700; line-height: 1.6; }
.dcard-note { font-size: 11px; color: var(--teal); margin-top: 2px; }
.dcard-meta { font-size: 11px; color: var(--ink3); margin-top: 3px; line-height: 1.6; }
.dcard-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 7px 8px; border-top: 1px solid var(--line); }
.dcard-actions form { display: inline-flex; }
.dcard-actions .i-btn { width: 30px; height: 30px; font-size: 13px; }
.dcard-actions .i-btn.is-ok:hover { background: var(--teal-soft); }
.dcard-actions .i-btn.is-bad:hover { background: var(--red-soft); }
/* ══════════════ نمای پرونده: فضای کاریِ مرحله (فاز سوم: فقط داخلِ مودالِ #stageModal) ══════════════
   .wsp دیگر هیچ‌جا داخلِ جریانِ صفحه رندر نمی‌شود — همیشه بدنه‌ی `.box` مودال است.
   پس باید مثلِ .m-head/.m-body/.m-foot خودش را با ارتفاعِ محدودِ مودال (max-height:88vh)
   هماهنگ کند: سربرگ/پانوشت ثابت، فقط بدنه اسکرول شود. `overflow:hidden`ِ قبلی برای
   حالتِ کارتِ توی صفحه بود؛ همان‌جا کل فرم را می‌بُرید و اسکرولی نبود (باگِ گزارش‌شده). */
.wsp { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; }
.wsp-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; flex-wrap: wrap; flex: none; }
/* بدنه‌ی فضای کاری — تنها بخشی که اسکرول می‌شود */
.wsp-body { padding: 0 16px 16px; overflow-y: auto; flex: 1; min-height: 0; }
.wsp-body > :last-child { margin-bottom: 0; }
.wsp-order { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; background: linear-gradient(140deg,var(--teal),var(--teal-deep)); color: #fff; }
.wsp-title { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wsp-sub { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.wsp-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--card2); flex: none; }
.side-sum { cursor: pointer; font-weight: 800; font-size: 13.5px; padding: 16px 22px; display: flex; align-items: center; gap: 8px; list-style: none; }
.side-sum::-webkit-details-marker { display: none; }
.side-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.locked-note { color: var(--ink3); font-size: 13px; }
/* ══ آیتم‌های مرحله (چک‌لیست / ورودی / فهرست / اشخاص) ══ */
.stage-chip { font-size: 11px; color: var(--ink2); background: var(--card2); border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; }
.ti.is-filled.is-check .task-check { background: var(--teal); border-color: var(--teal); }
.ti { border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 8px; overflow: hidden; }
.ti.is-filled { border-color: var(--teal-soft); }
.ti-head { display: flex; align-items: center; gap: 10px; padding: 9px 11px; }
.ti.is-filled.is-check .ti-title { text-decoration: line-through; color: var(--ink3); }
.ti-ico { width: 24px; text-align: center; font-size: 15px; flex-shrink: 0; }
.ti-title { flex: 1; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ti-desc { padding: 0 11px 8px; font-size: 12px; color: var(--ink3); }
.ti-body { padding: 0 11px 11px; }
.ti-hint { font-size: 11px; color: var(--ink3); }
.ti-list { display: flex; flex-direction: column; gap: 6px; }
.ti-list-row { display: flex; align-items: center; gap: 8px; }
.ti-list-row .inp { flex: 1; margin: 0; padding: 7px 10px; font-size: 13px; }
.ti-num { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; background: var(--card2); color: var(--ink2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.ti-person { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card2); }
.ti-avatar { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-on); }
/* آیکن/تامبنیل مدرک (در مودال انتخاب مدرک) */
.doc-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.doc-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
/* ══ وضعیت مدارکِ هر شخص در آیتمِ «اشخاص» ══ */
.ti-person.has-missing { border-color: var(--red); background: var(--red-soft); }
.ti-person.is-ready { border-color: var(--teal); }
.pdocs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.pdoc { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font: inherit; font-size: 10px; font-weight: 600; border: 1px solid var(--line); background: var(--card2); color: var(--ink2); cursor: pointer; transition: all .15s; }
.pdoc:hover { border-color: var(--teal); }
.pdoc.is-ok { border-color: var(--teal-soft); color: var(--teal); background: var(--teal-soft); }
.pdoc.is-wait { border-color: var(--blue); color: var(--blue); }
.pdoc.is-bad,
.pdoc.is-miss { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.pdoc.is-reuse { border-color: var(--teal); color: var(--teal); }
/* چک‌باکس «تأیید همزمان» در مودال مدرک */
.dp-approve { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--teal); border-radius: var(--r-sm); background: var(--teal-soft); cursor: pointer; }
.dp-approve strong { display: block; font-size: 13px; color: var(--teal); }
.dp-approve small { display: block; font-size: 11px; color: var(--ink3); margin-top: 2px; }
/* ============================================================
   نمای پرونده — مسیرِ عمودیِ مراحل (مدل غیرخطی)
   ============================================================ */

/* ── خلاصه‌ی پرونده (هرو + نوار پیشرفت) ── */
.case-summary { margin-bottom:14px; }
/* ── چیدمان: ریلِ یکپارچه + ستونِ کارِ دوحالته ──
   فاز سوم دوستونیِ 1fr/300px بود (ستونِ کناری فقط ویترینِ اطلاعات).
   حالا ستونِ دوم خودش فضای کار است (نمای کلی یا پنلِ یک کار)، پس تقریباً
   هم‌عرضِ ریل شده؛ ریل کمی پهن‌تر می‌ماند چون تگ‌هایش افقی می‌چینند. */
.case-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:16px; align-items:start; }

/* ============================================================
   ریلِ یکپارچه‌ی پرونده (فاز سوم)
   «مراحل» و «فرایند انجام» یک جریانِ واحدند: قدمِ الزامی ردیفِ
   برجسته‌ای است که فرمش در مودال باز می‌شود، اقدام‌ها ردیفِ ساده،
   و زیرکارها با شاخه‌ی تورفته زیرِ والدشان.
   ============================================================ */
.railcard { padding:0; overflow:hidden; }
.rail-head { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
.rail-title { font-size:14px; font-weight:800; display:flex; align-items:center; gap:8px; }
.rail-title svg { color:var(--teal); }
.rail-stats { margin-inline-start:auto; display:flex; gap:6px; }

/* کتابخانه‌ی کارهای رایج */
.rail-lib { display:flex; gap:6px; align-items:center; padding:9px 16px; border-bottom:1px solid var(--line);
    overflow-x:auto; scrollbar-width:none; }
.rail-lib::-webkit-scrollbar { display:none; }
.rail-lib form { display:contents; }
.rl-lib-t { font-size:10.5px; color:var(--ink3); font-weight:800; white-space:nowrap; flex:none; }
.rl-libc { display:inline-flex; align-items:center; gap:5px; border:1.4px dashed var(--line); background:transparent;
    border-radius:18px; padding:4px 11px; font-size:11.5px; font-weight:600; color:var(--ink2); cursor:pointer;
    white-space:nowrap; font-family:inherit; transition:.15s; flex:none; }
.rl-libc:hover { border-color:var(--teal); border-style:solid; color:var(--teal); transform:translateY(-1px); }
.rl-libc.is-more { border-style:solid; opacity:.75; list-style:none; }
.rl-libc.is-more::-webkit-details-marker { display:none; }
/* «همه‌ی اقدام‌ها» — بازشونده، تا اقدام‌های خودکار نوار را شلوغ نکنند */
.rl-libmore { position:relative; flex:none; }
.rl-libpop { position:absolute; inset-inline-start:0; top:calc(100% + 6px); z-index:20;
    display:flex; flex-wrap:wrap; gap:6px; width:max-content; max-width:min(520px, 78vw);
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
    box-shadow:var(--sh-lg); padding:10px; }
.rl-libpop form { display:contents; }

.rail-body { padding:16px 16px 10px; }

/* ── خودِ ریل: خطِ عمودی + گره‌ها ──
   `--nd-w`/`--nd-inset` تنها منبعِ حقیقتِ اندازه/جای گره‌اند. لوزیِ جداکننده‌ی
   فاز (`.rl-ph::before`) هم مرکزش را از همین دو متغیر حساب می‌کند — قبلاً
   عددِ خودش (-31px) جدا و دستی حدس زده شده بود، هیچ‌وقت با تغییرِ اندازه‌ی
   گره (مثلاً در مدیاکوئریِ موبایل) هماهنگ نمی‌شد و کم‌کم از ستونِ ریل جا
   می‌ماند. */
.rail { position:relative; padding-inline-start:46px; --nd-w:33px; --nd-inset:37px; }
/* خطِ فقراتِ ریل — دقیقاً روی مرکزِ گره‌ها */
.rail::before { content:""; position:absolute; inset-inline-start:24px; top:8px; bottom:8px; width:2.5px;
    border-radius:3px; background:var(--ink3); opacity:.3; }

.rl-ph { display:flex; align-items:center; gap:9px; margin:15px 0 7px; font-size:10.5px; font-weight:800;
    color:var(--ink3); position:relative; }
.rl-ph:first-child { margin-top:0; }
.rl-ph span { white-space:nowrap; }
.rl-ph::after { content:""; flex:1; height:1px; background:var(--line); }
/* مرکزِ لوزی = مرکزِ گره‌ها: همان فاصله‌ای که گره از لبه‌ی ردیف می‌گیرد
   (nd-inset منهای نصفِ nd-w)، به‌علاوه‌ی نصفِ عرضِ خودِ لوزی. */
.rl-ph::before { content:""; position:absolute;
    inset-inline-start:calc(-1 * var(--nd-inset) + var(--nd-w) / 2 - 6px);
    width:12px; height:12px;
    transform:rotate(45deg); background:var(--bg); border:2.5px solid var(--ink3); border-radius:3px; opacity:.5; }

/* یک ردیف روی ریل */
.rl { position:relative; display:flex; align-items:center; gap:9px; padding:10px; border-radius:var(--r-sm);
    border:1px solid transparent; transition:background .13s; }
.rl:hover { background:var(--card2); }
.rl + .rl { margin-top:1px; }

.rl-tick { display:flex; }
/* گره همیشه وسطِ عمودیِ ردیف — با top/translate، نه موقعیتِ استاتیک
   (فرمِ دورِ دکمه ارتفاعِ خودش را دارد و گره را از وسط می‌انداخت).
   از پراپرتی `translate` استفاده شده تا با transformِ hover تداخل نکند. */
.rl-nd { position:absolute; inset-inline-start:calc(-1 * var(--nd-inset)); top:50%; translate:0 -50%;
    width:var(--nd-w); height:var(--nd-w); border-radius:50%;
    background:var(--card); border:2px solid var(--line); display:grid; place-items:center; color:var(--ink3);
    padding:0; cursor:pointer; font-family:inherit; transition:transform .16s, background .16s, border-color .16s; z-index:1; }
.rl-nd.static { cursor:default; }
button.rl-nd:hover { transform:scale(1.12); }
.rl-nd.on { background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
.rl.is-rejected > .rl-nd { background:var(--red-soft); border-color:var(--red); color:var(--red); }
.rl.is-blocked > .rl-nd { border-style:dashed; }
.rl.is-open > .rl-nd, .rl.is-now > .rl-nd { border-color:var(--teal); color:var(--teal); }
.rl.is-overdue > .rl-nd { border-color:var(--gold); color:var(--gold); }
/* «منتظرِ نتیجه» — کار تمام است و فقط حکمِ بیرونی مانده (بخش ۶.۳.۹).
   عمداً نه سبزِ «انجام شد» و نه خاکستریِ «معطل»: کاری از کاربر برنمی‌آید،
   ولی پرونده هم متوقف نیست. */
.rl.is-awaiting > .rl-nd { border-color:var(--gold); color:var(--gold);
    background:var(--gold-soft); border-style:dashed; }

.rl-open { flex:1; min-width:0; text-align:start; background:none; border:0; padding:0; cursor:pointer;
    font-family:inherit; color:inherit; }
.rl-title { display:block; font-size:13.2px; font-weight:650; line-height:1.6; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.rl.is-done .rl-title { color:var(--ink2); font-weight:550; }
.rl.is-blocked .rl-title, .rl.is-skip .rl-title { color:var(--ink3); font-weight:500; }

.rl-tags { display:flex; align-items:center; gap:5px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.rl-tag { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; padding:2px 8px;
    border-radius:20px; white-space:nowrap; background:var(--card2); color:var(--ink2); }
.rl-tag.rj { background:var(--red-soft); color:var(--red); }
.rl-tag.late { background:var(--coral-soft); color:var(--coral-on); }
.rl-tag.ok { background:var(--teal-soft); color:var(--teal-on); }
.rl-tag.mut { background:var(--card2); color:var(--ink3); }
.rl-tag.eye { background:var(--blue-soft); color:var(--blue); }
.rl-tag.req { background:var(--teal-soft); color:var(--teal-on); box-shadow:inset 0 0 0 1px var(--teal-on); }
.rl-cmt { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; color:var(--ink3); }
.rl-av { width:22px; height:22px; border-radius:50%; background:var(--teal-soft); color:var(--teal-on);
    font-size:10px; font-weight:800; display:grid; place-items:center; flex:none; }

/* دکمه‌ی زیرکار — فقط با hover دیده می‌شود تا ریل شلوغ نشود */
.rl-add { opacity:0; border:none; background:var(--card2); color:var(--ink3); width:23px; height:23px;
    border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:.15s; flex:none; padding:0; }
.rl:hover .rl-add, .rl-add:focus-visible { opacity:1; }
.rl-add:hover { background:var(--teal); color:var(--on-teal); transform:rotate(90deg); }

/* تأییدِ سریعِ یک قدمِ الزامیِ آماده — فقط با هاورِ ردیف (بخش ۶.۲۵)، تا
   تعدادِ کلیک برای موردِ پرتکرارِ «همه‌چیز پر شده، فقط تأیید بزن» کم شود. */
.rl-approve { opacity:0; flex:none; border:0; background:var(--teal); color:var(--on-teal); font-size:10.5px;
    font-weight:700; padding:5px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px;
    white-space:nowrap; cursor:pointer; transition:opacity .15s, filter .13s, transform .13s; }
.rl:hover .rl-approve, .rl-approve:focus-visible { opacity:1; }
.rl-approve:hover { filter:brightness(1.05); transform:translateY(-1px); }

/* قدمِ الزامی — دیگر جعبه‌ی جدا نیست (همه‌ی ردیف‌های ریل بعدِ یکی‌سازیِ
   مرحله/اقدام از همین نوع‌اند، پس حاشیه+زمینه‌ی تکراری فقط ریل را جعبه‌جعبه
   نشان می‌داد). فقط عنوانِ کمی پررنگ‌تر ماند تا «قدمِ رسمی» از یک اقدامِ
   آزاد متمایز باشد؛ رنگ‌بندیِ وضعیت (done/now/rejected/…) روی گره کافی است.
   ⚠ اینجا overflow:hidden نگذارید: گره روی ریل با inset منفی بیرونِ ردیف
   می‌نشیند و کلیپ می‌شود (باگی که ضمنِ تست پیدا شد). */
.rl.is-req .rl-title { font-weight:750; font-size:13.6px; }
.rl-prog { position:absolute; bottom:2px; inset-inline-start:8px; height:3px; width:var(--p);
    max-width:calc(100% - 16px); background:var(--teal); border-radius:3px; transition:width .4s; }

/* یادداشت — نقطه‌ی طلاییِ ریز، بدون کارت */
.rl-note { position:relative; display:flex; gap:8px; padding:1px 10px 6px; align-items:baseline; }
.rl-note::before { content:""; position:absolute; inset-inline-start:-25px; top:7px; width:9px; height:9px;
    border-radius:50%; background:var(--gold); opacity:.75; }
.rl-note p { font-size:11.5px; color:var(--ink2); margin:0; flex:1; min-width:0; overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis; }
.rl-note time { font-size:9.5px; color:var(--ink3); flex:none; }

/* ── شاخه‌ی علّی (زیرکار) ──
   با `depends_on_id` فرق دارد: وابستگیِ ترتیبی تورفته نمی‌شود، فقط قفل می‌خورد. */
.rl-sub { position:relative; margin-inline-start:34px; margin-block:2px 6px; }
.rl-sub::before { content:""; position:absolute; inset-inline-start:-13px; top:22px; bottom:16px; width:2px;
    border-radius:2px; background:var(--ink3); opacity:.4; }
.rl-sub::after { content:""; position:absolute; inset-inline-start:-54px; top:-14px; width:42px; height:36px;
    border-inline-start:2px solid var(--ink3); border-bottom:2px solid var(--ink3);
    border-end-start-radius:14px; opacity:.4; }
.rl-sub.from-rj::before { background:var(--red); opacity:.5; }
.rl-sub.from-rj::after { border-color:var(--red); opacity:.5; }
.rl-sub-lbl { font-size:10px; font-weight:800; color:var(--ink3); padding:0 10px; margin-bottom:1px; }
.rl-sub.from-rj .rl-sub-lbl { color:var(--red); }
.rl-sub .rl { padding-inline-start:0; }
.rl-sub .rl-nd { position:static; translate:none; width:25px; height:25px; margin-inline-start:-25px; }
.rl-sub .rl-title { font-size:12.6px; }

/* ── زیرمرحله‌های یک مرحله روی ریلِ پرونده ──
   کلاسِ جداگانه از `.rl-sub` (بالا) چون آن یکی برای زیرکارهای یک اقدام است؛
   قبلاً هر دو یک کلاس بودند و یک قاعده‌ی دومِ ناقص جای اولی را نصفه‌ونیمه
   عوض می‌کرد، خط‌های شاخه و گره‌ها را ناهم‌راستا می‌کرد. زبانِ بصری عمداً
   با `.rl-sub` یکی است (کارفرما: زیرمرحله = رابطه‌ی علّی، نه توالی) —
   **همه‌ی زیرمرحله‌های یک مادر باید در یک `.rl-substage` بیایند**، نه یکی
   برای هر زیرمرحله، وگرنه هر ردیف شاخه‌ی خودش را جدا می‌کشد. */
.rl-substage { position:relative; margin-inline-start:34px; margin-block:2px 6px; }
.rl-substage::before { content:""; position:absolute; inset-inline-start:-13px; top:22px; bottom:16px; width:2px;
    border-radius:2px; background:var(--ink3); opacity:.4; }
.rl-substage::after { content:""; position:absolute; inset-inline-start:-54px; top:-14px; width:42px; height:36px;
    border-inline-start:2px solid var(--ink3); border-bottom:2px solid var(--ink3);
    border-end-start-radius:14px; opacity:.4; }
.rl-substage .rl { padding-inline-start:0; }
.rl-substage .rl-nd { position:static; translate:none; width:25px; height:25px; margin-inline-start:-25px; }
.rl-substage .rl-title { font-size:12.6px; }

/* کامپوزر و فوتر */
.rail-cmp { display:flex; gap:8px; align-items:center; padding:11px 16px 14px; border-top:1px solid var(--line);
    flex-wrap:wrap; }
.rail-cmp .inp { flex:1; min-width:180px; border-radius:22px; }
.rail-foot { padding:0 16px 14px; }

@media (max-width:900px) {
    /* لوزیِ فاز خودش را دوباره حساب می‌کند چون از همین دو متغیر می‌آید —
       لازم نیست جداگانه تنظیم شود. */
    .rail { padding-inline-start:38px; --nd-w:28px; --nd-inset:32px; }
    .rl-sub { margin-inline-start:26px; }
    .rl-sub::after { inset-inline-start:-46px; width:34px; }
    .rl-substage { margin-inline-start:26px; }
    .rl-substage::after { inset-inline-start:-46px; width:34px; }
    .rl-tags { max-width:100%; }
}

/* هکِ z-index:120 برای #docPicker حذف شد (۱۴۰۵/۰۵/۲۱): از وقتی docPicker
   و actionModal هر دو <dialog>اند، top-layerِ بومیِ مرورگر خودش مودالِ
   تازه‌بازشده را بالای بقیه می‌گذارد — عددِ دستی دیگر لازم نیست. */

/* ── مودالِ بلند: فوتر بیرون می‌زد و دکمه‌ی تأیید دیده نمی‌شد ──
   رفعِ محلی حذف شد و upstream رفت (۱۴۰۵/۰۵/۲۰): مروارید حالا خودش
   `.modal .box > form { display:contents }` دارد، که از زنجیره‌ی فلکسِ دستی
   هم تمیزتر است — فرم کلاً از رندر بیرون می‌ماند، پس فرقی نمی‌کند کجای
   `.box` بنشیند.
   ⚠ برنگردانش: `display:flex`ِ قبلی چون این فایل بعد از مروارید لود می‌شود
   روی `display:contents` را می‌گیرد و استاندارد را می‌شکند. */

/* ── شناسنامه‌ی پرونده ── */
.cover { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
    border-radius:var(--r); padding:9px 14px; margin-bottom:14px; }
.cover-ic { color:var(--teal); flex:none; display:grid; place-items:center; }
.cover-ids { display:flex; gap:20px; overflow-x:auto; flex:1; align-items:center; scrollbar-width:none; }
.cover-ids::-webkit-scrollbar { display:none; }
.cv { white-space:nowrap; line-height:1.5; }
.cv small { display:block; font-size:9.5px; color:var(--ink3); }
.cv b { font-size:12.5px; font-weight:700; }
.cv.is-empty b { color:var(--ink3); font-weight:450; }

/* ── بازشونده‌های مدیریتیِ نوارِ شناسنامه (متقاضی / مدیریت / تاریخچه) ──
   محتوای ستونِ کناریِ قدیم که به بالای صفحه منتقل شد. --}} */
.cover-acts { display:flex; gap:6px; flex:none; align-items:center; padding-inline-start:10px;
    border-inline-start:1px solid var(--line); }
.cvx { position:relative; }
.cvx-btn { display:inline-flex; align-items:center; gap:5px; list-style:none; cursor:pointer;
    border:1px solid var(--line); background:var(--card2); color:var(--ink2); border-radius:20px;
    padding:5px 11px; font-size:11.5px; font-weight:700; white-space:nowrap; transition:.14s; }
.cvx-btn::-webkit-details-marker { display:none; }
.cvx-btn:hover { border-color:var(--teal); color:var(--teal); }
.cvx[open] > .cvx-btn { border-color:var(--teal); color:var(--teal); background:var(--teal-soft); }
.cvx-n { font-style:normal; font-size:10px; background:var(--card); border-radius:10px; padding:0 5px; color:var(--ink3); }
.cvx-pop { position:absolute; inset-inline-end:0; top:calc(100% + 7px); z-index:30; width:min(330px, 84vw);
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-lg);
    padding:13px 15px; }
.cvx-tall { max-height:min(60vh, 420px); overflow-y:auto; }
.cvx-h { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px;
    margin-bottom:9px; }
.cvx-h b { display:flex; align-items:center; gap:5px; }
.cvx-pop .field { margin:0; }
.cvx-pop .ti-foot { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:780px) {
    .cover { flex-wrap:wrap; }
    .cover-acts { border-inline-start:0; padding-inline-start:0; width:100%; }
}

/* ============================================================
   ستونِ کارِ کناری (فاز پنجم)
   دو حالت روی یک قاب: «نمای کلی» (پیش‌فرض) و «پنلِ یک کار».
   ستون sticky است و فقط بدنه‌اش اسکرول می‌شود، تا سربرگِ کار و
   جعبه‌ی نوشتن مثل صفحه‌ی چت همیشه سرِ جایشان بمانند.
   ============================================================ */
.side-pane { position:sticky; top:14px; padding:0; display:flex; flex-direction:column;
    max-height:calc(100vh - 28px); overflow:hidden; }

.sp-head { display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--line);
    flex:none; }
.sp-ico { width:32px; height:32px; border-radius:10px; background:var(--teal-soft); color:var(--teal-on);
    display:grid; place-items:center; flex:none; }
.sp-ico.ad-rejected { background:var(--red-soft); color:var(--red); }
.sp-ico.ad-done { background:var(--teal); color:var(--on-teal); }
.sp-h-txt { flex:1; min-width:0; }
.sp-h-txt b { display:block; font-size:13.5px; font-weight:750; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
.sp-h-txt small { display:block; font-size:10.5px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
/* فلشِ بازگشت به نمای کلی — در RTL رو به راست است */
.sp-back { width:30px; height:30px; border-radius:9px; border:0; background:var(--card2); color:var(--ink2);
    display:grid; place-items:center; cursor:pointer; flex:none; transition:.13s; }
.sp-back:hover { background:var(--teal-soft); color:var(--teal-on); }
.sp-back svg { transform:scaleX(-1); }

.sp-body { flex:1; min-height:0; overflow-y:auto; padding:14px 15px; }
.sp-body > .alert:first-child { margin-top:0; }

.sp-foot { flex:none; border-top:1px solid var(--line); padding:10px 15px 12px; background:var(--card); }
.sp-send { display:flex; gap:7px; }
.sp-send .inp { flex:1; margin:0; border-radius:22px; }
.sp-foot-acts { display:flex; gap:8px; align-items:center; margin-top:9px; flex-wrap:wrap; }

/* فیلدِ فهرستِ چندمقداری داخلِ پنل — ردیفِ تک‌خطی نمی‌شود */
.adf-list { margin-bottom:10px; }
.adf-list > .adf-lbl { flex:none; margin-bottom:6px; }
.adf-list .ti-foot { margin-top:7px; }

/* گفتگو ته پنل: بدونِ خطِ جداکننده‌ی اضافه، چون بخشِ اصلی است */
.sp-chat { margin-top:14px; }

/* ══ پنلِ اقدام: دو ناحیه‌ی مستقل به‌جای یک اسکرولِ بلند ══════════════
   `.sp-work` = هرچه باید پر یا تصمیم‌گیری شود (سقفِ ۴۸٪ ارتفاع، اسکرولِ خودش).
   `.sp-chat` = گفتگو، بقیه‌ی ارتفاع، اسکرولِ مستقل، پیام‌ها چسبیده به پایین.
   ⚠ همه‌ی قواعد زیرِ `.sp-chatpane` قفل شده‌اند؛ `_sideoverview` و
   `_sidestage` همان `sp-body`ِ تک‌اسکرولی را نگه می‌دارند. */
.sp-chatpane { padding:0; display:flex; flex-direction:column; overflow:hidden; }
/* ⚠ فقط `max-height` کافی نبود: کارت به اندازه‌ی محتوا کوتاه می‌شد، پس
   گفتگو ارتفاعِ ثابت نمی‌گرفت و `flex:1`ش چیزی برای پرکردن نداشت. با
   `height`ِ معین، پنلِ اقدام همیشه قدِ صفحه است — همان چیزی که «مثل صفحه‌ی
   چت» یعنی. بقیه‌ی پنل‌ها (نمای کلی، قدمِ الزامی) دست‌نخورده کوتاه می‌مانند. */
.side-pane:has(.sp-chatpane) { height:calc(100vh - 28px); }

/* ⚠ سقف با `vh` است نه درصد: `.side-pane` فقط `max-height` دارد و `height`
   ندارد، پس ارتفاعش «نامعین» است و یک `max-height` درصدی روی فرزندش به
   `none` تبدیل می‌شد — ناحیه‌ی کار بی‌سقف رشد می‌کرد و گفتگو تا کفِ
   `min-height` له می‌شد. `vh` همیشه معین است. */
.sp-work { flex:none; min-height:0; max-height:38vh; overflow-y:auto; padding:14px 15px 12px;
    border-bottom:1px solid var(--line); }
.sp-work > .alert:first-child { margin-top:0; }
/* بخش‌های داخلِ ناحیه‌ی کار — خطِ بالای `.ad-fields` اینجا اضافه است چون
   خودِ ناحیه قاب دارد؛ فقط فاصله می‌خواهند. */
.spw-sec { padding-top:12px; margin-top:12px; border-top:1px solid var(--line); }
.spw-sec:first-child { padding-top:0; margin-top:0; border-top:0; }

.sp-chatpane .sp-chat { flex:1 1 auto; min-height:150px; margin-top:0; overflow-y:auto;
    display:flex; flex-direction:column; padding:0 15px 12px; border-top:0; }
/* سربرگِ گفتگو موقعِ اسکرول سرِ جایش می‌ماند تا معلوم باشد کجاییم */
.sp-chat-h { position:sticky; top:0; z-index:2; flex:none; margin:0 -15px 8px; padding:11px 15px 8px;
    background:var(--card); font-size:12px; font-weight:700; color:var(--ink2);
    display:flex; align-items:center; gap:5px; }
/* یادآوریِ ترتیبِ معکوس — بدونِ این، «چرا جواب بالای سؤال است؟» می‌پرسند */
.sp-chat-ord { margin-inline-start:auto; font-size:10px; font-weight:700; color:var(--ink3);
    background:var(--card2); border-radius:99px; padding:2px 8px; }
/* ⚠ بدونِ `margin-top:auto`: جدیدترین پیام بالاست و فهرست از بالا رشد می‌کند */
.sp-chat-list { margin-top:0; }

/* جداکننده‌ی روز */

/* ══ آواتار — دایره‌ی عکس یا حروفِ رنگی (بخش ۶.۲۴) ══
   بازاستفاده در فهرستِ کاربران، فرمِ ویرایش و حبابِ گفتگو. ۴ رنگ از همان
   سایه‌های معناییِ مروارید (نه رنگِ تازه) — User::avatarColorIndex() قفلش
   می‌کند تا هر کاربر همیشه همان رنگ را داشته باشد. `.tone-c*` همان رنگ را
   روی متن (اسمِ فرستنده) می‌گذارد، بدونِ پس‌زمینه. */

/* ── انتخابگرِ آواتار در فرمِ کاربر (بخش ۶.۲۴) ── */

/* ══ حبابِ گفتگو — آواتار+نام (بازنگریِ ۱۴۰۵/۰۶/۰۴) ══
   نسخه‌ی اول «شبیهِ چتِ دونفره» بود (پیامِ خودم بی‌آواتار/اسم، رویدادِ
   خودکار قرصِ وسط‌چین) — کارفرما هر دو را رد کرد: این گزارشِ کاری‌ست، پس
   هویتِ فرستنده باید همیشه دیده شود، و لاگِ خودکار باید مثلِ بقیه‌ی
   بنرهای اطلاعاتیِ برنامه (`.alert`) تمام‌عرض و چندخطی‌پذیر باشد، نه
   قرصِ کوچکِ وسط‌چین. */

/* رویدادِ خودکارِ موتور — ردیفِ گزارشیِ تمام‌عرض، هم‌خانواده‌ی `.alert`ِ
   خودِ مروارید (نه قرصِ جداگانه): آیکون سمتِ شروع، متن راست‌چین و
   چندخطی‌پذیر (`white-space:pre-wrap` برای گزارش‌های فهرست‌دار). آبی =
   لاگِ خنثی (تأیید/انجام‌شد)، طلایی = لاگِ نیازمندِ توجه (رد). */

/* برچسبِ «مالِ کدام مرحله/کار» — متنِ ساده و کلیک‌پذیر، نه چیپِ توپُر
   (بازنگریِ ۱۴۰۵/۰۶/۰۴: کارفرما چیپ را زشت دانست). زیرِ پیام/لاگ، بینِ
   زمان و بقیه‌ی متا — یک لینکِ کوچکِ نقطه‌چین‌دار، هم‌وزنِ بقیه‌ی متن. */

/* ── نوارِ وضعیت و تصمیم، زیرِ سربرگ ──
   ارجاع سمتِ شروع، «انجام شد»/«ثبت رد» سمتِ پایان. `flex:none` تا با اسکرولِ
   ناحیه‌ی کار یا گفتگو جابه‌جا نشود. */
.sp-bar { flex:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:9px 15px; border-bottom:1px solid var(--line); }
.sp-bar-acts { display:flex; align-items:center; gap:7px; margin-inline-start:auto; }
.sp-bar-acts form { margin:0; }
.sp-bar-acts .btn.danger { color:var(--red-on); }
.sp-bar-note { flex-basis:100%; display:flex; align-items:center; gap:5px;
    font-size:11px; color:var(--ink3); }

/* ── چیپِ ارجاع و مهلت ── */
.sp-asg { display:inline-flex; align-items:center; gap:5px; flex:none; max-width:150px;
    border:0; padding:5px 10px; border-radius:99px; font-size:11.5px; font-weight:700;
    background:var(--teal-soft); color:var(--teal-on); transition:filter .13s, transform .13s; }
button.sp-asg { cursor:pointer; }
button.sp-asg:hover { filter:brightness(.96); transform:translateY(-1px); }
.sp-asg b { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-asg.is-none { background:var(--card2); color:var(--ink3); }
.sp-asg.is-late { background:var(--coral-soft); color:var(--coral-on); }
.sp-asg-due { display:inline-flex; align-items:center; gap:3px; padding-inline-start:6px;
    border-inline-start:1px solid currentColor; opacity:.75; font-size:10.5px; }

/* ── کامپوزر: گیره + متن + ارسال ──
   از فوتر آمده بالای گفتگو، پس خودش قاب و خط می‌خواهد (قبلاً از `.sp-foot`
   می‌گرفت). `flex:none` تا با اسکرولِ گفتگو جابه‌جا نشود. */
.sp-chatpane .sp-compose { flex:none; padding:10px 15px; border-bottom:1px solid var(--line);
    background:var(--card); }
.sp-compose { display:flex; align-items:center; gap:7px; }
.sp-compose .sp-send { flex:1; min-width:0; }
/* حالتِ فقط‌خواندنی — همان شکاف، بدونِ فرم */
.sp-compose.is-note { color:var(--ink3); font-size:11.5px; line-height:1.7; align-items:flex-start; }
.sp-compose.is-note svg { flex:none; margin-top:3px; }
.sp-attach { flex:none; width:36px; height:36px; border:0; border-radius:50%; cursor:pointer;
    background:var(--card2); color:var(--ink2); display:grid; place-items:center;
    transition:background .13s, color .13s, transform .13s; }
.sp-attach:hover { background:var(--teal-soft); color:var(--teal-on); transform:translateY(-1px); }

/* کامپوزرِ «گفتگو و گزارش»ِ ستونِ کناری — سلکتِ هدف + متن + ارسال.
   بدونِ این، `.inp` روی سلکت و ورودی هر دو `width:100%` می‌خواهند و کنارِ
   هم به‌طورِ نامعین جمع می‌شوند؛ اینجا صریح می‌گوییم کدام رشد کند. */
.sp-compose-feed select.inp { flex:none; width:auto; }
.sp-compose-feed input.inp { flex:1; min-width:0; }

/* ── فضای کاریِ قدمِ الزامی داخلِ پنل ──
   `_stagecollect` قبلاً فقط در مودالِ عریض رندر می‌شد؛ حالا در ستونِ باریک‌تر
   می‌نشیند. شبکه‌ی مدارک خودش auto-fill است و کم‌ستون‌تر می‌شود، ولی چند
   چیزِ عرض‌محور باید جمع شوند. */
.sp-head .sp-assign { margin:0; width:auto; max-width:150px; padding:5px 9px; font-size:12px; }
.sp-body .wsp-guide { margin-bottom:12px; padding:10px 12px; }
.sp-body .wsp-guide .g-txt { font-size:12.5px; }
.sp-body .doc-grid { grid-template-columns:repeat(auto-fill, minmax(142px, 1fr)); gap:8px; }
.sp-body .dcard-thumb { height:92px; }
.sp-body .cbox-grid { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.sp-foot .more-btn { width:32px; height:32px; font-size:15px; }

/* ── نمای کلی (حالتِ پیش‌فرض) ── */
.sov-prog { display:flex; align-items:center; gap:10px; }
.sov-prog .meter { flex:1; }
.sov-prog .mono { font-size:11.5px; color:var(--ink3); white-space:nowrap; }
.sov-next { font-size:12.5px; font-weight:700; margin:8px 0 0; line-height:1.7; }
.sov-sec { margin-top:16px; }
.sov-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.sov-grid > div { background:var(--card2); border-radius:var(--r-sm); padding:8px 11px; min-width:0; }
.sov-grid span { display:block; font-size:10.5px; color:var(--ink3); }
.sov-grid b { font-size:12.5px; font-weight:700; overflow-wrap:anywhere; }
.sov-tiles { display:flex; gap:7px; flex-wrap:wrap; }
.sovt { display:inline-flex; align-items:baseline; gap:5px; border-radius:20px; padding:4px 11px;
    font-size:11px; font-weight:700; background:var(--card2); color:var(--ink2); }
.sovt b { font-size:13px; }
.sovt.g { background:var(--teal-soft); color:var(--teal-on); }
.sovt.a { background:var(--gold-soft); color:var(--gold-on); }
.sovt.r { background:var(--coral-soft); color:var(--coral-on); }
.sov-row { display:flex; align-items:center; gap:7px; font-size:12.5px; padding:5px 0;
    border-bottom:1px dashed var(--line); }
.sov-row:last-child { border-bottom:0; }
.sov-row b { flex:1; min-width:0; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sov-stage { display:flex; align-items:center; gap:8px; width:100%; text-align:start; background:none;
    border:0; border-radius:var(--r-sm); padding:7px 8px; cursor:pointer; font-family:inherit; color:inherit;
    transition:background .13s; }
.sov-stage:hover { background:var(--card2); }
.sov-stage.is-mute { opacity:.55; }
.sov-stage b { flex:1; min-width:0; font-size:12.5px; font-weight:650; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.sov-n { width:20px; height:20px; border-radius:50%; background:var(--card2); color:var(--ink3);
    font-size:10px; display:grid; place-items:center; flex:none; }

/* ردیفِ ریلی که پنل مالِ اوست */
.rl.is-sel { background:var(--teal-soft); box-shadow:inset 0 0 0 1px var(--teal-on); }
.rl.is-sel:hover { background:var(--teal-soft); }
/* دکمه‌ی ⚙ — کنارِ دکمه‌ی زیرکار، هر دو فقط با hover */
.rl-cfg:hover { transform:rotate(45deg); }

@media (max-width:1100px) {
    .case-grid { grid-template-columns:minmax(0,1fr); }
    .side-pane, .side-pane:has(.sp-chatpane) { position:static; max-height:none; height:auto; }
    .sp-body { overflow:visible; max-height:none; }
    /* پنل دیگر ارتفاعِ معلوم ندارد؛ دو ناحیه به همان جریانِ یک‌تکه برمی‌گردند
       (وگرنه `max-height:48%` بی‌اثر و `overflow:auto` بی‌اسکرول می‌ماند). */
    .sp-chatpane { display:block; overflow:visible; }
    .sp-work { max-height:none; overflow:visible; }
    .sp-chatpane .sp-chat { display:block; min-height:0; max-height:none; overflow:visible;
        padding-top:12px; }
    .sp-chat-h { position:static; margin:0 0 8px; padding:0; }
    /* در جریانِ یک‌تکه، کامپوزر همان‌جا بینِ کار و گفتگو می‌ماند */
    .sp-chatpane .sp-compose { position:static; }
}
/* ── نوار راهنمای مرحله ── */
.wsp-guide { display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:12px 15px; border-radius:var(--r-sm); }
.wsp-guide.warn { background:var(--gold-soft); }
.wsp-guide.ok { background:var(--teal-soft); }
.wsp-guide .g-ico { font-size:18px; }
.wsp-guide .g-txt { flex:1; font-size:13.5px; font-weight:700; color:var(--ink); }
.wsp-guide .g-txt small { display:block; font-weight:400; color:var(--ink2); margin-top:2px; font-size:12px; }
.inp-sm { padding:6px 10px; font-size:12.5px; max-width:170px; }
/* ── فرم‌های جمع‌شونده ── */
/* نسخه‌ی آیکونی — فقط تریگرِ گرد، بدونِ برچسبِ متنی (کارفرما ۱۴۰۵/۰۵/۲۶:
   «افزودنِ آیتمِ اطلاعاتی» کم‌کاربرد است، فضای یک دکمه‌ی تمام‌عرض نمی‌خواهد) */
/* ── منوی «بیشتر» ── */
.wsp-more { position:relative; margin-inline-start:auto; }
.wsp-more > summary { list-style:none; cursor:pointer; }
.wsp-more > summary::-webkit-details-marker { display:none; }
/* دکمه‌ی هشدار (بازگشایی برای اصلاح) */
.btn-warn { background: var(--gold-soft); color: var(--gold-on); }
.btn-warn:hover { filter: brightness(.97); }
/* نشانگرِ ذخیره‌ی خودکارِ فیلدها */
.tv-status { font-size:11.5px; font-weight:700; white-space:nowrap; transition:opacity .2s; }
.tv-status.saving { color:var(--ink3); }
.tv-status.ok { color:var(--teal); }
.tv-status.err { color:var(--red); }
/* ══ هروی پرونده — جمله‌ی وضعیت + دکمه‌ی اصلی ══ */
.case-hero { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r); border:1px solid var(--line); background:var(--card); flex-wrap:wrap; }
.case-hero.act { border-inline-start:4px solid var(--teal); }
.case-hero.warn { border-inline-start:4px solid var(--gold); }
.case-hero.wait { border-inline-start:4px solid var(--ink3); }
.case-hero.done { border-inline-start:4px solid var(--teal); }
.ch-ico { width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.18); }
.ch-txt { flex:1; min-width:200px; }
.ch-label { font-weight:800; font-size:14.5px; }
.ch-sub { font-size:12px; color:var(--ink3); margin-top:2px; }
.ch-btn { flex:none; }
.ch-bar { height:5px; border-radius:99px; background:var(--card2); margin-top:8px; overflow:hidden; }
.ch-bar span { display:block; height:100%; background:var(--teal); border-radius:99px; }
/* ══════════ مدلِ دوگانه‌ی مرحله (۱۴۰۵/۰۵/۰۵) ══════════ */

/* عنوانِ بخش داخل نمای ترکیبی */
.sec-label { font-size:12.5px; font-weight:800; color:var(--ink2); margin:16px 0 8px; padding-top:12px; border-top:1px dashed var(--line); }
/* ── بلوکِ قرارداد ── */
.cbox { border:1px solid var(--line); border-inline-start:4px solid var(--teal); border-radius:var(--r-sm); padding:12px 14px; margin-bottom:14px; background:var(--card2); }
.cbox-head { font-weight:800; font-size:13.5px; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cbox-amount { font-size:12px; font-weight:700; color:var(--teal); background:var(--teal-soft); border-radius:99px; padding:2px 10px; }
.cbox-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end; }
.cbox-foot { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:11px; padding-top:10px;
    border-top:1px solid var(--line); font-size:11.5px; }

/* ============================================================
   پیکربندی خدمات — سازنده‌ی مراحل، مدارک و آیتم‌ها
   ============================================================ */

/* ── برچسبِ حذف‌شدنی (مدرک/اقدام روی یک مرحله) ──
   با .chip مروارید فرق دارد: .chip فقط وضعیت را نشان می‌دهد،
   این یکی یک فرمِ حذف درون خودش دارد. */
.tagchip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; background:var(--card2); border:1px solid var(--line); font-size:12px; color:var(--ink); }
.tagchip .req { color:var(--red); font-weight:800; }
.tagchip .opt { color:var(--ink3); font-size:11px; }
.tagchip .sub { color:var(--ink3); font-size:10.5px; }
.tagchip form { display:inline-flex; }
.tagchip button { border:0; background:none; padding:0; display:grid; place-items:center; color:var(--ink3); cursor:pointer; transition:color .13s; }
.tagchip button:hover { color:var(--red); }
/* ویرایش سبز است تا با ✕ حذف اشتباه نشود */
.tagchip .chip-edit { margin-inline-start:2px; }
.tagchip .chip-edit:hover { color:var(--teal); }
.tagchip.is-off { opacity:.55; border-style:dashed; }
.tagchip-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── ردیفِ یک مرحله در سازنده ── */
.srow { background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px; margin-bottom:12px; }
.srow-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.srow-num { width:30px; height:30px; border-radius:9px; background:var(--teal-soft); color:var(--teal-on); font-weight:800; font-size:13px; display:grid; place-items:center; flex-shrink:0; }
/* ردیفِ اقدامِ کتابخانه — هم‌شکلِ ردیفِ مرحله، با نشانِ خنثی به‌جای شماره */
.srow-num.act { background:var(--card2); color:var(--ink2); }
.srow.is-off { opacity:.6; }
.srow-title { font-weight:700; font-size:14px; flex:1; min-width:120px; }
.srow-desc { font-size:12.5px; color:var(--ink2); margin-top:8px; }
.srow-sec { margin-top:14px; }
.srow-sec > .lbl { font-size:11.5px; color:var(--ink3); margin-bottom:8px; display:flex; align-items:center; gap:5px; }

/* ── برچسبِ فاز بین ردیف‌های مرحله ── */
.phase-label { font-size:12px; font-weight:800; color:var(--teal); padding:10px 4px 6px; margin-top:6px; border-bottom:2px solid var(--line); display:flex; align-items:center; gap:6px; }

/* ── دکمه‌های جابجایی بالا/پایین ── */
.move-btns { display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.move-btns button { width:26px; height:19px; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink2); display:grid; place-items:center; cursor:pointer; transition:all .13s; }
.move-btns button:hover { border-color:var(--teal); color:var(--teal); }

/* ── انتخابگر آیکون (جایگزین فیلدِ متنیِ ایموجی) ── */
.icsel { display:flex; align-items:center; gap:9px; }
.icsel .prev { width:38px; height:38px; border-radius:var(--r-sm); background:var(--teal-soft); color:var(--teal-on); display:grid; place-items:center; flex-shrink:0; }
.icsel select { flex:1; min-width:0; }

/* ============================================================
   پورتال مشتری — صفحه‌ی پرونده و اسکنر مدرک
   ============================================================ */

/* ── چیدمان دوستونی ── */
.p-cols { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }

/* ── روندِ مراحل (نمای مشتری) ── */
.p-phase { font-size:11.5px; font-weight:800; color:var(--ink3); margin:14px 0 8px; display:flex; align-items:center; gap:8px; }
.p-phase:first-child { margin-top:0; }
.p-phase::after { content:""; flex:1; height:1px; background:var(--line); }
.p-stage { display:flex; align-items:flex-start; gap:12px; padding:9px 0; }
.p-dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:11px; font-weight:800; margin-top:1px; }
.p-dot.done { background:var(--teal-soft); color:var(--teal-on); }
.p-dot.cur  { background:var(--ring); color:var(--teal); box-shadow:0 0 0 3px var(--ring); }
.p-dot.wait { background:var(--card2); color:var(--ink3); }
.p-dot.fix  { background:var(--gold-soft); color:var(--gold-on); }
.p-stage-t { font-weight:700; font-size:13.5px; }
.p-stage-s { font-size:11.5px; color:var(--ink2); margin-top:2px; }

/* ── وضعیتِ مدرک روی .file-row مروارید ──
   .file-row .fi همیشه فیروزه‌ای است؛ اینجا رنگش وضعیتِ بررسی را می‌گوید. */

/* ── اسکنرِ مدرک (موبایل‌محور) ── */
.scan-hint { font-size:12.5px; color:var(--ink2); background:var(--card2); border-radius:var(--r-sm); padding:11px 13px; margin-bottom:14px; line-height:1.8; display:flex; gap:9px; }
.scan-hint svg { flex-shrink:0; margin-top:2px; color:var(--teal); }
.scan-strip { display:flex; flex-wrap:wrap; gap:10px; min-height:96px; margin-bottom:16px; }
.scan-empty { width:100%; text-align:center; color:var(--ink3); font-size:12.5px; padding:32px 0; border:1.5px dashed var(--line); border-radius:var(--r-sm); }
.scan-page { position:relative; width:92px; height:120px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--card2); flex-shrink:0; }
.scan-page img { width:100%; height:100%; object-fit:cover; }
.scan-ico { width:100%; height:100%; display:grid; place-items:center; color:var(--ink3); }
.scan-del,
.scan-rot { position:absolute; top:4px; width:24px; height:24px; border:0; border-radius:50%; color:#fff; cursor:pointer; display:grid; place-items:center; padding:0; }
.scan-del { inset-inline-end:4px; background:rgba(0,0,0,.6); }
.scan-rot { inset-inline-start:4px; background:rgba(0,0,0,.5); }
.scan-num { position:absolute; bottom:4px; inset-inline-start:4px; background:var(--teal); color:var(--on-teal); font-size:11px; font-weight:700; border-radius:6px; padding:1px 7px; }
.scan-actions { display:flex; gap:10px; flex-wrap:wrap; }
.scan-pick { cursor:pointer; }

/* اسلاتِ اجزا (رو/پشت) */
.scan-part { display:flex; flex-direction:column; gap:8px; width:150px; }
.scan-part-h { font-size:12.5px; font-weight:800; text-align:center; }
.scan-part-box { position:relative; height:150px; border-radius:12px; overflow:hidden; border:1.5px dashed var(--line); background:var(--card2); display:grid; place-items:center; }
.scan-part-box img { width:100%; height:100%; object-fit:cover; }
.scan-part-empty { color:var(--ink3); opacity:.55; }

@media (max-width: 820px) {
    .p-cols { grid-template-columns:1fr; }
}

/* ── واکنش‌گرا ── */
@media (max-width: 1180px) {
    .case-grid { grid-template-columns: 300px minmax(0, 1fr); }
    .case-grid aside { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .case-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .tl-assign { width: 100%; }
    .tl-row { flex-wrap: wrap; }
}

/* ── چیپ صفحات یک مدرک (رو/پشت/…) ── */
.page-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.page-chip { padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--card2);
    color: var(--ink2); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; transition: all .13s; }
.page-chip:hover { border-color: var(--teal); color: var(--teal); }
.page-chip.on { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }

/* ── تیکِ آیتمِ چک‌لیستی ── */
.task-check { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; border: 2px solid var(--line);
    background: var(--card2); color: #fff; font-size: 13px; line-height: 1;
    display: grid; place-items: center; transition: all .13s; }
.task-check:hover { border-color: var(--teal); }
.ti.is-filled.is-check .task-check { background: var(--teal); border-color: var(--teal); }

/* ── پیش‌نمایش مدرک ── */
.preview-media { width: 100%; max-height: 76vh; display: block; border-radius: var(--r-sm); background: var(--card2); }
.preview-media.is-img { object-fit: contain; }
iframe.preview-media { height: 76vh; border: none; }
.doc-thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; cursor: pointer;
    border: 1px solid var(--line); background: var(--card2); flex-shrink: 0; transition: transform .15s; }
.doc-thumb:hover { transform: scale(1.06); border-color: var(--teal); }
.doc-ico { width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0; background: var(--card2);
    color: var(--ink3); display: grid; place-items: center; }

/* ── انتخابگر مدرک (مودال یکپارچه) ── */
.dp-filters { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.dp-filters .inp { flex: 1; min-width: 180px; }
.dp-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line);
    border-radius: var(--r-sm); margin-bottom: 8px; flex-wrap: wrap; transition: border-color .15s; }
.dp-row:hover { border-color: var(--teal); }
/* بدون این، display:flex بالای [hidden] می‌نشیند و فیلتر بی‌اثر می‌شود */
.dp-hint { font-size: 11px; color: var(--ink3); margin-top: 4px; }

/* ── ردیف‌های نوع/مالک و توضیح/معتبرتا کنارِ هم (۱۴۰۵/۰۵/۲۵) ── */
.dp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .dp-row2 { grid-template-columns: 1fr; } }

.dp-pane .req { color: var(--red); font-weight: 800; }

/* ── ردیفِ فایل — ساده و visible (۱۴۰۵/۰۵/۲۶، بعد از عقب‌نشینی از کاشی‌های
   درگ‌ودراپ که در فایرفاکس required روی input مخفی را بی‌صدا مسدود می‌کرد) ── */
.dp-files { display: flex; flex-direction: column; gap: 8px; }
.dp-file-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-file-row .inp { flex: 1; min-width: 140px; }
.dp-file-tag {
    display: flex; align-items: center; gap: 4px; min-width: 70px; font-size: 12px;
    font-weight: 700; color: var(--ink2);
}
.dp-file-freelabel { flex: 1; min-width: 120px; }
.dp-file-row .i-btn { flex-shrink: 0; }

.dp-addpage {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 6px 12px;
    border: 1px dashed var(--line); border-radius: 99px; background: none; color: var(--ink2);
    font-size: 11.5px; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s;
}
.dp-addpage:hover { border-color: var(--teal); color: var(--teal-on); }

/* ── انتخاب نوع خدمت (فرم پرونده‌ی جدید) ── */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.svc-pick { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--line);
    border-radius: var(--r); cursor: pointer; transition: all .15s; }
.svc-pick:hover { border-color: var(--ink3); }
.svc-pick:has(input:checked) { border-color: var(--teal); background: var(--teal-soft); }
.svc-pick input { display: none; }
.svc-ico { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--teal-soft); color: var(--teal-on); }
.svc-t { font-weight: 700; font-size: 14px; display: block; }
.svc-d { font-size: 11px; color: var(--ink3); display: block; margin-top: 2px; }

/* ── ثبت سریع شخص ── */
.qp-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.qp-tt { flex: 1; padding: 9px; border: 2px solid var(--line); border-radius: var(--r-sm); background: none;
    color: var(--ink2); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: all .15s; }
.qp-tt.on { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }

/* ── تکمیلی: اجزای معرفی‌شده حین تبدیل ویوها ── */
.ti-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ti-ro { font-size: 12.5px; color: var(--ink2); display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.inp-sm { padding: 7px 11px; font-size: 12.5px; }
.side-card { margin-bottom: 16px; }
.side-body { padding: 0 22px 18px; }
.hist-row { padding-bottom: 12px; }
.hist-act { font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hist-meta { font-size: 11px; color: var(--ink3); margin-top: 2px; line-height: 1.6; }

/* ── تب به‌صورت لینک (مروارید فقط button را استایل می‌دهد) ── */

/* ── ردیف رابطه/پرونده در پروفایل مشتری ── */
.rel-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line);
    border-radius: var(--r-sm); margin-bottom: 8px; flex-wrap: wrap; transition: border-color .15s; }
.rel-row:hover { border-color: var(--teal); }
.rel-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
    background: var(--card2); color: var(--ink2); }

/* ═══ فازِ «فرایند انجام» نسخه‌ی پیشرفته ═══════════════════════════
   چیپِ اقدام (act*)، نوارِ نما (pv*)، گانت (gt*)، مودالِ جزئیات (ad*) */

/* ── نوار ابزار: انتخاب نما + شمارنده ── */
.pv-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
/* دسته‌بندیِ بج‌های کتابخانه، وقتی کتابخانه بزرگ شد */
.pal-cat { font-size:11px; font-weight:700; color:var(--ink3); margin:9px 0 5px; }
.pal-cat:first-of-type { margin-top:0; }
.pal-rj { font-size:10px; font-weight:800; color:var(--gold-on); background:var(--gold-soft);
    border-radius:99px; width:14px; height:14px; display:grid; place-items:center; }

/* ── مودالِ جزئیاتِ اقدام ── */
.ad-load { padding:40px; text-align:center; color:var(--ink3); font-size:13px; }
.ad-body { padding-bottom:14px; }
.m-head .mi.ad-rejected { background:var(--red-soft); color:var(--red-on); }
.m-head .mi.ad-overdue { background:var(--gold-soft); color:var(--gold-on); }
.m-head .mi.ad-blocked { background:var(--card2); color:var(--ink2); }

.ad-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:14px 0; }
.ad-full { grid-column:1 / -1; }
.ad-fix { margin-bottom:14px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.ad-lbl { font-size:12px; font-weight:700; color:var(--ink2); display:flex; align-items:center; gap:5px; }
.ad-lbl .req { color:var(--red); }
.ad-ro { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin:14px 0; }
.ad-ro > div { background:var(--card2); border-radius:var(--r-sm); padding:9px 12px; }
.ad-ro span { display:block; font-size:11px; color:var(--ink3); }
.ad-ro b { font-size:12.5px; font-weight:700; }

.ad-trace { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--ink3);
    padding:10px 0; border-top:1px dashed var(--line); }
.ad-trace span { display:flex; align-items:center; gap:5px; }

.ad-chat { border-top:1px dashed var(--line); padding-top:12px; }
.ad-chat-h { font-size:12px; font-weight:700; color:var(--ink2); display:flex; align-items:center; gap:5px; margin-bottom:9px; }
.ad-chat-empty { font-size:12px; color:var(--ink3); text-align:center; padding:12px; }

/* ── فیلدهای اطلاعاتیِ یک اقدام (فاز چهارم) ── */
.ad-fields { border-top:1px solid var(--line); padding-top:12px; margin-top:14px; }
.adf-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.adf-lbl { flex:0 0 145px; font-size:12px; font-weight:600; color:var(--ink2); display:flex;
    align-items:center; gap:4px; }
.adf-lbl svg { color:var(--blue); }
.adf-row .inp { flex:1; min-width:0; padding:7px 10px; font-size:12.5px; margin:0; }
.adf-row .tv-status { flex:none; font-size:10.5px; min-width:0; }
.adf-add { margin-top:10px; }
.adf-add .mini-form { margin-top:8px; }

/* مدرکِ نسبت‌داده‌شده به یک اقدام */
.adf-doc { display:flex; align-items:center; gap:9px; padding:8px 10px; margin-bottom:6px;
    border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card2); }
.adf-doc-ic { width:28px; height:28px; border-radius:9px; background:var(--card); color:var(--ink3);
    display:grid; place-items:center; flex:none; }
.adf-doc b { display:block; font-size:12.5px; font-weight:650; }
.adf-doc small { font-size:10.5px; color:var(--ink3); }
/* ⚠ .ad-msg قدیم اینجا بود — با بازطراحیِ حبابِ گفتگو (بخش ۶.۲۴) به
   `.fd-*` رفت (بالاتر در همین فایل، کنارِ `.av-circle`). */
.ad-send { display:flex; gap:7px; margin-top:10px; }
.ad-send .inp { flex:1; }
.ad-foot { flex-wrap:wrap; }
.ad-foot .btn.danger { color:var(--red-on); }

/* ── زنگوله‌ی اعلان در نوار بالا ── */

/* ── اقدام‌های قابل مشاهده‌ی مشتری، زیر مرحله در پورتال ── */
.p-acts { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.p-act { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600;
    padding:2px 8px; border-radius:99px; background:var(--card2); color:var(--ink2); }
.p-act.ok { background:var(--teal-soft); color:var(--teal-on); }
.p-act small { opacity:.7; }
.ad-block { font-size:11px; color:var(--ink3); flex-basis:100%; text-align:end; }

/* مدرکِ منقضی در بایگانی: قابل انتخاب نیست */
.dp-dead { font-size:11.5px; font-weight:600; color:var(--red-on); background:var(--red-soft);
    border-radius:99px; padding:5px 11px; white-space:nowrap; }

/* ============================================================
   نمای کلیِ پرونده — برگه‌ی گزارشیِ قابلِ پرینت (فاز چهارم)
   ساختارش عمداً «جدولی و خشک» است: این یکی سند است نه داشبورد.
   ============================================================ */
.ov-sheet { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:22px 24px; max-width:900px; margin:0 auto; }

.ov-head { display:none; align-items:flex-start; justify-content:space-between;
    padding-bottom:12px; margin-bottom:16px; border-bottom:2px solid var(--ink); }
.ov-head b { display:block; font-size:14px; font-weight:800; }
.ov-head small { font-size:11px; color:var(--ink2); }
.ov-head-l { text-align:end; }

.ov-sec { margin-bottom:20px; }
.ov-sec:last-of-type { margin-bottom:8px; }
.ov-sec-h { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:800;
    color:var(--ink); padding-bottom:6px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.ov-sec-h svg { color:var(--teal); }

.ov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px 16px; }
.ov-grid > div { min-width:0; }
.ov-grid span { display:block; font-size:10.5px; color:var(--ink3); margin-bottom:2px; }
.ov-grid b { font-size:13px; font-weight:650; word-break:break-word; }

.ov-status { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ov-meter { display:flex; align-items:center; gap:9px; flex:0 0 240px; }
.ov-meter .meter { flex:1; }
.ov-status p { margin:0; font-size:13px; font-weight:600; color:var(--ink2); }

.ov-tbl { width:100%; border-collapse:collapse; font-size:12.5px; }
.ov-tbl th { text-align:start; font-size:10.5px; font-weight:800; color:var(--ink3);
    padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.ov-tbl td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.ov-tbl tr:last-child td { border-bottom:0; }
.ov-tbl small { color:var(--ink3); font-size:10.5px; }
.ov-tbl small.req { color:var(--red); font-weight:800; }
.ov-tbl tr.is-mute td { color:var(--ink3); text-decoration:line-through; }

.ov-foot { font-size:10.5px; color:var(--ink3); text-align:center;
    padding-top:12px; border-top:1px solid var(--line); }

/* ── حالت چاپ ── */
@media print {
    /* همه‌چیزِ اپلیکیشن می‌رود؛ فقط برگه می‌ماند */
    .side-wrap, .topbar, .bnav, .ov-hide, .alert, .toast-host { display:none !important; }
    body { background:#fff; display:block; }
    .main { margin:0 !important; padding:0 !important; }
    .ov-sheet { border:0; border-radius:0; padding:0; max-width:100%; box-shadow:none; }
    .ov-head { display:flex; }
    .ov-sec { break-inside:avoid; page-break-inside:avoid; }
    .ov-break { break-before:auto; }
    .ov-tbl { font-size:10.5px; }
    .ov-tbl th, .ov-tbl td { padding:4px 6px; }
    a[href]::after { content:none !important; }
}

/* نوارِ ذخیره داخلِ مودالِ تنظیماتِ اقدام */
.ae-save { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.ae-field { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.tagchip .sub.is-auto { color:var(--teal-on); background:var(--teal-soft); border-radius:20px; padding:1px 7px; }

/* ── شناسنامه‌ی خدمت در بیلدر ──
   ردیف است نه چیپ: هر فیلد چند نشانه دارد (نوع، کنترلِ مقدار، الزامی، تعدادِ
   نقاطِ پرکردن) و در چیپ جا نمی‌شوند. */
.sf-row { display:flex; align-items:center; gap:9px; padding:9px 11px; margin-bottom:7px;
    background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); }
.sf-row.is-off { opacity:.55; }
.sf-ico { width:28px; height:28px; border-radius:9px; background:var(--card); color:var(--teal);
    display:grid; place-items:center; flex:none; }
.sf-main { flex:1; min-width:0; }
.sf-main b { display:block; font-size:13px; font-weight:700; }
.sf-main small { display:block; font-size:10.5px; color:var(--ink3); }

/* ── درختِ کتابخانه‌ی اقدامات (دو سطح) ──
   همان زبانِ بصریِ `.rl-sub` روی ریلِ پرونده، تا «پیامد» در بیلدر و در پرونده
   یک چیز به نظر برسد. */
.lib-strict { padding:9px 11px; margin-bottom:12px; background:var(--card2);
    border:1px solid var(--line); border-radius:var(--r-sm); }
.lib-strict small { display:block; margin-top:4px; font-size:10.5px; line-height:1.7; }
.lib-node { margin-bottom:10px; }
.lib-sub { position:relative; margin-inline-start:22px; margin-top:6px; padding-inline-start:12px;
    border-inline-start:2px solid var(--line); }
.lib-sub-lbl { font-size:10px; font-weight:800; color:var(--ink3); margin-bottom:5px; }

/* ── مودالِ اقدام: نوارِ عملیاتیِ فشرده (فقط مسئول و مهلت) ──
   تنظیماتِ قالبی از بیلدر می‌آیند و اینجا تکرار نمی‌شوند؛ نادرها پشتِ «تنظیمات». */
.ad-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:9px 11px; margin-bottom:10px; border:1px solid var(--line);
    border-radius:var(--r-sm); background:var(--card2); }
.ad-bar-f { display:flex; align-items:center; gap:7px; }
.ad-bar-f label { font-size:11px; font-weight:700; color:var(--ink3); white-space:nowrap; }
.ad-bar-f .inp { margin:0; padding:5px 9px; font-size:12px; width:auto; min-width:130px; }
.ad-bar-tags { display:flex; gap:5px; align-items:center; margin-inline-start:auto; }
.ad-desc { font-size:12.5px; color:var(--ink2); margin:0 0 10px; line-height:1.75; }
.ad-more { margin-bottom:12px; }
.ad-more > summary { font-size:11.5px; color:var(--ink3); }

/* ── انتخابگرِ زیرکار و جعبه‌ی ثبتِ رد ── */
.sp-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.sp-manual { display:flex; gap:8px; align-items:center; }
.sp-manual .inp { flex:1; margin:0; }
.ad-reject { border:1px solid var(--red-soft); background:var(--red-soft); border-radius:var(--r-sm);
    padding:12px; margin-bottom:12px; }
.ad-reject .inp { background:var(--card); }
.ad-reject-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }

/* ── نوارِ جعبه‌ی شن (پرونده‌ی آزمایشی) ──
   عمداً راه‌راه و پررنگ است: تنها چیزی که این صفحه را از پرونده‌ی واقعی جدا
   می‌کند همین نوار است، پس نباید در اسکرین‌شات یا نگاهِ گذرا گم شود. */
.sandbox-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin-bottom:14px; padding:10px 13px; border-radius:var(--r-sm);
    border:1px dashed var(--gold); color:var(--gold-on);
    background:repeating-linear-gradient(135deg,
        var(--gold-soft) 0 14px, transparent 14px 28px), var(--card); }
.sandbox-bar .sb-tag { display:inline-flex; align-items:center; gap:6px; flex:none;
    font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:999px;
    background:var(--gold); color:var(--card); }
.sandbox-bar .sb-txt { font-size:12px; line-height:1.7; flex:1 1 240px; }
.sandbox-bar .sb-acts { display:flex; gap:7px; align-items:center; margin-inline-start:auto; flex:none; }
.sandbox-bar .sb-acts form { margin:0; }

/* ── سازنده‌ی گزینه‌ها (فیلدِ «انتخاب از گزینه‌ها») ──
   جای ورودیِ «با کاما جدا کنید» را گرفت: روی کیبورد فارسی کامای انگلیسی زیرِ
   دستِ کاربر نیست و کلِ رشته یک گزینه می‌شد. */
.optbox { border:1px solid var(--line); border-radius:var(--r-sm);
    background:var(--card2); padding:9px; }
.optbox .ob-chips:not(:empty) { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.optbox .ob-chip { display:inline-flex; align-items:center; gap:6px;
    padding:4px 6px 4px 9px; border-radius:999px; font-size:12px;
    background:var(--teal-soft); color:var(--teal-on); border:1px solid transparent; }
.optbox .ob-chip b { font-weight:700; }
.optbox .ob-x { border:0; padding:0; cursor:pointer; line-height:1;
    width:17px; height:17px; border-radius:50%; font-size:14px;
    background:rgba(0,0,0,.08); color:inherit; }
.optbox .ob-x:hover { background:var(--red); color:var(--card); }
.optbox .ob-add { display:flex; gap:7px; align-items:center; }
.optbox .ob-input { margin:0; flex:1; min-width:0; }
.optbox .ob-btn { flex:none; }
.optbox .ob-hint { display:block; margin-top:6px; font-size:10.5px; color:var(--ink3); line-height:1.7; }

/* ── مودالِ تنظیماتِ اقدام ──
   قبلاً هر دو دکمه‌ی ثبت ته بدنه‌ی اسکرول‌شونده بودند و عملاً دیده نمی‌شدند،
   و چهار کلیدِ تمام‌عرض نیمی از ارتفاع را می‌گرفتند. حالا: فوترِ چسبان مثلِ
   بقیه‌ی مودال‌ها + شبکه‌ی فشرده. */
.ae-modal .inp { padding:7px 10px; font-size:12.5px; }
.ae-modal .field > label { font-size:11.5px; }
.ae-modal textarea.inp { font-size:12.5px; }

/* چهار کلید دوتا-دوتا */
.ae-switches { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px 14px; margin-top:14px; }
.ae-switches .sw { margin:0; }
.ae-switches .sw small { font-size:10.5px; line-height:1.6; }

/* افزودنِ فیلد: یک شبکه‌ی چهارستونه که فقط بلوک‌های مرتبط را نشان می‌دهد */
.ae-newfield { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; align-items:end; }
.ae-newfield > .field.wide { grid-column:span 2; }
.ae-newfield > .field.full { grid-column:1 / -1; }
.ae-newfield .ae-nf-foot { grid-column:1 / -1; display:flex; align-items:center;
    gap:12px; flex-wrap:wrap; padding-top:2px; }
.ae-newfield .ae-nf-foot .btn { margin-inline-start:auto; }
.ae-newfield .optbox { padding:7px; }

@media (max-width:640px) {
    .ae-switches  { grid-template-columns:1fr; }
    .ae-newfield  { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .ae-newfield > .field.wide { grid-column:1 / -1; }
}

/* کارتِ «افزودنِ فیلدِ تازه» — مرزِ دیداری با فوترِ مودال، که دکمه‌ی سبزش
   مالِ «مشخصاتِ اقدام» است و بدونِ این مرز با هم اشتباه می‌شدند. */
.ae-newcard { border:1px solid var(--line); border-radius:var(--r-sm);
    background:var(--card2); padding:12px; margin-top:12px; }
.ae-newcard-h { font-size:11.5px; font-weight:800; color:var(--ink3);
    display:flex; align-items:center; gap:5px; margin-bottom:10px; }

/* ماشه‌ی پیامد + تله‌ی «ردشونده نیست» در کتابخانه */
.tagchip .sub.is-trigger { color:var(--gold-on); background:var(--gold-soft);
    border-radius:20px; padding:1px 7px; }
.lib-trap { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin-top:8px; padding:8px 10px; border-radius:var(--r-sm);
    border:1px dashed var(--gold); background:var(--gold-soft); color:var(--gold-on);
    font-size:11.5px; line-height:1.7; }
.lib-trap .btn { margin-inline-start:auto; flex:none; }
/* همان تله، این‌بار زیرِ ردیفِ شناسنامه — فیلدی که مهلتش هیچ‌وقت نمی‌رسد */
.sf-trap { margin: -2px 0 10px; }

/* فیلدهای درجاِ نوارِ نتیجه: «تأیید» باید یک تصمیم باشد نه سه قدم (۶.۳.۸) */
.ad-outcome-form { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; }
.ad-outcome-f { display:flex; flex-direction:column; gap:3px; min-width:130px; flex:1 1 130px; }
.ad-outcome-f > span { font-size:11px; color:var(--ink2); }
.ad-outcome-f .req { color:var(--red); }

/* ── نوارِ «نتیجه‌ی این کار» ──
   قرینه‌ی رد و تأیید، بالای پنل و در دید. پیش از این «ثبت رد» دکمه‌ای کوچک
   ته پنل بود و «تأیید شد» اصلاً جایی نداشت. */
.ad-outcome { border:1px solid var(--line); border-radius:var(--r-sm);
    background:var(--card2); padding:11px 12px; margin-bottom:12px; }
.ad-outcome-h { font-size:11.5px; font-weight:800; color:var(--ink3);
    display:flex; align-items:center; gap:5px; margin-bottom:9px; }
.ad-outcome-btns { display:flex; gap:8px; flex-wrap:wrap; }
.ad-outcome-btns form { margin:0; }
.ad-outcome-hint { display:block; margin-top:8px; font-size:10.5px;
    color:var(--gold-on); line-height:1.7; }

/* فهرستِ «فیلدِ اجباری برای تأیید شدن» در مودالِ اقدام */
.ae-reqfields { display:flex; flex-wrap:wrap; gap:6px 14px; padding:9px 11px;
    border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card2); }
.ae-reqfields .chk { margin:0; font-size:12px; }

/* ============================================================
   بیلدرِ خدمت — تخته‌ی فازها با ویرایشگرِ درجا
   جایگزینِ فهرستِ عمودیِ شش‌کارتیِ قبلی. سه قاعده‌ی حاکم:
     ۱) هیچ overlayای؛ ویرایش همان‌جا داخلِ ستون باز می‌شود.
     ۲) ترتیب و فاز فقط با درگ تعیین می‌شوند، نه با دکمه و اینپوتِ متنی.
     ۳) بخش‌های کم‌مراجعه در تب یا آکاردئون، نه در اسکرول.
   پیشوندِ svb- عمداً از sb- جداست (آن مالِ نوارِ جعبه‌ی شن است).
   ============================================================ */

.svb-tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px;
    overflow-x:auto; scrollbar-width:none; }
.svb-tabs::-webkit-scrollbar { display:none; }
.svb-tab { display:inline-flex; align-items:center; gap:7px; padding:11px 16px; border:0;
    background:transparent; color:var(--ink2); font-size:13px; font-weight:700; white-space:nowrap;
    position:relative; transition:color .15s; cursor:pointer; }
.svb-tab:hover { color:var(--ink); }
.svb-tab.on { color:var(--teal); }
.svb-tab.on::after { content:''; position:absolute; inset-inline:10px; bottom:-1px; height:2px;
    background:var(--teal); border-radius:2px; }
.svb-tab .n { font-size:10.5px; font-weight:800; font-family:var(--mono); background:var(--card2);
    color:var(--ink3); border-radius:99px; padding:1px 7px; }
.svb-tab.on .n { background:var(--teal-soft); color:var(--teal-on); }

/* ── نوارِ بالا: خلاصه + شناسنامه ── */
.svb-top { margin-bottom:14px; }
.svb-sum { display:flex; gap:22px; align-items:center; padding:11px 18px; flex-wrap:wrap; }
.svb-sum .m { line-height:1.45; }
.svb-sum .m small { display:block; font-size:9.5px; color:var(--ink3); }
.svb-sum .m b { font-size:14px; font-weight:800; font-family:var(--mono); }
.svb-sum .m.bad b { color:var(--gold); }
.svb-sum .sp { margin-inline-start:auto; display:flex; gap:8px; align-items:center; }

.svb-idhead { display:flex; align-items:center; gap:9px; padding:11px 18px;
    border-top:1px solid var(--line); cursor:pointer; transition:background .12s; }
.svb-idhead:hover { background:var(--card2); }
.svb-idhead > svg { color:var(--teal); flex:none; }
.svb-idhead b { font-size:12.5px; font-weight:800; }
.svb-idhead small { display:block; font-size:10.5px; color:var(--ink3); }
.svb-idhead .meta { margin-inline-start:auto; display:flex; gap:6px; align-items:center; }
.svb-idhead .cnt { font-size:10px; font-family:var(--mono); color:var(--ink3); background:var(--card2);
    border:1px solid var(--line); border-radius:99px; padding:2px 9px; white-space:nowrap; }
.svb-idhead .cnt.bad { color:var(--gold-on); background:var(--gold-soft); border-color:transparent;
    font-family:var(--font); font-weight:700; display:inline-flex; align-items:center; gap:4px; }
.svb-idhead .chev { color:var(--ink3); transition:transform .18s; }
.svb-top.id-open .svb-idhead .chev { transform:rotate(180deg); }
.svb-top:not(.id-open) .svb-idbody { display:none; }

/* چیپِ دوسطریِ فیلدِ شناسنامه */
.svb-idrow { display:flex; gap:8px; align-items:stretch; padding:2px 18px 13px; flex-wrap:wrap; }
.svb-idc { display:inline-flex; align-items:center; gap:9px; padding:7px 12px; border-radius:14px;
    background:var(--card2); border:1px solid var(--line); cursor:pointer; transition:.13s;
    text-align:start; color:inherit; font-family:inherit; }
.svb-idc:hover { border-color:var(--teal); }
.svb-idc > svg { flex:none; color:var(--ink3); }
.svb-idc .tx { display:flex; flex-direction:column; min-width:0; line-height:1.5; }
.svb-idc .tx b { font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; }
.svb-idc .tx b i { color:var(--red); font-style:normal; font-weight:800; margin-inline-start:1px; }
.svb-idc .tx small { font-size:9.5px; color:var(--ink3); display:flex; gap:5px; align-items:center;
    white-space:nowrap; }
.svb-idc .mb { font-size:9px; border-radius:99px; padding:0 6px; background:var(--card);
    border:1px solid var(--line); color:var(--ink3); font-weight:700; }
.svb-idc .mb.q { color:var(--teal-on); background:var(--teal-soft); border-color:transparent; }
.svb-idc .mb.z { color:var(--coral-on); background:var(--coral-soft); border-color:transparent; }
.svb-idc.is-off { border-style:dashed; }
.svb-idc.is-dim { opacity:.55; }
.svb-idc.is-warn { border-color:var(--gold); background:var(--gold-soft); }
.svb-idc.is-warn > svg { color:var(--gold); }
.svb-idc.is-warn .tx b, .svb-idc.is-warn .tx small { color:var(--gold-on); }
.svb-idc.is-warn .mb { background:transparent; border-color:currentColor; color:inherit; }
.svb-idc.on { background:var(--teal); border-color:var(--teal); box-shadow:var(--sh-btn); }
.svb-idc.on > svg, .svb-idc.on .tx b, .svb-idc.on .tx small, .svb-idc.on .tx b i { color:#fff; }
.svb-idc.on .mb { background:rgba(255,255,255,.2); border-color:transparent; color:#fff; }
.svb-idc.new { border-style:dashed; color:var(--ink3); font-size:11.5px; font-weight:700;
    gap:5px; padding-inline:14px; }
.svb-idc.new:hover { color:var(--teal); }

/* ویرایشگرِ فیلد — سطرِ سومِ همان کارت */
.svb-idedit { padding:13px 18px 15px; border-top:1px solid var(--line); background:var(--card2); }
.svb-idf { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.svb-idf .g { flex:0 0 auto; }
.svb-idf .g.wide { flex:1 1 210px; min-width:160px; }
.svb-idf label.l { display:block; font-size:10px; font-weight:700; color:var(--ink3); margin-bottom:4px; }
.svb-idf .inp { padding:7px 10px; font-size:12.5px; }
.svb-idf .sp { margin-inline-start:auto; display:flex; gap:2px; padding-bottom:3px; }
.svb-idspots { display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:11px;
    padding-top:11px; border-top:1px dashed var(--line); }
.svb-idspots .t { font-size:10.5px; font-weight:700; color:var(--ink3); flex:none; }
.svb-idspots .sc { display:inline-flex; align-items:center; gap:5px; padding:4px 6px 4px 10px;
    border-radius:99px; background:var(--card); border:1px solid var(--line); font-size:11.5px; }
.svb-idspots .sc .n { width:17px; height:17px; border-radius:5px; background:var(--card2); color:var(--ink2);
    font-size:9px; font-weight:800; font-family:var(--mono); display:grid; place-items:center; }
.svb-idspots .sc a { display:inline-flex; align-items:center; gap:5px; }
.svb-idspots .sc a:hover { color:var(--teal); }
.svb-idspots .sc form { display:inline-flex; }
.svb-idspots .sc button { border:0; background:none; color:var(--ink3); display:grid;
    place-items:center; padding:0; cursor:pointer; }
.svb-idspots .sc button:hover { color:var(--red); }
.svb-idspots select { max-width:230px; padding:5px 10px; font-size:11.5px; width:auto; }

/* ── تخته ── */
/* `position:relative` پایه‌ی خطِ راهنمای جابه‌جاییِ **ستون‌هاست** که مستقیم
   داخلِ خودِ تخته می‌نشیند (کارت و زیرمرحله خطشان داخلِ ظرفِ خودشان است). */
.svb-board { display:flex; gap:12px; align-items:flex-start; overflow-x:auto; padding-bottom:14px;
    position:relative; }
/* عرضِ ستون **ثابت** است و با تعدادِ فازها کش نمی‌آید: قبلاً با یک-دو فاز
   ستون‌ها پهن می‌شدند و با افزودنِ فازِ سوم ناگهان جمع — یعنی اندازه‌ی کارت به
   چیزی ربط داشت که به آن ربطی ندارد. */
/* ⚠ `min-width:0` حیاتی است: پیش‌فرضِ آیتمِ فلکس `min-width:auto` است، یعنی
   ستون زیرِ عرضِ min-content محتوایش نمی‌رود. ستونی که دکمه‌ی «حذف فاز» داشت
   به ۲۸۴px باد می‌کرد و ستونِ «بدون فاز» ۲۶۲ می‌ماند — یعنی عرضِ کارت به
   دکمه‌های هدر وابسته می‌شد. */
.svb-col { flex:0 0 262px; min-width:0; background:var(--card);
    border:1px solid var(--line); border-radius:var(--r); display:flex; flex-direction:column;
    transition:border-color .13s, background .13s; }
/* ⚠ کارفرما ۱۴۰۵/۰۵/۲۶: قبل از مودال‌شدنِ ویرایشگر، این ستون تا ۴۳۰px
   باد می‌کرد تا فرمِ ویرایشِ درجا جا بشود (`flex:0 0 430px`، با
   ترنزیشنِ flex-basis). حالا ویرایشگر مودال است (بخش ۶.۹)، عرضِ ستون
   ربطی به باز/بسته‌بودنِ ویرایشگر ندارد — فقط برجستگیِ ظریفِ حاشیه/سایه
   ماند تا ستونِ حاوی مرحله‌ی بازشده معلوم باشد. */
.svb-col.is-focus { border-color:var(--ring); box-shadow:var(--sh); }

.svb-col-h { display:flex; align-items:center; gap:7px; padding:11px 13px 9px;
    border-bottom:1px solid var(--line); }
.svb-col-h .dot { width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none; }
.svb-col.is-focus .svb-col-h .dot { box-shadow:0 0 0 3px var(--ring); }
.svb-col-h .rn { border:0; background:transparent; font:inherit; font-size:12.5px; font-weight:800;
    color:var(--ink); outline:0; flex:1; min-width:0; padding:0; border-bottom:1px dashed transparent; }
.svb-col-h .rn:hover, .svb-col-h .rn:focus { border-bottom-color:var(--line); }
.svb-col-h .rn::placeholder { color:var(--ink3); font-weight:400; }
.svb-col-h .rg { font-family:var(--mono); font-size:9.5px; color:var(--ink3); background:var(--card2);
    border-radius:99px; padding:1px 7px; flex:none; }
.svb-col-h .fold { border:0; background:none; color:var(--ink3); display:grid; place-items:center;
    padding:2px; border-radius:6px; flex:none; opacity:0; transition:.12s; cursor:pointer; }
.svb-col:hover .svb-col-h .fold { opacity:.7; }
.svb-col-h .fold:hover { opacity:1; color:var(--teal); background:var(--card2); }
/* ⚠ `position:relative` برای خطِ راهنمای درگ لازم است (که `position:absolute`
   داخلِ همین ظرف می‌نشیند)، و `min-height` یعنی ستونِ خالی هم هدفِ رهاکردن
   دارد — وگرنه آخرین کارتِ یک ستون هیچ‌وقت نمی‌توانست از آن بیرون بیاید. */
.svb-col-b { padding:9px; display:flex; flex-direction:column; gap:8px; min-height:64px;
    position:relative; }

/* تیغه: همان ستون، جمع‌شده. مارک‌آپش همیشه هست و فقط CSS جابه‌جا می‌کند،
   تا حالتِ جمع‌بودن از بازخوانیِ AJAX جان سالم به در ببرد. */
.svb-spine { display:none; }
.svb-col.is-spine { flex:0 0 46px; min-width:46px; max-width:46px; cursor:pointer;
    align-items:center; padding:13px 0 11px; gap:9px; background:var(--card2); }
.svb-col.is-spine > .svb-col-h, .svb-col.is-spine > .svb-col-b { display:none; }
.svb-col.is-spine .svb-spine { display:flex; flex-direction:column; align-items:center; gap:9px; }
.svb-col.is-spine:hover { border-color:var(--teal); }
.svb-spine .t { writing-mode:vertical-rl; font-size:11px; font-weight:800; color:var(--ink3);
    white-space:nowrap; overflow:hidden; max-height:190px; text-overflow:ellipsis; }
.svb-spine .ns { display:flex; flex-direction:column; gap:4px; align-items:center; }
.svb-spine .ns span { width:19px; height:19px; border-radius:6px; background:var(--card);
    border:1px solid var(--line); color:var(--ink2); font-size:9.5px; font-weight:800;
    font-family:var(--mono); display:grid; place-items:center; }
.svb-spine .ns span.warn { border-color:var(--gold); color:var(--gold-on); }

/* ── کارتِ بسته‌ی مرحله ──
   ⚠ خودِ کارت دیگر دکمه نیست (۱۴۰۵/۰۵/۲۶): داخلش سه ناحیه‌ی تعاملیِ مستقل
   هست (عنوان، دستگیره، چیپ‌های زیرمرحله) و دکمه‌ی تودرتو هم HTMLِ نامعتبر
   بود هم هر کلیک را محتاجِ `stopPropagation` می‌کرد. */
.svb-card { background:var(--card2); border:1px solid var(--line); border-radius:12px;
    padding:10px 11px; transition:border-color .13s, box-shadow .13s, opacity .13s;
    color:inherit; width:100%; }
.svb-card:hover { border-color:var(--ink3); box-shadow:var(--sh); }
.svb-card.is-off { opacity:.6; border-style:dashed; }

/* گرهی که همین حالا کشیده می‌شود: جایش نگه داشته می‌شود ولی محو است، تا
   چیدمان زیرِ دستِ کاربر نپرد (خودِ گره تا لحظه‌ی رهاکردن جابه‌جا نمی‌شود). */
.svb-card.is-drag, .svb-kid.is-drag, .svb-col.is-drag { opacity:.28; }

/* عنوانِ کارت — دکمه‌ی واقعی، پس با Tab و Enter هم باز می‌شود */
.svb-card .ttl { flex:1; min-width:0; text-align:start; border:0; background:none; padding:0;
    font:inherit; color:inherit; cursor:pointer; }
.svb-card .ttl:hover b { color:var(--teal); }

/* تغییرِ ذخیره‌نشده — همان زبانِ رنگیِ نوارِ پایین، تا کاربر بدونِ خواندن
   بفهمد کدام کارت منتظرِ تأیید است */
.svb-card.is-pending, .svb-kid.is-pending, .svb-idc.is-pending {
    border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft); }
.svb-card.is-pending::after, .svb-kid.is-pending::after, .svb-idc.is-pending::after {
    content:''; position:absolute; inset-block-start:-4px; inset-inline-end:-4px;
    width:9px; height:9px; border-radius:50%; background:var(--gold);
    border:2px solid var(--card); }
.svb-card, .svb-kid, .svb-idc { position:relative; }

/* زیرمرحله‌ها داخلِ کارتِ مادر (۱۴۰۵/۰۵/۲۰) — کارتِ مستقل نمی‌گیرند چون
   فاز و جایگاهشان از مادر می‌آید */
/* ══ ویرایشگرِ مرحله در مودال (۱۴۰۵/۰۵/۲۰ · بازچینش ۱۴۰۵/۰۵/۲۰) ══
   حالا مستقیم `.m-head`/`.m-body`/`.m-foot` استانداردِ مروارید است، پس قابِ
   موازیِ `.svb-edt*` و CSSِ تکراری‌اش (اسکرول، سرِ چسبان، ارتفاع) حذف شد —
   `.box` همه‌ی این‌ها را خودش دارد. */

/* ⚠ همه‌ی قاعده‌های این بخش `> .box >` دارند، نه نسلِ آزاد: مودالِ «آیتمِ
   تازه» یک `<dialog>`ِ تودرتو **داخلِ** همین دیالوگ است، پس با سلکتورِ نسلی
   هر چیزی که برای ویرایشگرِ مرحله نوشته شده بود روی آن هم می‌نشست — دو
   ستونی‌شدنِ فرمِ تک‌ستونی و کوچک‌شدنِ ورودی‌هایش از همین‌جا می‌آمد. */

/* سرصفحه: `.mi` شماره‌ی مرحله را نگه می‌دارد و عنوان درجا ویرایش می‌شود */
.svb-edtmodal > .box > .m-head .mi { background:var(--teal); color:var(--on-teal); font-weight:800; font-size:14px; }
/* ⚠ ورودی تمام‌عرضِ سرصفحه است، پس خطِ زیرش هم ۹۴۰px می‌شود. با رنگِ پررنگ
   یک نوارِ فیروزه‌ایِ سنگین می‌شد — آن هم همیشه، چون `showModal()` فوکوس را
   روی اولین کنترل می‌گذارد و این همان است. خطِ چین در hover فقط می‌گوید
   «ویرایش‌شدنی است»، و فوکوس یک خطِ نازکِ ساده می‌گیرد. */
.svb-edtmodal > .box > .m-head .m-ttl input { width:100%; border:0; border-bottom:1px dashed transparent;
    background:transparent; font:inherit; font-size:15px; font-weight:800; color:var(--ink);
    padding:0 0 2px; outline:0; transition:border-color .13s; }
.svb-edtmodal > .box > .m-head .m-ttl input:hover { border-bottom-color:var(--ink3); }
.svb-edtmodal > .box > .m-head .m-ttl input:focus { border-bottom-style:solid; border-bottom-color:var(--teal); }
.svb-edtmodal > .box > .m-head .m-ttl input:disabled { opacity:.7; }

/* بدنه دو ستون: راست = مرحله چه چیزی جمع می‌کند، چپ = کِی و چطور اجرا
   می‌شود. تقسیم مفهومی است، پس زیر ۸۶۰px روی هم می‌افتند نه اینکه فشرده
   شوند. خودِ چیدمانِ گرید و بستر از `.m-sheet` می‌آید (پایینِ همین فایل).

   ⚠ خطِ جداکننده‌ی بینِ دو ستون — و `padding-inline-start:24px` +
   `margin-inline-start:-12px`ِ همراهش — حذف شد (۱۴۰۵/۰۶/۰۹). از وقتی هر
   ستون بسترِ رنگیِ خودش را گرفت، همان قاعده حاشیه‌ی داخلیِ ستونِ چپ را
   نامتقارن می‌کرد: ۲۴px از یک طرف و ۱۰px از سه طرفِ دیگر. این دقیقاً همان
   «حاشیه‌ها میزون نیست»ِ گزارشِ کارفرما بود. حالا مرزِ دو ستون را فقط
   فاصله‌ی گرید می‌سازد و بستر یکی است، پس چیزی برای ناهم‌ترازی نمی‌ماند. */
@media (min-width:860px) {
    .svb-edtmodal > .box > .m-body { grid-template-columns:1fr 1fr; }
}
.svb-edtmodal > .box > .m-foot .svb-form { display:inline-flex; }
/* هشدارِ پیکربندیِ شکسته سرِ بدنه می‌نشیند و هر دو ستون را می‌گیرد */
.svb-full { grid-column:1 / -1; }

/* یادداشتِ درون‌فیلدی — جای <select> وقتی انتخابی در کار نیست */
.svb-inline-note { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink2);
    background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm);
    padding:7px 10px; line-height:1.6; }
.svb-inline-note svg { flex:none; color:var(--ink3); }

/* کارتی که مودالش باز است — تا معلوم باشد مودال مالِ کجاست */
.svb-card.is-open { border-color:var(--teal); box-shadow:0 0 0 2px var(--teal-soft); }

/* تبِ مفهومِ بازنشسته — هست ولی دعوت نمی‌کند */
.svb-tab.is-legacy { opacity:.7; border-style:dashed; }
.svb-legacy-note { display:flex; gap:10px; align-items:flex-start; margin-bottom:14px;
    background:var(--card2); border:1px dashed var(--warn, var(--line)); border-radius:12px; padding:12px 14px; }
.svb-legacy-note b { font-size:12.5px; color:var(--ink); }
.svb-legacy-note p { margin:4px 0 0; font-size:11.5px; line-height:1.9; color:var(--ink2); }

/* ── جعبه‌ی زیرمرحله‌ها ──
   ⚠ ظرفِ درگِ **مستقل** است (۱۴۰۵/۰۵/۲۶): زیرمرحله فقط داخلِ همین جعبه
   جابه‌جا می‌شود، نه بینِ مادرها و نه توی ستون. مرزِ تودرفته و پس‌زمینه‌ی
   جدا همین را می‌گوید — «اینجا یک قلمروِ دیگر است». */
.svb-kids { display:flex; flex-direction:column; gap:4px; margin-top:8px;
    padding:8px 6px 6px; border-top:1px dashed var(--line);
    margin-inline:-5px -5px; border-radius:0 0 10px 10px; position:relative; }
.svb-kids[data-kidbox] { background:color-mix(in srgb, var(--card) 55%, transparent); }
body.dnd-dragging .svb-kids[data-kidbox] { outline:1px dashed var(--line); outline-offset:-2px; }

.svb-kid { display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink2);
    background:var(--card); border:1px solid var(--line); border-radius:8px;
    padding:4px 7px; transition:.12s; }
.svb-kid:hover { border-color:var(--teal); color:var(--ink); }
.svb-kid.is-off { opacity:.6; border-style:dashed; }
.svb-kid .ktl { flex:1; min-width:0; text-align:start; border:0; background:none; padding:0;
    font:inherit; color:inherit; cursor:pointer; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
.svb-kid .kgrip { border:0; background:none; padding:0; color:var(--ink3); cursor:grab;
    display:grid; place-items:center; flex:none; opacity:0; transition:opacity .12s; }
.svb-card:hover .svb-kid .kgrip, .svb-kid .kgrip:focus-visible { opacity:.65; }
.svb-kid .kgrip:hover { opacity:1; color:var(--teal); }
.svb-kid .kgrip:active { cursor:grabbing; }
.svb-kid.is-add { width:100%; justify-content:center; border-style:dashed; color:var(--ink3);
    font:inherit; font-size:11px; cursor:pointer; }
.svb-kid.is-add:hover { color:var(--teal); }
.svb-kid i { font-style:normal; font-size:9.5px; color:var(--ink3);
    background:var(--card2); border-radius:99px; padding:1px 5px; flex:none; }
.svb-card .t { display:flex; align-items:center; gap:8px; }
.svb-card .t .n { width:22px; height:22px; border-radius:7px; background:var(--card); color:var(--ink2);
    font-size:10.5px; font-weight:800; font-family:var(--mono); display:grid; place-items:center;
    flex:none; box-shadow:var(--sh); }
.svb-card .t b { font-size:12.5px; font-weight:700; min-width:0; line-height:1.5;
    display:block; transition:color .12s; }
.svb-card .t .grip { border:0; background:none; padding:2px; color:var(--ink3); opacity:0;
    cursor:grab; transition:opacity .12s; display:grid; place-items:center; flex:none;
    border-radius:6px; }
.svb-card:hover .grip, .svb-card .grip:focus-visible { opacity:.6; }
.svb-card .grip:hover { opacity:1; color:var(--teal); background:var(--card); }
.svb-card .grip:active { cursor:grabbing; }
.svb-card .m { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.svb-card .m:empty { display:none; }

.svb-mc { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-family:var(--mono);
    color:var(--ink3); background:var(--card); border:1px solid var(--line); border-radius:99px;
    padding:2px 8px; }
.svb-mc.p { color:var(--blue-on); background:var(--blue-soft); border-color:transparent;
    font-family:var(--font); font-weight:700; }
.svb-mc.w { color:var(--gold-on); background:var(--gold-soft); border-color:transparent;
    font-family:var(--font); font-weight:700; }
.svb-mc.d { color:var(--teal-on); background:var(--teal-soft); border-color:transparent;
    font-family:var(--font); font-weight:700; }

/* ── بخش‌های ویرایشگرِ مرحله ──
   (قابِ `.svb-edt*` حذف شد — بدنه‌ی مودال حالا مستقیم `.m-body` است) */
.svb-edtmodal > .box > .m-body .seg button { padding:6px 13px; font-size:11.5px; }
.svb-edtmodal > .box > .m-body .tagchip { font-size:11.5px; padding:4px 10px; }
.svb-edtmodal > .box > .m-body .alert { font-size:11.5px; margin:0; }

/* ══ بسترِ کارتیِ بدنه‌ی مودال ══
   قاعده‌ی سطح‌ها در کلِ پروژه (خواسته‌ی صریحِ کارفرما، ۱۴۰۵/۰۶/۰۹ — «همون
   فرمتِ پرونده‌ها/بازاریابی/مالی رو قاعده کن»): **بستر تیره، کارتِ رویش
   سفید** — همان جفتِ `.board-col` + `.board-card`ِ کانبان.

   ⚠ بستر روی خودِ `.m-body` است، نه روی هر ستون. نسخه‌ی قبلی به هر ستون یک
   بسترِ جدا داد و نتیجه دو مستطیلِ تیره‌ی نابرابر شد که نه ته‌شان با هم جور
   درمی‌آمد نه حاشیه‌ی داخلی‌شان. یک بسترِ پیوسته یعنی ۱۴px حاشیه از چهار
   طرف و ۱۲px فاصله بینِ همه‌ی کارت‌ها — چه هم‌ستون، چه بین‌ستونی.
   `.m-foot` از قبل `--card2` است، پس بستر بی‌درز تا پایین ادامه پیدا می‌کند
   و فقط خطِ `border-top`ِ فوتر آن را از ناحیه‌ی دکمه‌ها جدا می‌کند. */

.svb-side { display:flex; flex-direction:column; gap:12px; min-width:0; }

/* کارت: تنها سطحِ سفیدِ داخلِ بستر.
   ⚠ `flex column` + `gap` عمدی است: با آن هیچ جزئی داخلِ کارت `margin`ِ
   درون‌خطی نمی‌خواهد و ریتمِ عمودی خودبه‌خود یکسان می‌ماند. قبلاً هر تکه
   `margin-top`ِ خودش را داشت (۹px برای فرمِ مدرک، ۱۶px برای سوییچ‌ها،
   `margin-bottom:10px` برای سربرگ) و همان‌ها فاصله‌های ناجور می‌ساختند. */
.svb-sec { display:flex; flex-direction:column; gap:10px; min-width:0;
    padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.svb-sec > .h { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800;
    color:var(--ink2); line-height:1; }
.svb-sec > .h > svg { color:var(--ink3); flex:none; }
/* شمارشِ کارت — یک قطعه در انتهای سربرگ، نه دو نشانِ پراکنده در دو سرِ آن
   («۲» چسبیده به عنوان و «۱ الزامی» آن‌سرِ کارت، که بی‌ربط به‌نظر می‌رسیدند) */
.svb-sec > .h .hm { margin-inline-start:auto; flex:none; font-size:10px; font-weight:600;
    color:var(--ink3); }
.svb-empty { font-size:11.5px; color:var(--ink3); }

/* ورودی‌های داخلِ کارت یک‌اندازه‌اند — فرقی نمی‌کند در `.svb-grid` باشند یا
   مستقیم فرزندِ کارت. قبلاً فقط گریدی‌ها کوچک می‌شدند و مثلاً textareaِ
   توضیحات یک اندازه درشت‌تر از selectِ زیرش درمی‌آمد. */
.svb-edtmodal > .box > .m-sheet .inp { padding:8px 11px; font-size:12px; border-radius:9px; }
.svb-edtmodal > .box > .m-sheet select.inp { padding-inline-end:32px; }
.svb-edtmodal > .box > .m-sheet textarea.inp { line-height:1.8; resize:vertical; }

/* گریدِ ۱۲ ستونی — تا فیلدی که دو رقم می‌گیرد (SLA) عرضِ یک <select>ِ پر از
   عنوانِ مرحله را اشغال نکند. پیش‌فرض تمام‌عرض است، پس فیلدِ تازه‌ای که کلاسِ
   عرض نگیرد به‌جای فشرده‌شدن، سطرِ خودش را می‌گیرد. */
.svb-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:10px 12px; }
/* ⚠ موبایل‌اول عمدی است: تمام‌عرض پیش‌فرض است و spanها فقط بالای ۸۲۰px فعال
   می‌شوند. اگر برعکس بنویسی، «تکی‌ستون کن»ِ داخلِ media با `.c6` هم‌وزن است
   (هر دو دو کلاس) و بی‌اثر می‌ماند — یک‌بار همین‌جا خوردمش. */
.svb-grid > * { grid-column:1 / -1; min-width:0; }
@media (min-width:821px) {
    .svb-grid > .c4 { grid-column:span 4; }
    .svb-grid > .c5 { grid-column:span 5; }
    .svb-grid > .c6 { grid-column:span 6; }
    .svb-grid > .c7 { grid-column:span 7; }
    .svb-grid > .c8 { grid-column:span 8; }
}
.svb-grid label { display:block; font-size:10px; font-weight:700; color:var(--ink3); margin-bottom:4px; }
.svb-grid label .u { font-weight:400; opacity:.8; }
/* ⚠ `.hint` مروارید به `.field` محدود است و اینجا `.field` نداریم، پس بدونِ
   این خط راهنماها هم‌اندازه‌ی متنِ عادی می‌شدند و از خودِ فیلد پررنگ‌تر. */
.svb-grid .hint { display:block; margin-top:5px; font-size:10.5px; color:var(--ink3);
    line-height:1.6; font-weight:400; }

/* سوییچ‌ها — چیدمانشان را `gap`ِ خودِ کارت می‌سازد، پس `margin` نمی‌گیرند.
   ⚠ `.sw small` در morvarid.css با `--ink3` (کم‌رنگ‌ترین توکن) است — برایِ
   یک برچسبِ کوچکِ فرعی مناسب بود، ولی اینجا زیرِ هر سوییچ یک جمله‌ی کاملِ
   توضیحِ کارکرد است؛ با ink3 کاربر گزارش داد «انگار سوییچ‌ها غیرفعالند».
   محدود به همین کارت‌ها، نه سراسری. */
.svb-sec .sw { padding:0; align-items:flex-start; }
.svb-sec .sw .track { margin-top:1px; }
.svb-sec .sw b { font-size:12px; }
.svb-sec .sw small { color:var(--ink2); font-size:10.5px; line-height:1.7; margin-top:2px; }

/* اعتبارسنجیِ زنده‌ی زیرِ سوییچِ «مرحله‌ی قرارداد» — رگرسیونِ پرونده‌ی ۵۷ */
.live-hint { display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:700;
    padding:7px 10px; border-radius:9px; }
.live-hint svg { flex:none; }
.live-hint.ok { background:var(--teal-soft); color:var(--teal-on); }
.live-hint.warn { background:var(--gold-soft); color:var(--gold-on); }

/* دیسکلوژرِ «تنظیماتِ پیشرفته» — باید همان کارتِ `.svb-sec` به‌نظر برسد، پس
   قابش را عیناً از آن می‌گیرد (۱۴px پدینگ، ۱۲px شعاع، حاشیه‌ی `--line`).
   ⚠ `.disc-head`ِ مروارید `background:var(--head-tint)` دارد؛ اینجا خنثی
   می‌شود وگرنه سربرگش با سربرگِ بقیه‌ی کارت‌ها هم‌رنگ نیست. */
.disc { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.disc .disc-head { display:flex; align-items:center; gap:7px; padding:14px; font-size:11px;
    background:transparent; }
.disc .disc-head:hover { background:var(--card2); }
.disc .disc-head > svg:first-child { color:var(--ink3); flex:none; }
.disc .disc-ttl { font-weight:800; color:var(--ink2); }
.disc .disc-sum { font-size:10px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
.disc .disc-body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.disc .disc-body > .hint { display:block; font-size:10.5px; color:var(--ink3);
    line-height:1.6; font-weight:400; }

/* دکمه‌ی افزودنِ یکنواخت — جانشینِ مینی‌فرم‌های هشت‌کنترلیِ قبلی.
   ⚠ `select` هم همین کلاس را می‌گیرد: «افزودن مدرک» یک `<select>` است و
   «افزودن آیتم» یک `<button>`، ولی دو کارتِ پشتِ سرِ هم‌اند و اگر یکی کاشیِ
   خط‌چین باشد و دیگری یک اینپوتِ پُر، همان بی‌نظمی‌ای می‌شود که گزارش شد. */
.svb-add, select.svb-add { display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; padding:9px 10px; border:1px dashed var(--line); background:transparent;
    border-radius:10px; color:var(--ink3); font:inherit; font-size:11.5px; font-weight:700;
    line-height:1.6; text-align:center; cursor:pointer; transition:.13s; }
select.svb-add { appearance:none; background-image:none; text-align-last:center;
    padding-inline-end:10px; }
.svb-add:hover, select.svb-add:hover { border-color:var(--teal); color:var(--teal); }
.svb-add.chip { width:auto; padding:4px 11px; border-radius:99px; }

/* ══════════════════════════════════════════════════════════════
   مودالِ آیتمِ اطلاعاتی — نوارِ نوع، مشخصاتِ شرطی، پیش‌نمایشِ زنده
   (ماکتِ تأییدشده‌ی ۱۴۰۵/۰۶/۰۹)
   ══════════════════════════════════════════════════════════════ */

/* ── نوارِ افقیِ نوعِ آیتم ──
   جانشینِ گریدِ هشت‌کارتیِ `.picks`: هر کاشی فقط آیکون + یک کلمه (`KINDS.short`)،
   و توضیحِ کامل یک‌بار زیرِ نوار برای نوعِ انتخاب‌شده می‌آید (`.kindhint`) — نه
   هشت‌بار ریز کنارِ هشت کاشی. نسخه‌ی قبلی دو ردیفِ کارتِ درشت بود و تنهایی
   نصفِ ارتفاعِ مودال را می‌گرفت.

   ⚠ `input[name=kind]` عمداً داخلِ هر کاشی ماند و کاشی‌ها `<button>` نشدند:
   `openChipEdit` در app-extras.js مقدارِ اولیه‌ی مودالِ ویرایش را با
   `input[name=kind][value="…"]` می‌گذارد. با دکمه، نوعِ آیتمِ درحالِ‌ویرایش
   بی‌صدا خالی می‌ماند. */
.kindbar { display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; }
.kindtile { position:relative; flex:1 1 0; min-width:74px; display:flex; flex-direction:column;
    align-items:center; gap:6px; padding:11px 5px; border:1px solid var(--line);
    border-radius:11px; background:var(--card2); color:var(--ink2); cursor:pointer;
    transition:.14s; }
.kindtile input { position:absolute; opacity:0; pointer-events:none; }
.kindtile:hover { border-color:var(--teal); background:var(--card); color:var(--ink); }
.kindtile .ki { width:30px; height:30px; border-radius:10px; background:var(--card);
    color:var(--ink2); display:grid; place-items:center; flex:none; box-shadow:var(--sh);
    transition:.14s; }
.kindtile b { font-size:10.5px; font-weight:700; white-space:nowrap; }
.kindtile:has(input:checked) { border-color:var(--teal); background:var(--teal-soft);
    color:var(--teal-on); box-shadow:0 0 0 3px var(--ring); }
.kindtile:has(input:checked) .ki { background:var(--teal); color:var(--on-teal); }

.kindhint { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink2);
    background:var(--card2); border-radius:9px; padding:8px 11px; line-height:1.7; }
.kindhint > svg { color:var(--ink3); flex:none; }
.kindhint b { color:var(--ink); font-weight:700; }

/* سگمنتِ منبع در سربرگِ کارت — کوچک‌تر از `.seg`ِ اندازه‌ی کاملِ مروارید،
   چون کنارِ عنوانِ ۱۱pxیِ کارت می‌نشیند نه سرِ صفحه. */
.svb-sec > .h .seg { margin-inline-start:auto; padding:3px; }
/* ⚠ `line-height` صریح لازم است: `.svb-sec > .h` روی ۱ است تا عنوانِ کارت با
   آیکونش دقیق هم‌تراز بماند، و بدونِ این خط دکمه‌های سگمنت همان ۱ را ارث
   می‌برند و له می‌شوند. */
.svb-sec > .h .seg button { padding:5px 12px; font-size:10.5px; line-height:1.6; }

/* ── پیش‌نمایشِ زنده ──
   عیناً بلوکی که کارشناس در صفحه‌ی پرونده می‌بیند. تا امروز تنها راهِ دیدنِ
   نتیجه، ساختنِ آیتم و رفتن به پرونده بود. با JS در `service-builder.js`
   ساخته می‌شود؛ آیکون‌هایش از `.svb-icobank` (رندرِ سرور با `<x-ic>`) کلون
   می‌شوند تا بانکِ آیکون دو نسخه نشود. */
.pv-shell { background:var(--card2); border:1px solid var(--line); border-radius:11px; padding:13px; }
.pv-lbl { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
    color:var(--ink); margin-bottom:9px; }
.pv-lbl svg { flex:none; color:var(--ink2); }
.pv-lbl .rq { color:var(--red); font-weight:800; }
.pv-lbl .pin { font-size:9.5px; font-weight:700; color:var(--gold-on); background:var(--gold-soft);
    border-radius:99px; padding:2px 8px; margin-inline-start:4px; }
.pv-lbl .pin.is-reg { color:var(--teal-on); background:var(--teal-soft); }
.pv-in { width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:9px;
    background:var(--card); color:var(--ink3); font-size:12.5px; }
.pv-in.row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pv-rows { display:flex; flex-direction:column; gap:6px; }
.pv-num { display:flex; align-items:center; gap:8px; }
.pv-num i { font-style:normal; font-size:10px; font-family:var(--mono); color:var(--ink3);
    background:var(--card); border:1px solid var(--line); border-radius:7px;
    width:22px; height:22px; display:grid; place-items:center; flex:none; }
.pv-num .pv-in { flex:1; min-width:0; }
.pv-chk { display:flex; align-items:center; gap:10px; background:var(--card);
    border:1px solid var(--line); border-radius:9px; padding:10px 12px; }
.pv-chk .bx { width:18px; height:18px; border-radius:5px; border:1.8px solid var(--ink3); flex:none; }
.pv-chk span { font-size:12.5px; font-weight:600; color:var(--ink); }
.pv-person { display:flex; align-items:center; gap:10px; background:var(--card);
    border:1px solid var(--line); border-radius:9px; padding:9px 11px; }
.pv-person .av { width:28px; height:28px; border-radius:9px; background:var(--teal-soft);
    color:var(--teal-on); display:grid; place-items:center; flex:none; }
.pv-person b { font-size:12px; font-weight:700; display:block; color:var(--ink); }
.pv-person small { font-size:10.5px; color:var(--ink3); display:block; }
.pv-add { display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
    padding:8px; border:1px dashed var(--line); border-radius:9px; background:transparent;
    color:var(--ink3); font-size:11px; font-weight:700; }
.pv-note { font-size:10.5px; color:var(--ink3); margin-top:9px; display:flex;
    align-items:center; gap:6px; line-height:1.7; }
.pv-note svg { flex:none; }

/* «رفتار» کارتِ مستقل نیست: دو سوییچ بود و یک کارتِ کامل می‌گرفت. اینجا
   پابرگِ پیش‌نمایش است چون هر دو تیک، پیش‌نمایشِ بالای سرشان را عوض می‌کنند
   (ستاره‌ی «الزامی»، برچسبِ «شناسنامه») — یعنی جایشان خودش را توضیح می‌دهد. */
.pv-beh { border-top:1px solid var(--line); padding-top:12px;
    display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
@media (max-width:560px) { .pv-beh { grid-template-columns:1fr; } }
.pv-beh .sw.is-off { opacity:.45; }

/* پنهان‌شدنِ بلوکِ سفارشی (`#sbCustom` و سوییچِ سنجاقش) از قاعده‌ی سراسریِ
   `[hidden]` بالای همین فایل می‌آید — دیگر وصله‌ی موردی لازم نیست. */
.svb-colnew { flex:0 0 150px; min-width:150px; border:1px dashed var(--line); background:transparent;
    align-items:center; justify-content:center; padding:26px 12px; color:var(--ink3); font-size:12px;
    font-weight:700; gap:7px; display:flex; border-radius:var(--r); transition:.13s; cursor:pointer; }
.svb-colnew:hover { border-color:var(--teal); color:var(--teal); }

@media (max-width:820px) {
    .svb-col, .svb-col.is-focus { flex:1 1 100%; max-width:100%; }
    .svb-board { flex-direction:column; }
    /* تکی‌ستونیِ .svb-grid لازم نیست اینجا نوشته شود — پیش‌فرضش همان است و
       spanها بالای ۸۲۰px روشن می‌شوند (بالای فایل). */
    .svb-col.is-spine { flex:1 1 100%; max-width:100%; min-width:0; flex-direction:row;
        justify-content:center; padding:10px; }
    .svb-spine .t { writing-mode:horizontal-tb; }
    .svb-col.is-spine .svb-spine { flex-direction:row; }
    .svb-spine .ns { flex-direction:row; }
}

/* `hidden` روی دکمه کار نمی‌کرد: `display` در `.btn` قاعده‌ی UA را می‌بُرد،
   پس «بازکردنِ تیغه‌ها» همیشه دیده می‌شد. */


/* دستگیره‌ی درگِ ستون + حذفِ فاز */
.svb-col-h .colgrip { border:0; background:none; padding:2px; color:var(--ink3); opacity:0;
    cursor:grab; display:grid; place-items:center; flex:none; margin-inline-start:-3px;
    transition:opacity .12s; border-radius:6px; }
.svb-col:hover .svb-col-h .colgrip, .svb-col-h .colgrip:focus-visible { opacity:.6; }
.svb-col-h .colgrip:hover { opacity:1; color:var(--teal); background:var(--card2); }
.svb-col-h .colgrip:active { cursor:grabbing; }
.svb-col-h .fold.is-del:hover { color:var(--red); }
/* نامِ فاز باید «قابلِ ویرایش» به نظر برسد، نه یک متنِ ساده */
.svb-col-h .rn { cursor:text; border-bottom:1px dashed transparent; padding-bottom:1px; }
.svb-col:hover .svb-col-h .rn { border-bottom-color:var(--line); }
.svb-col-h .rn:focus { border-bottom-color:var(--teal); }
/* ══════════════════════════════════════════════════════════════
   درگ‌واِندراپ (بازنویسیِ ۱۴۰۵/۰۵/۲۶ — Pointer Events)
   ══════════════════════════════════════════════════════════════
   نسخه‌ی قبلی HTML5 DnD بود: روی لمس اصلاً کار نمی‌کرد و در هر شلیکِ
   `dragover` واقعاً گره را جابه‌جا می‌کرد (پرشِ چشمی + بازچینشِ مداوم).
   حالا تا لحظه‌ی رهاکردن هیچ گرهی تکان نمی‌خورد؛ فقط این خط جای افتادن را
   نشان می‌دهد. یعنی حینِ حرکت صفر layout thrash. */
/* ⚠ عمودی: **لایه‌ی شناور**، نه آیتمِ فلکس. آیتمِ فلکس خودش جا می‌گرفت و
   گره‌های بعدی را ~۱۱px پایین می‌برد — یعنی هدفِ زیرِ نشانگر همان لحظه از
   زیرِ دستِ کاربر سُر می‌خورد و رهاکردن در انتهای فهرست بی‌اثر می‌شد (با CDP
   دیده شد). حالا هیچ گرهی تکان نمی‌خورد. */
/* افقی: اینجا برعکس، آیتمِ فلکس درست است — مختصاتِ RTL روی ظرفِ اسکرول‌دار
   قابلِ اعتماد نیست و جابه‌جاییِ ستون‌های پهن هم آزاردهنده نیست. */

/* شبحِ زیرِ نشانگر — کپیِ خودِ گره، تا معلوم باشد چه چیزی جابه‌جا می‌شود.
   ⚠ فقط `transform` انیمیت می‌شود (نه top/left): حرکت روی لایه‌ی composite
   می‌ماند و در فهرستِ بلند هم نمی‌لنگد. */
/* ⚠ `left`/`top`ِ فیزیکی، نه `inset-inline-start`: مبدأ با `clientX/clientY`
   ست می‌شود که فیزیکی‌اند. در RTL، `inset-inline-start` به `right` نگاشت
   می‌شود و `translate(+900px)` شبح را از لبه‌ی راست بیرون می‌انداخت — کاربر
   کارت را می‌کشید و هیچ‌چی زیرِ نشانگر نمی‌دید. */
.dnd-ghost .grip, .dnd-ghost .kgrip, .dnd-ghost .fold { display:none; }

/* حینِ کشیدن هیچ‌چیزِ دیگری نباید انتخاب یا اسکرولِ لمسی بگیرد */
body.dnd-dragging .svb-col-b { touch-action:none; }
/* ظرف‌های هدف حینِ ژست دیده می‌شوند، وگرنه کاربر نمی‌داند کجا می‌تواند رها کند */
body.dnd-dragging .svb-col:not(.is-spine) > .svb-col-b { outline:1px dashed var(--line);
    outline-offset:-3px; border-radius:10px; }

@media (prefers-reduced-motion:reduce) {
    .dnd-ghost { rotate:none; }
}

/* ══════════════════════════════════════════════════════════════
   نوارِ «تغییرِ ذخیره‌نشده»
   ══════════════════════════════════════════════════════════════
   چسبیده به پایینِ پنجره چون تصمیمِ «ذخیره کنم یا نه؟» باید همیشه در
   دسترس باشد، نه فقط وقتی کاربر تا بالای صفحه اسکرول کرده. */
.svb-bar { position:fixed; inset-inline:16px; bottom:16px; z-index:60; display:flex;
    align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r);
    background:var(--card); border:1px solid var(--gold); box-shadow:var(--sh-lg, 0 14px 40px rgba(0,0,0,.18));
    max-width:760px; margin-inline:auto; animation:svbBarIn .18s ease-out; }
.svb-bar .ic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
    background:var(--gold-soft); color:var(--gold-on); flex:none; }
.svb-bar .tx { flex:1; min-width:0; line-height:1.5; }
.svb-bar .tx b { font-size:12.5px; font-weight:800; display:block; }
.svb-bar .tx small { font-size:10.5px; color:var(--ink3); }
.svb-bar .n { font-family:var(--mono); }
.svb-bar .btn:disabled { opacity:.45; pointer-events:none; }
.svb-bar.is-shout { animation:svbShout .35s ease-in-out 2; }
/* ⚠ سومین بارِ همین دام در این فایل (`.dp-row` و `.btn` هم خط دارند):
   `display:flex` قاعده‌ی UA برای `[hidden]` را می‌بُرد، پس نوار با «۰ تغییرِ
   ذخیره‌نشده» همیشه روی صفحه می‌ماند. با CDP دیده شد، نه با تست. */

@keyframes svbBarIn { from { opacity:0; transform:translateY(10px); } }
@keyframes svbShout { 50% { transform:translateX(-5px); } }

@media (prefers-reduced-motion:reduce) {
    .svb-bar, .svb-bar.is-shout { animation:none; }
}

/* نوار روی محتوای ته صفحه نیفتد */
body.svb-dirty .svb-pane[data-pane="board"] { padding-bottom:76px; }

@media (max-width:620px) {
    .svb-bar { flex-wrap:wrap; inset-inline:10px; bottom:10px; }
    .svb-bar .tx { flex:1 1 100%; order:-1; }
}

/* حالتِ بارگذاریِ بدنه‌ی مودالِ مرحله */
.svb-loading { display:flex; align-items:center; justify-content:center; gap:10px;
    padding:64px 20px; color:var(--ink3); font-size:12.5px; }
.svb-loading.is-bad { color:var(--red); }
.svb-loading .spin { width:16px; height:16px; border-radius:50%; border:2px solid var(--line);
    border-top-color:var(--teal); animation:svbSpin .7s linear infinite; }
@keyframes svbSpin { to { transform:rotate(360deg); } }

.svb-traps { padding:0 18px 14px; display:flex; flex-direction:column; gap:8px; }

/* ⚠ `hidden` روی این‌ها بی‌اثر بود: `display:grid/flex`ِ خودِ کلاس قاعده‌ی UA
   را می‌بُرد، پس بخش‌های وابسته به «نوعِ آیتم» همیشه دیده می‌شدند. همان دامی
   که `.dp-row[hidden]` و `.btn[hidden]` بالاتر برایش خط دارند. */



/* ══════════════════════════════════════════════════════════
   ماژول مالی (۱۴۰۵/۰۵/۲۸)
   ══════════════════════════════════════════════════════════
   قاعده‌ی حاکم: **عدد باید در یک نگاه خوانده شود.** هر مبلغ tabular-nums و
   LTR است تا ستون‌های ریالی زیر هم بنشینند؛ جهتِ پول با رنگ کد می‌شود
   (ورودی فیروزه‌ای، خروجی قرمز) نه با علامتِ + و − که در RTL جابه‌جا می‌شوند. */


/* ── نوار خلاصه‌ی مالی پرونده ─────────────────────────────── */
.fin-hero { display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding:18px 22px; border-radius:var(--r); background:var(--card); box-shadow:var(--sh);
    margin-bottom:16px; }
.fin-hero .fh-main { flex:1 1 220px; min-width:0; }
.fin-hero .fh-main small { display:block; font-size:11px; color:var(--ink3); margin-bottom:4px; }
.fin-hero .fh-main .money { font-size:24px; letter-spacing:-.02em; }
.fin-hero .fh-cell { min-width:120px; }
.fin-hero .fh-cell small { display:block; font-size:11px; color:var(--ink3); margin-bottom:4px; }
.fin-hero .fh-cell .money { font-size:15px; }
.fin-hero .fh-bar { flex:1 1 180px; }

/* ── جدول پرداخت (تعهدات) ────────────────────────────────── */
.fin-plan { display:flex; flex-direction:column; }
.fin-plan-row { display:flex; align-items:center; gap:13px; padding:13px 10px; border-radius:12px; }
.fin-plan-row + .fin-plan-row { border-top:1px solid var(--line); }
.fin-plan-row:hover { background:var(--card2); }
.fin-plan-row.is-paid    { opacity:.72; }
.fin-plan-row.is-overdue { background:var(--red-soft); }
.fin-plan-row .fp-n { width:30px; height:30px; border-radius:10px; background:var(--card2);
    color:var(--ink3); display:grid; place-items:center; flex-shrink:0;
    font-family:var(--mono); font-size:11.5px; font-weight:700; }
.fin-plan-row.is-paid .fp-n { background:var(--teal-soft); color:var(--teal-on); }
.fin-plan-row .fp-t { flex:1; min-width:0; }
.fin-plan-row .fp-t b { display:block; font-size:13px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-plan-row .fp-t span { font-size:11px; color:var(--ink3); display:flex; align-items:center;
    gap:6px; flex-wrap:wrap; margin-top:2px; }
.fin-plan-row .fp-amt { text-align:end; flex-shrink:0; }
.fin-plan-row .fp-amt .money { font-size:13.5px; display:block; }
.fin-plan-row .fp-amt small { font-size:10.5px; color:var(--ink3); }
.fin-plan-row .fp-acts { display:flex; gap:4px; flex-shrink:0; }

/* گرهِ مرحله‌ای — نشانِ بصریِ «این پول منتظرِ یک کار است، نه یک تاریخ» */
.fin-link { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
    padding:2px 8px; border-radius:99px; background:var(--blue-soft); color:var(--blue-on); }

/* ── دفتر تراکنش ─────────────────────────────────────────── */
.fin-tx { display:flex; align-items:center; gap:13px; padding:12px 10px; border-radius:12px; }
.fin-tx + .fin-tx { border-top:1px solid var(--line); }
.fin-tx:hover { background:var(--card2); }
.fin-tx.is-void { opacity:.5; }
.fin-tx.is-void .money { text-decoration:line-through; }
.fin-tx .ft-ic { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.fin-tx .ft-ic.in  { background:var(--teal-soft); color:var(--teal-on); }
.fin-tx .ft-ic.out { background:var(--red-soft);  color:var(--red-on); }
.fin-tx .ft-b { flex:1; min-width:0; }
.fin-tx .ft-b b { display:block; font-size:13px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-tx .ft-b span { font-size:11px; color:var(--ink3); }
.fin-tx .ft-col { min-width:110px; font-size:12px; color:var(--ink2); }
.fin-tx .ft-col small { display:block; font-size:10.5px; color:var(--ink3); }

/* ── ستونِ دوبخشی (فرم کنار فهرست) ───────────────────────── */
.fin-split { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
@media (max-width:900px) { .fin-split { grid-template-columns:1fr; } }

/* ── ردیف کلید-مقدار فشرده در کارت‌های مالی ───────────────── */
.fin-kv { display:grid; grid-template-columns:auto 1fr; gap:9px 14px; font-size:12.5px; align-items:center; }
.fin-kv > span { color:var(--ink3); font-size:11.5px; }
.fin-kv > b { font-weight:700; text-align:end; }

/* ── پیش‌نمایشِ جدولِ پرداخت (داخلِ مودالِ تأیید و سازنده‌ی جدول) ──
   کارتِ توفال‌شده روی بسترِ مودال است، نه یک جدولِ دوم: باید در نگاهِ اول
   «نتیجه‌ی همین تنظیمات» خوانده شود نه یک بخشِ مستقل. ارتفاعش سقف دارد
   وگرنه ۳۶ قسط مودال را از صفحه بیرون می‌بُرد. */
/* ⚠ `.m-body` بلاکِ ساده است نه فلکس، پس اینجا margin چاره‌ی فاصله است نه
   gap؛ ۱۶px همان فاصله‌ی `.fgrid` است تا قاب از ردیفِ بالایش جدا دیده شود. */
.plan-prev { margin-top:16px; border:1px solid var(--line); border-radius:var(--r-sm);
    background:var(--card2); overflow:hidden; transition:opacity .15s ease; }
.plan-prev.is-busy { opacity:.5; }
.plan-prev .pp-head { display:flex; align-items:baseline; justify-content:space-between;
    gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); }
.plan-prev .pp-head b { font-size:12px; font-weight:800; }
.plan-prev .pp-head > span { font-size:11px; color:var(--ink3); }
.plan-prev .pp-head .money { font-size:12px; }
.plan-prev .pp-rows { max-height:212px; overflow-y:auto; overscroll-behavior:contain; }

.pp-row { display:flex; align-items:center; gap:10px; padding:7px 12px; }
.pp-row + .pp-row { border-top:1px solid var(--line); }
.pp-row .pp-n { width:20px; height:20px; flex:none; border-radius:6px; background:var(--card);
    color:var(--ink3); font-family:var(--mono); font-size:10.5px; display:grid; place-items:center; }
.pp-row .pp-t { flex:1; min-width:0; }
.pp-row .pp-t b { display:block; font-size:12px; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-row .pp-t span { font-size:10.5px; color:var(--ink3); }
.pp-row .money { flex:none; font-size:12.5px; }

.pp-msg { padding:16px 12px; font-size:11.5px; color:var(--ink3); text-align:center; }
.pp-msg.bad { color:var(--red); }

/* ── سطرِ گزارشِ سود/زیان ─────────────────────────────────── */
.fin-bars { display:flex; flex-direction:column; gap:11px; }
.fin-bars .fb-row { display:flex; align-items:center; gap:11px; font-size:12.5px; }
.fin-bars .fb-row .lbl { flex:0 0 170px; color:var(--ink2); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
.fin-bars .fb-row .bar { flex:1; height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.fin-bars .fb-row .bar i { display:block; height:100%; border-radius:99px; background:var(--teal); }
.fin-bars .fb-row.out .bar i { background:var(--red); }
.fin-bars .fb-row .money { flex:0 0 130px; text-align:end; font-size:12px; }

@media (max-width:620px) {
    .fin-hero { gap:12px; }
    .fin-tx .ft-col, .fin-plan-row .fp-t span { display:none; }
}

/* ── میزِ کارِ مالی — بازطراحی (۱۴۰۵/۰۶/۰۹، تأییدشده رو ماکت) ──────
   KPI اینجا یعنی «چقدر کار روی میز است»، نه پولِ ماه (آن پایینِ صفحه
   ماند، `.fin-hero` دست‌نخورده). دو صف (تصمیم/وصول) از ردیفِ جدولی به
   ستونی از کارت رفتند؛ `.grid-tray` همان زمینه‌ی تیره‌ترِ فرمولِ
   پرونده‌ها/مشتریان است، اینجا هم به‌جای اشتراکِ کلاس تکرار شد. */
.fin-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.fin-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.fin-kpi .top{display:flex;align-items:center;justify-content:space-between}
.fin-kpi .top>span{font-size:12.5px;color:var(--ink2);font-weight:600}
.fin-kpi .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.fin-kpi .val{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;margin-top:12px}
.fin-kpi .val .money{font-size:inherit;font-weight:inherit}
.fin-kpi .lbl{font-size:12px;color:var(--ink2);margin-top:4px}
.fin-kpi .lbl .money{font-size:inherit;color:inherit;font-weight:700}
.fin-kpi .trend{font-size:11.5px;display:flex;align-items:center;gap:4px;margin-top:6px}
.fin-kpi .trend.warn{color:var(--coral-on)} .fin-kpi .trend.flat{color:var(--ink3)}

/* دو صف، بغلِ هم اگر عرض برسد — زیرِ ۹۸۰px یک‌ستونی */
.fin-queues{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-bottom:16px}
.fin-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.fin-panel-head h2{font-family:var(--font-display);font-size:14.5px;font-weight:800}
.fin-panel-head p{font-size:11.5px;color:var(--ink2);margin-top:2px}
.fin-badge{font-family:var(--mono);font-size:11px;background:var(--red-soft);color:var(--red-on);
    border-radius:99px;padding:2px 9px;flex-shrink:0}

/* فهرستِ داخلِ سینی: اسکرولِ خودش را دارد تا صفِ بلند، طولِ صفحه را ندهد */
.fin-items{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;overscroll-behavior:contain}
.fin-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:10px 12px;display:flex;align-items:center;gap:10px;transition:border-color .15s;flex-wrap:wrap}
.fin-item:hover{border-color:var(--teal)}
.fi-avatar{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;color:#fff}
.fi-avatar.gold{background:linear-gradient(140deg,var(--gold),var(--gold-on))}
.fi-avatar.teal{background:linear-gradient(140deg,var(--teal),var(--teal-deep))}
.fi-who{min-width:0;flex:1}
.fi-who b{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700}
.fi-who span{display:block;font-size:11px;color:var(--ink2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-amt{text-align:end;flex-shrink:0}
.fi-amt small{display:block;font-size:10px;color:var(--ink3);margin-bottom:2px}
.fi-amt .money{font-size:13px}

.fin-empty{width:100%;text-align:center;padding:34px 16px;color:var(--ink3)}
.fin-empty svg{margin:0 auto 10px;display:block}
.fin-empty b{display:block;font-size:13px;color:var(--ink);font-weight:700;margin-bottom:3px}
.fin-empty p{font-size:11.5px}

/* «این ماه» — نوارِ فشرده، نه کارت. اولین نسخه (۱۴۰۵/۰۶/۰۹) کارتِ
   ۱۸pxپدینگِ تهِ صفحه با `.pulse-strip{display:flex;gap:26px}` بود:
   بدونِ `justify-content`، سلول‌ها بدونِ کشیده‌شدن سمتِ راستِ کارت
   جمع می‌شدند و نیمِ چپِ کارت خالی می‌ماند. کارفرما همان روز گفت
   باریک‌تر و بالاتر — الان یک نوارِ تک‌خطی (نه کارتِ جدا) زیرِ KPI است،
   با زمینه‌ی `--card2` تا از KPIهای سفید کم‌رنگ‌تر دیده شود (خبر است
   نه کار). عرضش را خودِ محتوا تعیین می‌کند، نه گریدِ کاملِ صفحه. */
.fin-pulse{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
    background:var(--card2);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:12px 16px;margin-bottom:16px}
.fp-head{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.fp-head b{font-family:var(--font-display);font-size:13px;font-weight:800}
.fp-head a{font-size:11px;color:var(--teal);font-weight:700}
.fp-stats{display:flex;gap:20px;flex-wrap:wrap}
.fp-stat{display:flex;flex-direction:column;gap:2px}
.fp-stat small{font-size:10.5px;color:var(--ink3)}
.fp-stat .money{font-size:13px}
.fp-accounts{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.acc-tile{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:99px;padding:6px 13px 6px 8px}
.acc-tile .ai{width:22px;height:22px;border-radius:50%;background:var(--card2);color:var(--ink2);display:grid;place-items:center;flex-shrink:0}
.acc-tile b{font-size:11.5px;font-weight:700}
.acc-tile .money{font-size:11.5px;margin-inline-start:6px}

@media (max-width:1100px){ .fin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ⚠ زیرِ ۵۲۰px دوستونه هم جا نمی‌شد: دو کارتِ ۲۰۲px + گپ از عرضِ ۴۲۰ بیرون
   می‌زد و کلِ صفحه ۷px اسکرولِ افقی می‌گرفت (روی موبایلِ واقعی دیده شد، نه
   در دسکتاپ). عددِ KPIِ مالی بلند است، پس تک‌ستونه می‌شود نه کوچک‌تر. */
@media (max-width:520px){ .fin-kpis{grid-template-columns:1fr} }
@media (max-width:980px){ .fin-queues{grid-template-columns:1fr} }
@media (max-width:620px){ .fin-item{gap:8px} .fin-pulse{gap:14px} .fp-accounts{margin-inline-start:0} }

/* سگمنتِ «دفتر» با لینک (نه button) — .seg در مروارید فقط button را استایل
   می‌کند و اینجا هر نما مسیرِ خودش را دارد (قابلِ بوکمارک/بازکردن در تب). */

/* ══════════════════════════════════════════════════════════════
   چیدمانِ کارتی — پاسخ به کارفرما (۱۴۰۵/۰۶/۰۱):
   «خیلی همه‌چیز عمودی و زیرِ هم است؛ خیلی چیزها را می‌شود کارتی
    کرد که گرید بغلِ هم باشد. فرم‌ها اسکرول‌رزمن‌اند با سطرهای کشیده.»

   `.main` هیچ max-width ندارد، پس روی مانیتورِ عریض یک ستونِ عمودی
   نصفِ صفحه را خالی می‌گذارد و کاربر را وادار به اسکرول می‌کند.
   ⚠ عمداً auto-fit، نه breakpointِ دستی: تعدادِ ستون را **عرضِ واقعی**
   تعیین می‌کند، پس همین کلاس هم در `.main`ِ عریض کار می‌کند هم داخلِ
   ستونِ ۳۲۰پیکسلیِ `.fin-split` (آنجا خودش یک‌ستونی می‌شود).
   ══════════════════════════════════════════════════════════════ */

/* فیلدِ تمام‌عرض داخلِ .fgrid — کوتاه‌نویسیِ همان .span2 برای c3 هم */
.fgrid .span-all { grid-column:1/-1; }

/* ردیف‌های کلید-مقدار در چند ستون — به‌جای فهرستِ عمودیِ تک‌ستونه
   در عرضِ کاملِ صفحه (مانده‌ی حساب‌ها، خلاصه‌ها). */
/* ⚠ خطِ جداکننده‌ی `.dl-row + .dl-row` در گرید سرِ ستون‌ها هم می‌افتد
   (هم‌سایگی در DOM است نه در چیدمان). داخلِ گرید gap کارِ جداسازی را می‌کند. */

/* ══════════════════════════════════════════════════════════════════
   مرکز مدارک — بازطراحیِ ۱۴۰۵/۰۶/۰۱ (§۶.۲۱.۱)
   سه نمای هم‌سطح، سرچِ زنده، و بایگانیِ شخص‌محور در پنلِ کشویی.
   ══════════════════════════════════════════════════════════════════ */

/* ── سه نما: کارتِ آمار که خودش دکمه‌ی ناوبری است ──
   یک کنترل به‌جای «ردیف KPI + ردیف تب». شکل باید رفتار را برساند:
   hover بالا می‌آید، نمای فعال حلقه‌ی فیروزه‌ای + نوارِ بالا می‌گیرد. */
.dlenses { grid-template-columns:repeat(3,1fr); }
.dlens {
    display:block; text-decoration:none; color:inherit; cursor:pointer;
    position:relative; overflow:hidden;
    transition:transform .14s, border-color .14s, box-shadow .14s;
}
.dlens::before {
    content:""; position:absolute; inset-inline:0; top:0; height:3px;
    background:var(--teal); transform:scaleX(0); transition:transform .16s;
}
.dlens:hover { transform:translateY(-2px); border-color:var(--ink3); }
.dlens:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.dlens.on { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal); }
.dlens.on::before { transform:scaleX(1); }
.dlens .top span { font-size:12.5px; color:var(--ink2); }
.dlens.on .top span { color:var(--ink); font-weight:600; }

/* ── سرچِ زنده ── */

/* ── ردیف‌های نما ──
   ⭐ ستون‌بندیِ ثابت با grid، نه flex. با flex هر سطر عرضِ خودش را از
   محتوایش می‌ساخت: پرونده‌ای با ۳ چیپ، ستونِ نوارِ پیشرفت را جای دیگری
   می‌انداخت تا پرونده‌ای با ۱ چیپ. نتیجه سه ناهماهنگیِ هم‌ریشه بود
   (چیپ‌ها، دکمه‌ها، نوارها) و چشم نمی‌توانست دو پرونده را مقایسه کند. */
.drows .row {
    display:grid; align-items:center; gap:12px;
    grid-template-columns:38px minmax(150px,1.1fr) minmax(0,2fr) 128px 208px;
}
.drows .row.qrow { grid-template-columns:46px minmax(170px,1.6fr) 104px 116px 190px; }
.dneed { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.dneed .chip { font-size:11px; }
.dacts { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.dsent { font-size:11px; color:var(--ink3); white-space:nowrap; }
.dsent.is-bad { color:var(--coral-on); display:inline-flex; align-items:center; gap:4px; }
.dhint { font-size:11.5px; color:var(--ink3); }
.qrow .col small { display:block; font-size:10.5px; color:var(--ink3); }
.qrow .is-late { color:var(--gold-on); font-weight:600; }

/* نوارِ پیشرفت: طولِ ظرف ثابت، و رنگِ پُرشدگی وضعیت را می‌گوید — نوارِ
   همیشه‌فیروزه‌ای پرونده‌ی ۲۰٪ را همان‌قدر «سالم» نشان می‌داد که ۹۰٪ را. */
.drows .stage { width:128px; }
.drows .stage small { display:block; font-size:10.5px; color:var(--ink3); margin-bottom:5px; white-space:nowrap; }
.drows .rbar { width:100%; }

/* دکمه‌ی «رد» برچسب دارد، نه فقط یک ضربدرِ کم‌رنگ: عملِ برگشت‌ناپذیر باید
   به‌اندازه‌ی جفتش دیده شود، وگرنه کاربر فقط «تأیید» را می‌بیند. */
.btn-reject { border:1px solid var(--red-soft); background:var(--card); color:var(--red-on); }
.btn-reject:hover { border-color:var(--red); background:var(--red-soft); }

/* ── تصویرِ بندانگشتیِ مدرک ── */
.dthumb {
    position:relative; width:46px; height:46px; flex-shrink:0; cursor:pointer;
    border-radius:10px; border:1px solid var(--line); background:var(--card2);
    display:grid; place-items:center; color:var(--ink3); overflow:hidden; padding:0;
    transition:border-color .14s, color .14s;
}
.dthumb:hover { border-color:var(--teal); color:var(--teal); }
.dthumb img { width:100%; height:100%; object-fit:cover; }
.dthumb.sm { width:36px; height:36px; }
.dpages {
    position:absolute; inset-block-end:-5px; inset-inline-end:-5px;
    background:var(--ink); color:var(--card); border-radius:999px;
    font-size:9.5px; min-width:16px; height:16px; display:grid; place-items:center; padding:0 4px;
}

/* ── گریدِ اشخاص (بایگانی) ──
   نام روی سطرِ خودش تمامِ عرض را دارد و می‌پیچد؛ نوار سطرِ دوم است.
   نسخه‌ی اول همه را در یک سطر چیده بود و نامِ بلند با سه‌نقطه بریده
   می‌شد — یعنی همان چیزی که کاربر دنبالش می‌گردد ناخوانا بود. */
.pgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.pcard {
    display:grid; gap:11px; text-align:start; cursor:pointer;
    background:var(--card); border:1px solid var(--line); border-radius:var(--r);
    padding:13px 14px; color:inherit; font:inherit;
    transition:transform .14s, border-color .14s;
}
.pcard:hover { transform:translateY(-2px); border-color:var(--teal); }
.pcard:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.pc-top { display:flex; align-items:center; gap:11px; }
.pc-body { flex:1; min-width:0; }
.pc-body b { display:block; font-size:13px; line-height:1.4; }
.pc-body span { font-size:11px; color:var(--ink3); }
.pc-meter { display:flex; align-items:center; gap:9px; }
.pc-meter .rbar { flex:1; }
.pc-meter small { font-size:10.5px; color:var(--ink3); flex-shrink:0; white-space:nowrap; }
.pcard .chip { flex-shrink:0; font-size:10.5px; align-self:flex-start; }

/* ── پنلِ کشوییِ بایگانیِ شخص (روی .ldrawer سرنخ می‌نشیند) ── */
.pd-head {
    display:flex; align-items:center; gap:10px; padding:14px 16px;
    border-bottom:1px solid var(--line); background:var(--head-tint); flex-shrink:0;
}
.pd-body { padding:14px 16px; overflow:auto; flex:1; }
.pd-sec { font-size:11px; color:var(--ink3); font-weight:600; margin:16px 0 8px; }
.pd-cases { display:flex; flex-wrap:wrap; gap:6px; }
.pd-doc { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.pd-doc:last-of-type { border-bottom:0; }
.pd-doc b { display:block; font-size:12.5px; }
.pd-doc span { font-size:11px; color:var(--ink3); }

@media (max-width:1100px) {
    /* ستون‌های ثابت جا نمی‌شوند: به یک ستونِ عمودی می‌ریزند، ولی داخلِ
       هر سطر همه‌چیز هم‌تراز می‌ماند چون عرضِ ظرف یکی است. */
    .drows .row, .drows .row.qrow { grid-template-columns:38px 1fr; }
    .drows .dneed, .drows .stage, .drows .dacts, .qrow .col { grid-column:2; width:auto; }
    .drows .dacts { justify-content:flex-start; }
    .qrow .col { display:flex; gap:6px; align-items:baseline; }
    .qrow .col small { display:inline; }
}

@media (max-width:900px) {
    /* سه کارت به‌عنوانِ سوییچِ نما فشرده می‌شوند، نه ستونی — ناوبری
       باید یک‌جا دیده شود. */
    .dlenses { gap:8px; }
    .dlens { padding:11px 10px; }
    .dlens .trend { display:none; }
    .dlens .val { font-size:20px; margin-top:8px; }
    .dlens .top span { font-size:11.5px; }
    .dsearch { min-width:100%; }
}

/* ── سلولِ کسری، حالا کلیک‌شدنی ──
   دکمه است نه div: با کیبورد و صفحه‌خوان هم باز می‌شود. استایلِ بومیِ
   دکمه کامل ری‌ست می‌شود تا مثلِ بقیه‌ی سلول‌های ردیف دیده شود. */
button.dneed {
    background:none; border:0; padding:6px 8px; margin:-6px -8px; font:inherit;
    color:inherit; text-align:start; cursor:pointer; border-radius:10px;
    align-content:center; transition:background .14s;
}
button.dneed:hover { background:var(--card2); }
button.dneed:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.dneed-cta {
    display:inline-flex; align-items:center; gap:4px; font-size:10.5px;
    color:var(--teal-on); opacity:0; transition:opacity .14s; white-space:nowrap;
}
button.dneed:hover .dneed-cta, button.dneed:focus-visible .dneed-cta { opacity:1; }

/* ── اسلاتِ بارگذاری داخلِ مودالِ کسری ── */
.gslot { border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 13px; margin-bottom:10px; }
.gslot:last-child { margin-bottom:0; }
.gslot-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.gslot-head b { font-size:13px; }
.gslot-head .chip { flex-shrink:0; font-size:10.5px; }
.gslot-owner {
    display:inline-flex; align-items:center; gap:4px;
    font-size:11px; color:var(--ink3); margin-inline-start:6px;
}
.gslot-or { text-align:center; font-size:11px; color:var(--ink3); margin:9px 0; }
.gslot-part { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.gslot-part > span {
    flex-shrink:0; min-width:58px; font-size:11.5px; color:var(--ink2);
}
.gslot-part .inp { flex:1; }
.gslot-form .inp[type=file] { width:100%; }
.gslot-foot { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.gslot-foot .chk { font-size:11.5px; }

@media (max-width:1100px) {
    /* در حالتِ ستونی، سلولِ کسری تمامِ عرض را می‌گیرد */
    button.dneed { margin-inline:0; }
}

/* ══════════════════════════════════════════════════════════════════
   کاشیِ آپلود — درگ‌ودراپ + پیش‌نمایش + پیشرفتِ دایره‌ای (§۶.۲۲).
   از ماکتِ تأییدشده کپی شد؛ سه رفعِ [hidden] از همان‌جا آمده — بدونشان
   کلاسِ display صریح قاعده‌ی [hidden] مرورگر را می‌بَرد (همان دامِ
   .dp-row[hidden]/.tabs[hidden] که این پروژه قبلاً چند بار دیده).
   ══════════════════════════════════════════════════════════════════ */

/* هرگز hidden — فقط دیداری کنار رفته؛ چیدمان و اعتبارسنجیِ بومی هنوز می‌بینندش */









/* ── پنلِ «آپلود با موبایل» — از ماکتِ تأییدشده کپی شد ── */
.ru-panel-wrap { padding: 4px 0; }
.ru-panel { display: flex; gap: 14px; align-items: flex-start; }
.ru-qrbox {
    flex-shrink: 0; width: 140px; height: 140px; border-radius: var(--r-sm);
    background: #fff; border: 1px solid var(--line); display: grid; place-items: center; padding: 6px;
}
.ru-qrbox img { width: 100%; height: 100%; }
.ru-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ru-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.ru-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); animation: ruPulse 1.4s ease-in-out infinite; }
@keyframes ruPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.ru-hint { font-size: 11px; color: var(--ink3); line-height: 1.7; }
.ru-link { background: var(--card2); border-radius: 8px; padding: 6px 9px; width: fit-content; }
.ru-link span { font-size: 11px; }
.ru-expiry { font-size: 10.5px; color: var(--ink3); }

.ru-done { display: flex; align-items: center; gap: 12px; }
.ru-done-thumb {
    width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
    background: var(--teal-soft); color: var(--teal-on); display: grid; place-items: center;
}
.ru-done b { display: block; font-size: 12.5px; color: var(--teal-on); }
.ru-done span { font-size: 11px; color: var(--ink3); }

@media (max-width: 520px) {
    .ru-panel { flex-direction: column; align-items: center; text-align: center; }
    .ru-info { align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════
   گزارش‌های مدیریتی (۱۴۰۵/۰۶/۰۹) — نمودار به‌جای ردیفِ متنی.
   این صفحه فهرستِ مرورپذیر یا صفِ کاری نیست، آماره‌ست؛ فرمولِ
   KPI+پیل+گریدِ صفحاتِ دیگر اینجا صدق نمی‌کند (نگاه کنید به
   pipeline-list-design-standard در حافظه). رنگ‌ها طبقِ راهنمای
   طراحیِ نمودارِ پروژه انتخاب/اعتبارسنجی شدند: وضعیت‌ها همان نگاشتِ
   چیپِ `admin.cases._status`، نه پالتِ تازه.
   ══════════════════════════════════════════════════════════════════ */
.rpt-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.rpt-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.rpt-kpi .top{display:flex;align-items:center;justify-content:space-between}
.rpt-kpi .top>span{font-size:12.5px;color:var(--ink2);font-weight:600}
.rpt-kpi .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.rpt-kpi .val{font-size:26px;font-weight:700;line-height:1;margin-top:12px}

.rpt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:start}
.rpt-empty{text-align:center;padding:24px 16px;color:var(--ink3);font-size:12px}

/* ── راهنما (legend) — همیشه برای >=۲ سری، هیچ‌وقت فقط رنگ ── */

/* ── ردیفِ نواری — ضخامتِ نوار <=۲۲px، انتهای گِردِ ۴px، پایه‌ی مربع.
   تولتیپِ سبک فقط CSSِ روی هاور/فوکوس، چون مقدار از قبل رویِ خودِ
   نوار (bhead) هم برچسب دارد — تولتیپ فقط تقویت می‌کند، دروازه نیست. */


:root[data-theme="dark"] .bar-tip{background:var(--card2);color:var(--ink);border:1px solid var(--line)}

/* ── نمودارِ خطیِ روند ── */
:root[data-theme="dark"] .trend-tooltip{background:var(--card2);color:var(--ink);border:1px solid var(--line)}

@media (max-width:900px){
    .rpt-kpis{grid-template-columns:repeat(2,1fr)}
    .rpt-grid{grid-template-columns:1fr}
}

/* ══ دفترِ مالی: قراردادها / تعهدات / سندها (۱۴۰۵/۰۶/۰۹) ═══════════════
   هر سه با هم به استانداردِ لیست‌محور رفتند، پس برخلافِ `.cust-*`/`.case-*`
   اینجا **یک** خانواده‌ی کلاس برای هر سه نوشته شد نه سه کپی: اینها سه نمای
   یک ماژول‌اند و با هم عوض می‌شوند؛ سه کپی یعنی دفعه‌ی بعد دوتایش یادمان
   می‌رفت. KPI هم از `.fin-kpi`ِ میزِ کار قرض گرفته شد (همان ماژول، همان نقش).

   ⚠ پیش از افزودنِ کلاس با پیشوندِ `led-`، در همین فایل گرپ شد که آزاد است
   — همان درسِ تصادمِ `.case-grid`. */

.led-toolrow{display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-bottom:14px;flex-wrap:wrap}

/* فیلترهای چندمقداری (حساب/سرفصل/بازه) — پیل نمی‌شوند، پس ردیفِ فشرده */
.led-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.led-filters .inp{width:auto;min-width:0;flex:0 1 auto;padding-block:7px;font-size:12.5px}
.led-filters input[type="date"]{flex:0 0 145px}
.led-dash{font-size:11.5px;color:var(--ink3)}

/* ── گریدِ کارتی: فقط قراردادها (موجودیتِ مرورپذیر) ───────────── */
/* ⚠ `minmax(0,1fr)` نه `1fr`: پیش‌فرضِ `1fr` یعنی `minmax(auto,1fr)` و با
   عنوانِ `nowrap`ِ کارت، ترک از سهمِ خودش پهن‌تر می‌شد و صفحه در RTL از لبه
   بیرون می‌زد (اسکرولِ افقی). `.cust-grid` این را نداشت چون عنوانش می‌شکند. */
.led-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

.led-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px;
    display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
    transition:border-color .15s,box-shadow .15s}
.led-card:hover{border-color:var(--teal);box-shadow:var(--sh)}
.led-card .top{display:flex;align-items:flex-start;gap:9px}
.led-card .name{font-family:var(--font-display);font-weight:700;font-size:13px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.led-card .meta{font-size:11.5px;color:var(--ink2);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.led-card .top .chip{margin-inline-start:auto;flex-shrink:0}
.led-card .foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    border-top:1px dashed var(--line);padding-top:8px;margin-top:2px}
.led-card .meter-row{gap:8px}
.led-card .meter-row .lbl{flex:none;font-size:11px;color:var(--ink3)}

.led-amt{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.led-amt .money{font-size:15px}
.led-amt small{font-size:11px;color:var(--ink3);font-family:var(--mono)}

.led-avatar{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
    background:var(--teal-soft);color:var(--teal-on)}
.led-avatar.blue{background:var(--blue-soft,var(--teal-soft));color:var(--blue-on,var(--teal-on))}

.led-stat{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2);min-width:0}
.led-stat svg{color:var(--ink3);flex:none}

/* ── فهرستِ ستونی: تعهدات و سندها ─────────────────────────────
   ⚠ عمداً گریدِ چندستونه نیست. هر سطر دکمه‌ی اقدام دارد و ستون‌هایش
   (تاریخ/مبلغ/مانده) باید بینِ سطرها هم‌تراز بمانند تا چشم بتواند عمودی
   مقایسه کند — همان درسی که در میزِ کار گرفتیم: گریدِ چندستونه برای مرورِ
   آزاد است، فهرستِ اولویت‌دار ستونی می‌ماند. */
.led-list{display:flex;flex-direction:column;gap:8px}

.led-row{position:relative;background:var(--card);border:1px solid var(--line);border-radius:11px;
    padding:11px 13px;display:flex;align-items:center;gap:13px;overflow:hidden;
    transition:border-color .15s}
.led-row:hover{border-color:var(--teal)}

/* ⚠ معوق با **نوارِ لبه** علامت می‌خورد نه با پُرکردنِ کارت.
   دو دلیلِ عینی، هردو روی صفحه‌ی واقعی دیده شد:
   (۱) `.chip.r` خودش `background:var(--red-soft)` دارد — روی کارتِ هم‌رنگ
       کاملاً ناپدید می‌شد، یعنی برچسبِ وضعیت را از دست می‌دادیم.
   (۲) وقتی ۱۲ ردیف از ۱۸ معوق است، دوازده کارتِ صورتیِ پشتِ هم یک توده‌ی
       واحد می‌شوند و مرزِ سطرها گم می‌شود.
   قاعده‌ی سطح‌ها هم همین را می‌گوید: بستر تیره، کارت سفید.
   نوار به‌تنهایی کافی است: حاشیه‌ی قرمزِ دورِ کارت هم امتحان شد و روی
   دوازده ردیفِ معوق صفحه را به یک دیوارِ قرمز تبدیل می‌کرد — نشانه وقتی
   همه‌جا باشد دیگر نشانه نیست. */
.led-row.is-overdue::before{content:'';position:absolute;inset-block:0;
    inset-inline-start:0;width:3px;background:var(--red)}

.led-who{flex:1;min-width:0}
.led-who b{display:block;font-family:var(--font-display);font-size:13px;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.led-who > span{font-size:11.5px;color:var(--ink2);display:flex;align-items:center;
    gap:5px;flex-wrap:wrap;margin-top:2px}

.led-col{flex:0 0 auto;min-width:92px;font-size:12.5px}
.led-col small{display:block;font-size:10.5px;color:var(--ink3);margin-bottom:2px}
.led-col .money{font-size:12.5px}

/* سندها با `.fin-tx` رندر می‌شوند (`_txrow`)، که کارتِ خودش را نداشت —
   داخلِ سینی باید مثلِ `.led-row` کارت شود، وگرنه روی بسترِ تیره شناور بود. */
.led-list > .fin-tx{background:var(--card);border:1px solid var(--line);
    border-radius:11px;padding:11px 13px}
.led-list > .fin-tx:hover{border-color:var(--teal)}

@media (max-width:1100px){
    .led-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
    .led-row{flex-wrap:wrap}
    .led-who{flex:1 1 100%;order:-1}
}
@media (max-width:620px){
    .led-toolrow{align-items:stretch}
    .led-grid{grid-template-columns:1fr}
    .led-filters .inp{flex:1 1 100%}
    .led-filters input[type="date"]{flex:1 1 40%}
}

/* ══ حسابِ یک پرونده (۱۴۰۵/۰۶/۰۹) ══════════════════════════════════
   همان اسکلتِ صفحاتِ دفترِ مالی، پس `.fin-kpi`/`.grid-tray`/`.led-*` را
   قرض می‌گیرد. فقط «خلاصه‌ی قرارداد» کلاسِ خودش را دارد. */

/* سربرگِ هر بخش: عنوانِ پررنگ + توضیحِ کم‌رنگ + اقدامِ ته‌ردیف.
   ⚠ `:not([class])` عمدی است — بدونش قاعده روی `<span class="chip">`ِ
   داخلِ همین سربرگ هم می‌نشست و رنگِ چیپِ وضعیت را می‌خورد (هم‌ویژگی با
   `.chip.b` ولی دیرتر در فایل، پس برنده می‌شد). */
.grid-head{flex-wrap:wrap}
.grid-head > span:not([class]){color:var(--ink3);font-size:11.5px}

/* ── خلاصه‌ی خواندنیِ قرارداد ─────────────────────────────────
   کارتِ سفید روی سینیِ تیره — قاعده‌ی سطح‌ها. داخلش `gap` است نه
   `margin`، تا ریتمِ عمودی خودکار یکسان بماند. */
.cf-contract{background:var(--card);border:1px solid var(--line);border-radius:11px;
    padding:14px;display:flex;flex-direction:column;gap:12px}

.cf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px 16px}
.cf-fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.cf-fact small{font-size:10.5px;color:var(--ink3)}
.cf-fact b{font-size:13px;font-weight:700;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-fact .money{font-size:13px}
/* خالص، عددی است که کاربر واقعاً دنبالش می‌گردد — با اندازه جدا می‌شود نه با رنگِ پس‌زمینه */
.cf-fact.is-net b, .cf-fact.is-net .money{font-size:16px;color:var(--teal-on)}

.cf-desc{font-size:12px;color:var(--ink2);border-top:1px dashed var(--line);padding-top:11px}
.cf-acts{display:flex;gap:8px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:11px}

/* ── افزوده‌های `.led-row` برای جدولِ پرداخت ─────────────────── */
.led-row .led-n{width:26px;height:26px;flex:none;border-radius:8px;background:var(--card2);
    color:var(--ink3);font-family:var(--mono);font-size:11px;display:grid;place-items:center}
.led-row.is-done .led-n{background:var(--teal-soft);color:var(--teal-on)}
.led-row.is-done{opacity:.72}
.led-acts{display:flex;align-items:center;gap:4px;flex:none}

/* جمعِ ته‌فهرست: سطرِ خودش کارت نیست، پس روی بسترِ سینی می‌نشیند */
.led-sum{display:flex;align-items:center;justify-content:flex-end;gap:8px;
    padding:6px 13px 0;font-size:11.5px;color:var(--ink3)}
.led-sum .money{font-size:12.5px}
.led-sum .sep{color:var(--line)}

@media (max-width:820px){
    .led-acts{margin-inline-start:auto}
}

/* ══ رسیدِ سندِ مالی (۱۴۰۵/۰۶/۰۹) ════════════════════════════════════
   یک بدنه، دو نما: `.rc-view` (رسید) و `.rc-edit` (فرمِ اصلاح). جابه‌جایی با
   کلاسِ `is-editing` روی ظرف، بدونِ رفت‌وبرگشتِ دوباره به سرور. */

.rc-loading{padding:26px 12px;text-align:center;font-size:12px;color:var(--ink3);
    display:flex;align-items:center;justify-content:center;gap:7px}

.rc-edit{display:none}
.rc.is-editing .rc-view{display:none}
.rc.is-editing .rc-edit{display:block}
.rc-edit .fgrid{margin-bottom:14px}
.rc-edit-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* سربرگِ برگه — فقط در چاپ. در مودال، سرِ خودِ مودال همین را می‌گوید. */
.rc-letterhead{display:none;align-items:flex-start;justify-content:space-between;
    gap:16px;padding-bottom:14px;margin-bottom:16px;border-bottom:2px solid var(--ink)}
.rc-letterhead b{display:block;font-family:var(--font-display);font-size:14px;font-weight:800}
.rc-letterhead small{font-size:11px;color:var(--ink2)}
.rc-lh-l{text-align:end}

/* مُهرِ ابطال — سند حذف نمی‌شود، پس باید در نگاهِ اول معلوم باشد */
.rc-void{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;margin-bottom:14px;
    border:1px solid var(--red);border-radius:var(--r-sm);background:var(--red-soft)}
.rc-void svg{color:var(--red);flex:none;margin-top:1px}
.rc-void b{display:block;font-size:12.5px;font-weight:800;color:var(--red-on)}
.rc-void span{font-size:11.5px;color:var(--ink2)}

/* مبلغ — تنها عددی که باید از دو متری خوانده شود */
.rc-amount{text-align:center;padding:18px 12px;border-radius:var(--r-sm);
    background:var(--card2);border:1px solid var(--line);margin-bottom:16px}
.rc-amount small{display:block;font-size:11.5px;color:var(--ink3);margin-bottom:6px}
.rc-amount .money{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.02em}
.rc-amount.is-in  .money{color:var(--teal-on)}
.rc-amount.is-out .money{color:var(--coral-on)}
.rc-amount.is-void .money{text-decoration:line-through;opacity:.6}

.rc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:13px 16px;
    margin-bottom:16px}
.rc-fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.rc-fact small{font-size:10.5px;color:var(--ink3)}
.rc-fact b{font-size:12.5px;font-weight:700;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rc-desc{border-top:1px dashed var(--line);padding-top:12px;margin-bottom:14px}
.rc-desc small{display:block;font-size:10.5px;color:var(--ink3);margin-bottom:4px}
.rc-desc p{font-size:12.5px;line-height:1.8}

.rc-sec-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
    margin-bottom:9px;color:var(--ink2)}
.rc-sec-h svg{color:var(--teal)}

/* تخصیص‌ها — «این پول بابتِ چه نشست» */
.rc-alloc{border-top:1px dashed var(--line);padding-top:13px;margin-bottom:14px}
.rc-alloc-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px}
.rc-alloc-row + .rc-alloc-row{border-top:1px solid var(--line)}
.rc-alloc-row > span:first-child{flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-alloc-row small{font-size:10.5px;color:var(--ink3);flex:none}
.rc-alloc-row .money{flex:none;font-size:12.5px}
.rc-alloc-row.is-rest > span:first-child{color:var(--ink3)}

.rc-note{font-size:11.5px;color:var(--ink3);line-height:1.8;
    border-top:1px dashed var(--line);padding-top:12px;margin-bottom:14px}

.rc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:11px;font-size:10.5px;color:var(--ink3)}

/* برگه‌ی مستقلِ چاپ */
.rc-sheet{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    padding:26px;max-width:760px;margin:0 auto}

/* سطرِ سند در دفتر حالا کلیک‌شدنی است */
.fin-tx.js-tx-open{cursor:pointer}

@media print{
    /* اپلیکیشن می‌رود، فقط برگه می‌ماند — همان قاعده‌ی «نمای کلیِ پرونده» */
    .rc-sheet{border:0;border-radius:0;padding:0;max-width:100%;box-shadow:none}
    .rc-letterhead{display:flex}
    .rc-edit{display:none !important}
    .rc-amount{background:transparent;border:1px solid #999}
    .rc-alloc,.rc-desc,.rc-foot{break-inside:avoid;page-break-inside:avoid}
    /* ⚠ `auto-fit` روی عرضِ A4 مشخصات را تا هفت ستون باز می‌کرد و برگه
       شبیهِ بنر می‌شد نه سند. سه ستونِ ثابت، مثلِ فرم‌های کاغذی. */
    .rc-facts{grid-template-columns:repeat(3,1fr);gap:14px 20px}
}

/* ══ ورودیِ تاریخِ شمسی (.js-jdate) — پیکرِ کوچکِ بازشونده ══════════
   الگوی `.cvx-pop` را تکرار می‌کند (همان توکن‌ها)، ولی wrapِ خودش را
   دارد چون trigger یک ورودیِ متنی است نه `<summary>`. app-extras.js
   این wrap را حینِ فوکوس می‌سازد — در بلید چیزی جز خودِ input تغییر
   نکرده. */

/* رنگ‌های تازه‌ی fi-avatar — تا ۱۴۰۵/۰۶/۱۱ فقط gold/teal (میزِ مالی/سرنخ)
   تعریف شده بودند. «اقدام با شما»/«در انتظار مشتری»/«کارهای ارجاع‌شده»/
   «کسریِ مدارک» هم به همین خانواده پیوستند (بجایِ .row/.logoِ قدیمی‌شان)،
   پس رنگ‌های آبی/خاکستری/قرمز/مرجانی هم لازم شدند. */
.fi-avatar.blue{background:linear-gradient(140deg,var(--blue),var(--blue-on))}
.fi-avatar.ink3{background:linear-gradient(140deg,var(--ink3),var(--ink2))}
.fi-avatar.red{background:linear-gradient(140deg,var(--red),var(--red-on))}
.fi-avatar.coral{background:linear-gradient(140deg,var(--coral),var(--coral-on))}

/* ردیفِ اول و دومِ کارتابل: دو پنلِ کنارِ هم باید ارتفاعِ یکسان داشته
   باشند وگرنه هرکدام به‌اندازه‌ی فهرستِ خودش کوتاه/بلند می‌شود و ردیف
   ناموزون می‌شود (کارفرما، ۱۴۰۵/۰۶/۱۱). برخلافِ `.fin-items` که
   `max-height` دارد (کوچک‌تر از سقف هم می‌شود)، اینجا `height` ثابت است؛
   وقتی فهرست کوتاه‌تر است فضای خالی می‌ماند، وقتی بلندتر است خودِ تری
   اسکرول می‌گیرد — نه گریدِ بیرونی.
   ⚠ `.fin-items` خودش `overflow-y:auto` + `overscroll-behavior:contain`
   دارد (برای وقتی خودش تنها ظرفِ اسکرول‌شونده است). اینجا که یک تریِ
   بیرونی هم اسکرول می‌گیرد، `.fin-items` با گنجایشِ صفر (چون دیگر
   max-height ندارد) هنوز خودش را «ظرفِ اسکرول» معرفی می‌کند و
   `contain` نمی‌گذارد ویلِ ماوس به تریِ بیرونی که واقعاً می‌تواند
   اسکرول کند برسد — نتیجه: اسکرول با ویل موس هیچ کاری نمی‌کرد
   (کارفرما، ۱۴۰۵/۰۶/۱۱)، هرچند اسکرول‌کردنِ برنامه‌ای (scrollTop) کار
   می‌کرد. راه‌حل: `.fin-items` اینجا اصلاً ظرفِ اسکرول نباشد — فقط
   `.grid-tray-fixed` این نقش را دارد. */
.grid-tray.grid-tray-fixed{height:420px;overflow-y:auto}
.grid-tray.grid-tray-fixed .fin-items{max-height:none;overflow-y:visible;overscroll-behavior:auto}
.grid-tray.grid-tray-fixed .fin-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ══ کارتابل — چیدمانِ بنتو (۱۴۰۵/۰۶/۱۲، انتخابِ کارفرما از دو موکاپ) ══
   به‌جای ردیف‌های هم‌عرض، یک گریدِ ۴ستونه‌ی نامتقارن که وزنِ بصری را به
   اهمیت می‌دهد: «اقدام با شما» بزرگ‌ترین جا را می‌گیرد. جایگذاریِ هر
   تایل با متغیرهای CSSِ اینلاین (--gc/--gr) از خودِ بلید می‌آید چون
   بسته به اینکه ویجتِ مالی/سرنخ برایِ این کاربر وجود دارد یا نه، شکلِ
   گرید عوض می‌شود (مثلاً کسریِ مدارک وقتی مالی نیست کلِ دو ردیف را
   می‌گیرد) — این منطق در CSSِ خامِ ایستا جا نمی‌شد.
   KPIها همان `.stat`ِ عمومیِ مروارید‌اند (بدونِ تغییر)، فقط حالا مستقیم
   داخلِ همین گرید می‌نشینند نه در `.stats`ِ جدا؛ چون هیچ‌کدام position
   صریح ندارند، خودکار در اولین ردیفِ خالی (ردیفِ ۱) جا می‌گیرند. */
.dash-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:16px}
.dash-tile{grid-column:var(--gc, auto);grid-row:var(--gr, auto);padding:18px 20px 20px;display:flex;flex-direction:column}
.dash-tile .fin-panel-head{margin-bottom:12px}
.dash-tile .grid-tray{flex:1}

/* تایل‌های تک‌ستونه (سرنخ/مالی/کسری) عرضِ کافی برایِ `.fi-who`ِ عادی
   ندارند — نامِ بلند (مثلِ «شرکتِ نیک‌اندیش») به‌جایِ کات‌شدن دو خط
   می‌شد و همان جا را از چیپِ کنارش می‌گرفت (دیده شد در بازبینیِ چشمی).
   یک خط با سه‌نقطه، فقط در همین تایل‌هایِ باریک. */
.dash-tile-narrow .fi-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dash-tile-narrow .chip{flex-shrink:0}

/* ── سبک‌کردنِ جعبه‌هایِ تودرتو (۱۴۰۵/۰۶/۱۲) ──────────────────────
   هر تایل سه لایه بود: کارتِ سفید ← سینیِ خط‌چینِ خاکستری ← کارتِ سفیدِ
   هر ردیف. همین «ساندویچ» صفحه را شلوغ نشان می‌داد. داخلِ بنتو، سینی
   و قابِ ردیف‌ها برداشته می‌شود و فقط یک خطِ مویی بینشان می‌ماند —
   بیرونِ بنتو (صفحه‌ی مالی و بقیه) دست‌نخورده است. */
.dash-tile .grid-tray{background:none;border:0;border-radius:0;padding:0}
.dash-tile .fin-items{gap:0}
.dash-tile .fin-item{background:none;border:0;border-radius:var(--r-sm);padding:12px 2px}
.dash-tile .fin-item + .fin-item{border-top:1px solid var(--line)}
.dash-tile .fin-item:hover{background:var(--card2)}

/* عنوانِ هر کارت خودش لینکِ «همه»ست — قبلاً هر کارت جایِ متفاوتی دکمه
   داشت (بالا/وسطِ پایین/گوشه) و ریتمِ قاب‌ها را می‌شکست. */
.fin-panel-head h2 a{display:inline-flex;align-items:center;gap:6px}
.fin-panel-head h2 a svg{color:var(--ink3);transition:color .15s,transform .15s}
.fin-panel-head h2 a:hover{color:var(--teal)}
.fin-panel-head h2 a:hover svg{color:var(--teal);transform:translateX(-2px)}

/* KPIِ صفر عقب می‌نشیند تا عددِ واقعی جلو بیاید */
.dash-bento .stat.is-quiet .val{color:var(--ink3)}
.dash-bento .stat.is-quiet .ico{opacity:.45}

/* نسخه‌ی کوتاه‌ترِ تریِ ثابت‌ارتفاع — برایِ تایل‌های کوچکِ یک‌ردیفه (مالی/کسری
   وقتی کنارِ هم‌اند، نه تک‌وتنها). همان ترفندِ `.grid-tray-fixed` بالا،
   فقط عددش برایِ نصفِ ارتفاعِ تایلِ بزرگ حساب شده. */
.grid-tray.grid-tray-fixed-sm{height:168px;overflow-y:auto}
.grid-tray.grid-tray-fixed-sm .fin-items{max-height:none;overflow-y:visible;overscroll-behavior:auto}
.grid-tray.grid-tray-fixed-sm .fin-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px}

/* نمودارِ ریزِ روند — میله‌های ساده‌ی CSS، نه SVG؛ اینجا فقط یک ردیفِ
   باریکِ بنتوست، نه یک نمودارِ مستقل با محور و تولتیپ (آن یکی همچنان
   در صفحه‌ی «گزارش‌ها»ست). */
.dash-trend{display:flex;align-items:center;gap:28px}
.dash-trend-bars{flex:1;display:flex;align-items:flex-end;gap:22px;height:56px;overflow-x:auto}
.dash-trend-bars .dtb-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.dash-trend-bars .dtb-pair{display:flex;gap:3px;align-items:flex-end;height:100%}
.dash-trend-bars .dtb-bar{width:9px;border-radius:3px 3px 0 0}

@media (max-width:980px){
    .dash-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dash-tile{grid-column:auto !important;grid-row:auto !important}
}
@media (max-width:620px){
    .dash-bento{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   صفحه‌ی راهنما (doc-*) — راهنمای تصویریِ بخش‌های پیچیده‌ی ادمین.
   نامش دامنه‌ی «راهنما» است نه «بیلدر»: هر بخشِ دیگری هم که فردا
   راهنمای خودش را خواست (مثلاً مالی) همین کلاس‌ها را برمی‌دارد.
   ══════════════════════════════════════════════════════════════ */
.doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.doc-toc a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;
    background:var(--card2);color:var(--ink2);font-size:12px;font-weight:700;text-decoration:none;
    border:1px solid var(--line);transition:all .15s}
.doc-toc a:hover{background:var(--teal-soft);color:var(--teal-on);border-color:transparent}

.doc-sec{margin-bottom:18px;scroll-margin-top:16px}
.doc-sec .c-title{display:flex;align-items:center;gap:9px}
.doc-sec .c-title .num{width:24px;height:24px;border-radius:50%;background:var(--teal-soft);color:var(--teal-on);
    display:grid;place-items:center;font-size:11.5px;font-weight:800;flex-shrink:0}
.doc-sec p{font-size:13px;line-height:2;color:var(--ink2);margin:0 0 12px}
.doc-sec ul,.doc-sec ol{margin:0 0 12px;padding-inline-start:20px;font-size:13px;line-height:2;color:var(--ink2)}
.doc-sec li{margin-bottom:4px}
.doc-sec li b{color:var(--ink)}
.doc-sec h4{font-size:12.5px;font-weight:800;color:var(--ink);margin:16px 0 8px}
.doc-sec h4:first-child{margin-top:0}
.doc-sec a{color:var(--teal-on);font-weight:700;text-decoration:none}
.doc-sec a:hover{text-decoration:underline}

/* اسکرین‌شات + زیرنویس — قاب می‌گیرد تا از متنِ اطراف جدا بماند */
/* ⚠ عمداً `width:100%` نیست: بعضی اسکرین‌شات‌ها باریک‌وبلندند (مثلاً یک
   ستونِ تنها) و کشیدنشان به عرضِ کاملِ کارت یک مستطیلِ غول‌آسا می‌سازد.
   با `max-height` سایزِ طبیعی حفظ می‌شود؛ عکسِ عریض همچنان با
   `max-width` به عرضِ کارت محدود می‌ماند. */
.doc-fig{margin:14px 0 18px;text-align:center}
.doc-fig img{display:inline-block;max-width:100%;max-height:560px;width:auto;border-radius:12px;
    border:1px solid var(--line);box-shadow:var(--sh)}
.doc-fig figcaption{justify-content:center}
.doc-fig figcaption{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink3);
    margin-top:8px;padding:0 4px}

/* واژه‌نامه‌ی کوتاه — اصطلاح + یک‌خط توضیح، نه تعریفِ دیکشنری‌وار */
.doc-gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.doc-gloss .g{background:var(--card2);border-radius:12px;padding:12px 14px}
.doc-gloss .g b{display:block;font-size:12.5px;margin-bottom:3px;color:var(--ink)}
.doc-gloss .g span{font-size:11.5px;color:var(--ink3);line-height:1.7}

@media (max-width:720px){
    .doc-gloss{grid-template-columns:1fr}
}