← میراثی، با کلاسِ `open`. بعد از اتمامِ
مهاجرتِ پروژه حذف میشود. */
/* — قابِ استاندارد — */
dialog.modal{position:fixed;inset:0;margin:0;padding:20px;border:0;
width:100%;max-width:100%;height:100%;max-height:100%;
background:transparent;color:var(--ink);
display:grid;place-items:center;overflow:visible;
/* ⚠ visibility صریح: قابِ میراثی با `visibility:hidden` پنهان میشود و
کلاسِ `open` برش میگرداند. اینجا کلاسی در کار نیست، پس بدونِ این خط
مودال باز میشود ولی نامرئی میماند. */
visibility:visible;
opacity:0;transition:opacity .18s,display .18s allow-discrete,overlay .18s allow-discrete}
dialog.modal:not([open]){display:none}
dialog.modal[open]{opacity:1}
@starting-style{dialog.modal[open]{opacity:0}}
dialog.modal::backdrop{background:rgba(9,17,21,.45);backdrop-filter:blur(3px);
opacity:0;transition:opacity .18s,display .18s allow-discrete,overlay .18s allow-discrete}
dialog.modal[open]::backdrop{opacity:1}
@starting-style{dialog.modal[open]::backdrop{opacity:0}}
/* قفلِ اسکرولِ پسزمینه — کاملاً CSS، پس با چند مودالِ روی هم هم درست میماند
(شمارندهی دستی در JS این حالت را خراب میکرد) */
html:has(dialog.modal[open]){overflow:hidden}
/* — قابِ میراثی — */
div.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
background:rgba(9,17,21,.45);backdrop-filter:blur(3px);
opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
div.modal.open{opacity:1;visibility:visible}
/* — جعبه: مشترکِ هر دو قاب — */
.modal .box{width:100%;max-width:560px;max-height:88dvh;display:flex;flex-direction:column;
background:var(--card);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden;
transform:translateY(12px) scale(.985);transition:transform .18s}
.modal[open] .box,.modal.open .box{transform:none}
@starting-style{.modal[open] .box{transform:translateY(12px) scale(.985)}}
/* چهار سایزِ نامدار — سایز از شکلِ محتوا میآید، نه از سلیقه */
.modal .box.sm{max-width:440px} /* یک تصمیم، بدون فرم: تأیید حذف، هشدار */
.modal .box.md{max-width:560px} /* فرمِ یکستونی تا ۵ کنترل (= پیشفرض) */
.modal .box.lg{max-width:760px} /* فرمِ دوستونی، یا فهرستِ کوتاه */
.modal .box.xl{max-width:940px} /* فضای کاری: ویرایشگر، انتخابگر */
/* ⚠ فرم از رندر حذف میشود تا سه ناحیه مستقیم عضوِ فلکسِ `.box` بمانند.
بدونِ این، فرمی که دورِ بدنه بپیچد زنجیرهی ارتفاع را میشکند: `.m-body`
سقفی برای اسکرول ندارد، محتوا فرم را دراز میکند و `.m-foot` از قاب بیرون
میافتد و با `overflow:hidden` کلیپ میشود. */
.modal .box > form{display:contents}
.m-head{display:flex;align-items:center;gap:12px;padding:20px 22px 14px;flex:none;position:relative}
.m-head .mi{width:38px;height:38px;border-radius:12px;background:var(--teal-soft);color:var(--teal-on);display:grid;place-items:center;flex-shrink:0}
/* ⚠ `.m-ttl` اجباری است: بدونش عنوانِ بلند دکمهی × را از قاب بیرون میاندازد */
.m-head .m-ttl{flex:1;min-width:0}
.m-head b{font-size:15px;font-weight:800;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-head small{font-size:11.5px;color:var(--ink3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-head .x{margin-inline-start:auto;flex:none;width:32px;height:32px;border-radius:10px;border:0;background:var(--card2);color:var(--ink2);display:grid;place-items:center;transition:all .13s}
.m-head .x:hover{background:var(--red-soft);color:var(--red-on)}
/* لحنِ مودال — بهجای کلاسِ موردی روی `.mi` در هر پروژه */
.box.is-danger .m-head .mi{background:var(--red-soft);color:var(--red-on)}
.box.is-warn .m-head .mi{background:var(--gold-soft);color:var(--gold-on)}
.box.is-info .m-head .mi{background:var(--blue-soft);color:var(--blue-on)}
.box.is-muted .m-head .mi{background:var(--card2);color:var(--ink2)}
/* نوارِ ثابتِ زیرِ سرصفحه (تب/فیلتر) — با بدنه اسکرول نمیشود */
.m-sub{flex:none;padding:0 22px 12px}
.m-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 22px 4px}
.m-body > :last-child{margin-bottom:16px}
.m-foot{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex:none;
padding:16px 22px;border-top:1px solid var(--line);background:var(--card2)}
/* برای مودالِ خودذخیره که دکمهی تأیید ندارد — وگرنه کاربر دنبالِ «ذخیره» میگردد */
.m-foot .m-note{margin-inline-end:auto;font-size:11.5px;color:var(--ink3);
display:flex;align-items:center;gap:6px;text-align:start;line-height:1.5}
/* اسکلتِ بارگذاری — برای مودالی که بدنهاش با AJAX میآید و تا رسیدنش
جعبهی خالی نشان میداد */
.m-load{padding:26px 22px;display:flex;flex-direction:column;gap:11px}
.m-load i{display:block;height:12px;border-radius:6px;
background:linear-gradient(90deg,var(--card2) 25%,var(--line) 37%,var(--card2) 63%);
background-size:400% 100%;animation:m-skel 1.3s ease infinite}
.m-load i:nth-child(1){width:45%;height:16px}
.m-load i:nth-child(3){width:70%}
.m-load i:nth-child(4){width:88%}
@keyframes m-skel{0%{background-position:100% 0}100%{background-position:0 0}}
/* ── ریز ابزارها ───────────────────────────────────────────── */
.note{margin-top:20px;font-size:12px;color:var(--ink3);padding:0 6px 8px}
.note b{color:var(--ink2)}
.divider{height:1px;background:var(--line);margin:18px 0}
.muted{color:var(--ink3)}
.tabs{display:flex;gap:4px;padding:4px;background:var(--card2);border-radius:99px;overflow-x:auto}
.tabs button{padding:8px 16px;border:0;border-radius:99px;background:transparent;color:var(--ink2);font-size:12.5px;font-weight:700;white-space:nowrap;transition:all .15s}
.tabs button.on{background:var(--card);color:var(--teal);box-shadow:var(--sh)}
[data-theme="dark"] .tabs button.on{background:var(--teal-soft);color:var(--teal-on);box-shadow:none}
.empty{text-align:center;padding:40px 20px;color:var(--ink3)}
.empty .ei{width:56px;height:56px;border-radius:18px;background:var(--card2);color:var(--ink3);display:grid;place-items:center;margin:0 auto 12px}
.empty b{display:block;font-size:13.5px;color:var(--ink);font-weight:700;margin-bottom:3px}
.empty p{font-size:12px}
/* ── صفحهی ورود ───────────────────────────────────────────── */
body.auth{display:grid;place-items:center;padding:24px;position:relative;overflow-x:hidden;
background:linear-gradient(150deg,var(--teal-deep),var(--teal) 58%,var(--teal-lite))}
body.auth::before{content:'';position:absolute;top:-180px;inset-inline-start:-140px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.07)}
body.auth::after{content:'';position:absolute;bottom:-220px;inset-inline-end:-120px;width:460px;height:460px;border-radius:50%;background:rgba(255,255,255,.05)}
[data-theme="dark"] body.auth{background:linear-gradient(150deg,#08110f,var(--teal-deep) 60%,#0c2a25)}
.auth-box{position:relative;z-index:1;width:100%;max-width:400px}
.auth-card{background:var(--card);border-radius:20px;box-shadow:0 30px 70px -20px rgba(0,0,0,.45);overflow:hidden}
.auth-head{padding:30px 28px 22px;text-align:center}
.auth-head .s-mark{width:52px;height:52px;border-radius:16px;font-size:20px;margin:0 auto 14px}
.auth-head h1{font-size:19px;font-weight:800;letter-spacing:-.01em}
.auth-head p{font-size:12.5px;color:var(--ink2);margin-top:3px}
.auth-body{padding:0 28px 24px;display:flex;flex-direction:column;gap:16px}
.auth-foot{padding:16px 28px;border-top:1px solid var(--line);background:var(--card2);text-align:center;font-size:12px;color:var(--ink2)}
.auth-foot a{color:var(--teal);font-weight:700}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.auth-row a{color:var(--teal);font-weight:700}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--ink3);font-size:11.5px}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-alt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-safe{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;color:var(--ink3);margin-top:2px}
.auth-safe svg{color:var(--teal)}
.auth-theme{position:fixed;top:18px;inset-inline-start:18px;z-index:2;width:38px;height:38px;border-radius:99px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .15s}
.auth-theme:hover{background:rgba(255,255,255,.26)}
@media(max-width:420px){.auth-alt{grid-template-columns:1fr}.auth-head,.auth-body,.auth-foot{padding-inline:20px}}
/* ── کد یکبارمصرف (OTP) ───────────────────────────────────── */
.otp-wrap{display:flex;flex-direction:column;gap:14px}
.otp{direction:ltr;display:flex;gap:9px;justify-content:center}
.otp input{width:48px;height:56px;padding:0;text-align:center;
font-family:var(--mono);font-size:21px;font-weight:700;line-height:1;
border:1.5px solid var(--line);border-radius:14px;background:var(--card2);color:var(--ink);outline:0;
caret-color:var(--teal);
transition:border-color .16s,background .16s,color .16s,box-shadow .16s,transform .16s}
.otp input::-webkit-outer-spin-button,
.otp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.otp input:hover{border-color:var(--ink3)}
.otp input:focus{border-color:var(--teal);background:var(--card);box-shadow:0 0 0 4px var(--ring);transform:translateY(-2px)}
/* خانهی پرشده: جهش کوتاه هنگام تایپ */
.otp input.has{border-color:var(--teal);background:var(--card);animation:otp-pop .22s ease-out}
@keyframes otp-pop{0%{transform:scale(.82)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
/* در حال بررسی: نفسکشیدن پلکانی و قفل ورودی */
.otp-wrap.busy .otp{pointer-events:none}
.otp-wrap.busy .otp input{border-color:var(--line);background:var(--card2);color:var(--ink3);box-shadow:none;transform:none;
animation:otp-breathe 1.05s ease-in-out infinite;animation-delay:calc(var(--i,0)*.09s)}
@keyframes otp-breathe{0%,100%{opacity:1}50%{opacity:.4}}
/* تأیید: موج بالارونده + سبز شدن */
.otp-wrap.ok .otp{pointer-events:none}
.otp-wrap.ok .otp input{border-color:var(--teal);background:var(--teal-soft);color:var(--teal-on);box-shadow:none;
animation:otp-hop .58s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i,0)*.07s)}
@keyframes otp-hop{0%{transform:translateY(0)}42%{transform:translateY(-13px)}72%{transform:translateY(3px)}100%{transform:translateY(0)}}
/* رد: لرزش افقی + قرمز شدن */
.otp-wrap.bad .otp{animation:otp-shake .46s cubic-bezier(.36,.07,.19,.97)}
.otp-wrap.bad .otp input{border-color:var(--red);background:var(--red-soft);color:var(--red-on);box-shadow:none;transform:none}
@keyframes otp-shake{
10%,90%{transform:translateX(-2px)}
20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-7px)}
40%,60%{transform:translateX(7px)}
100%{transform:translateX(0)}
}
/* پیام وضعیت زیر خانهها — ارتفاع ثابت تا صفحه نپرد */
.otp-msg{display:flex;align-items:center;justify-content:center;gap:7px;
min-height:22px;font-size:12.5px;font-weight:700;color:var(--ink3);text-align:center}
.otp-msg.in{animation:otp-rise .3s ease-out}
@keyframes otp-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.otp-wrap.ok .otp-msg{color:var(--teal)}
.otp-wrap.bad .otp-msg{color:var(--red)}
.otp-msg svg{flex-shrink:0}
.otp-msg .tick{stroke-dasharray:26;stroke-dashoffset:26;animation:otp-draw .38s .1s ease-out forwards}
@keyframes otp-draw{to{stroke-dashoffset:0}}
/* شمارهی مقصد + ارسال مجدد */
.otp-to{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--ink2)}
.otp-to b{font-family:var(--mono);font-weight:700;color:var(--ink);direction:ltr}
.otp-to a{color:var(--teal);font-weight:700;font-size:11.5px}
.otp-resend{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;color:var(--ink3)}
.otp-resend b{font-family:var(--mono);color:var(--ink2);font-weight:700}
.otp-resend button{border:0;background:none;color:var(--teal);font-weight:700;font-size:12px;padding:0}
.otp-resend button:disabled{color:var(--ink3);cursor:not-allowed}
@media(prefers-reduced-motion:reduce){
.otp input,.otp,.otp-msg{animation:none!important;transition:none!important}
}
@media(max-width:400px){
.otp{gap:6px}
.otp input{width:42px;height:50px;font-size:19px;border-radius:12px}
}
/* ══════════════════════════════════════════════════════════════
اجزای تکمیلی — برگرفته از ممیزی ITMServer، برای پوشش کامل
الگوهایی که یک اپلیکیشن مدیریتی معمولاً به آن نیاز دارد.
══════════════════════════════════════════════════════════════ */
/* ── Toast (پیام شناور گذرا) ──────────────────────────────────
showToast('متن', 'ok'|'bad'|'info'|'warn') در morvarid.js */
.toast-host{position:fixed;bottom:22px;inset-inline-start:22px;z-index:9999;
display:flex;flex-direction:column-reverse;gap:9px;pointer-events:none;max-width:340px}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:13px;
background:var(--card);box-shadow:var(--sh-lg);border:1px solid var(--line);
font-size:12.5px;font-weight:600;color:var(--ink);pointer-events:auto;
animation:toast-in .28s cubic-bezier(.2,.8,.3,1.3)}
.toast.out{animation:toast-out .22s ease-in forwards}
.toast .ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.toast.ok .ic{background:var(--teal)}
.toast.bad .ic{background:var(--red)}
.toast.info .ic{background:var(--blue)}
.toast.warn .ic{background:var(--gold)}
.toast p{flex:1;line-height:1.55}
.toast .x{border:0;background:none;color:var(--ink3);width:20px;height:20px;display:grid;place-items:center;flex-shrink:0;border-radius:6px}
.toast .x:hover{background:var(--card2);color:var(--ink)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateX(var(--toast-out-x,24px))}}
[dir="rtl"] .toast{--toast-out-x:-24px}
/* ── نوار پایین — ناوبری موبایل ────────────────────────────────
جایگزین/مکمل سایدبار در موبایل. روی بگذار. */
.bnav{display:none;position:fixed;bottom:0;inset-inline:0;height:60px;
background:var(--card);border-top:1px solid var(--line);box-shadow:0 -6px 20px -8px rgba(23,38,46,.12);
z-index:70;padding-bottom:env(safe-area-inset-bottom)}
.bnav-inner{display:flex;align-items:center;justify-content:space-around;height:100%}
.bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
flex:1;min-width:0;height:100%;color:var(--ink3);background:none;border:0;
font-family:var(--font);font-size:9.5px;font-weight:700;transition:color .15s;position:relative}
.bnav-item svg{width:19px;height:19px}
.bnav-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bnav-item.on{color:var(--teal)}
.bnav-item:active{transform:scale(.92)}
.bnav-item .n{position:absolute;top:2px;inset-inline-start:calc(50% + 6px);min-width:15px;height:15px;
border-radius:99px;background:var(--coral);color:var(--on-coral);font-size:9px;display:grid;place-items:center;padding:0 3px}
body.has-bnav .main{padding-bottom:calc(60px + 14px + env(safe-area-inset-bottom))}
@media(max-width:760px){.bnav{display:block}}
/* ── Pagination ────────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:16px}
.pager a,.pager button{min-width:34px;height:34px;padding:0 10px;border-radius:10px;
border:1px solid var(--line);background:var(--card);color:var(--ink2);
font-family:var(--font);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
transition:all .15s;cursor:pointer}
.pager a:hover{border-color:var(--teal);color:var(--teal)}
.pager a.on{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.pager .dots{color:var(--ink3);pointer-events:none;border:0;background:none}
.pager button:disabled{opacity:.4;cursor:not-allowed}
/* ── Stepper (روند چندمرحلهای) ────────────────────────────────
برای جریانهای خطی مثل «بارگذاری مدرک»؛ با .fs-num بخش فرم فرق دارد. */
.steps{display:flex;align-items:flex-start;gap:0}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative;text-align:center}
.step + .step::before{content:'';position:absolute;top:17px;inset-inline-end:50%;width:100%;height:2px;
background:var(--line);z-index:0}
.step.done + .step::before,.step.done::after{background:var(--teal)}
.step .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;
background:var(--card2);border:2px solid var(--line);color:var(--ink3);position:relative;z-index:1;transition:all .18s}
.step .lbl{font-size:11px;color:var(--ink3);font-weight:600}
.step.done .dot{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-on)}
.step.done + .step::before{background:var(--teal)}
.step.on .dot{background:var(--teal);border-color:var(--teal);color:var(--on-teal);box-shadow:0 0 0 5px var(--ring)}
.step.on .lbl{color:var(--teal-on);font-weight:800}
.step.done .lbl{color:var(--ink2)}
/* ── نوار پیشرفت با درصد ──────────────────────────────────────
.rbar تزئینی داخل ردیف است؛ .meter برای اندازهگیری مستقل با برچسب است. */
.meter-row{display:flex;align-items:center;gap:10px}
.meter-row .lbl{font-size:11.5px;color:var(--ink2);min-width:74px;flex-shrink:0}
.meter{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:var(--teal);transition:width .4s ease}
.meter-row.warn .meter i{background:var(--gold)}
.meter-row.bad .meter i{background:var(--red)}
.meter-val{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink2);min-width:38px;text-align:left;flex-shrink:0}
.meter-row.warn .meter-val{color:var(--gold-on)}
.meter-row.bad .meter-val{color:var(--red-on)}
/* ── بج با هالهی نور (وضعیت پراهمیت) ──────────────────────────
نسخهی پررنگتر .chip برای وضعیتهایی که باید فوراً چشم را بگیرند. */
.chip.glow.g{box-shadow:0 0 0 1px rgba(14,122,104,.25),0 0 14px -3px var(--teal)}
.chip.glow.a{box-shadow:0 0 0 1px rgba(176,138,62,.25),0 0 14px -3px var(--gold)}
.chip.glow.r{box-shadow:0 0 0 1px rgba(192,57,43,.25),0 0 14px -3px var(--red)}
.chip.glow.c{box-shadow:0 0 0 1px rgba(217,115,85,.25),0 0 14px -3px var(--coral)}
.chip.glow.b{box-shadow:0 0 0 1px rgba(74,95,193,.25),0 0 14px -3px var(--blue)}
/* ── چکلیست چندانتخابی در قاب ─────────────────────────────────
برای انتخاب نقش/دسترسی؛ با .sw (سوییچ تکی) و .pick (رادیوی تصویری) فرق دارد. */
.chk-list{display:flex;flex-direction:column;gap:3px;background:var(--card2);
border:1px solid var(--line);border-radius:var(--r-sm);padding:8px}
.chk-list label{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
cursor:pointer;font-size:12.5px;color:var(--ink2);border:1px solid transparent;transition:all .13s}
.chk-list label:hover{background:var(--card);color:var(--ink)}
.chk-list label:has(input:checked){background:var(--teal-soft);border-color:var(--ring);color:var(--teal-on);font-weight:700}
.chk-list input{width:16px;height:16px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
/* ── فهرست جزئیات (کلید–مقدار) ─────────────────────────────────
برای صفحهی جزئیات دستگاه/کاربر/پرونده: آیکون + برچسب + مقدار + کپی. */
.dl{display:flex;flex-direction:column}
.dl-row{display:flex;align-items:center;gap:12px;padding:11px 0}
.dl-row + .dl-row{border-top:1px solid var(--line)}
.dl-ico{width:32px;height:32px;border-radius:10px;background:var(--card2);color:var(--ink2);
display:grid;place-items:center;flex-shrink:0}
.dl-label{font-size:11px;color:var(--ink3);flex-shrink:0;min-width:88px}
.dl-val{flex:1;font-size:13px;font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-val.mono{font-size:12.5px}
/* ── مقدار محرمانه (رمز/کلید) با نمایش و کپی ──────────────────── */
.secret{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);
border-radius:var(--r-sm);padding:9px 12px}
.secret-val{flex:1;font-family:var(--mono);direction:ltr;text-align:left;font-size:13px;
letter-spacing:2px;color:var(--ink);white-space:nowrap;overflow:hidden}
.secret-val.shown{letter-spacing:normal}
.secret button{width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--ink3);
display:grid;place-items:center;flex-shrink:0;transition:all .13s}
.secret button:hover{background:var(--card);color:var(--teal)}
.secret button.copied{color:var(--teal)}
/* ── رشتهی گفتگو (پاسخهای تیکت/پشتیبانی) ─────────────────────
با .acts-list (رویدادنامهی یکطرفه) فرق دارد؛ این دوطرفه است. */
.thread{display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.65;position:relative}
.msg .who{font-size:11.5px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.msg time{font-size:10px;color:var(--ink3);display:block;margin-top:5px}
.msg.staff{align-self:flex-start;background:var(--teal-soft);color:var(--ink);border-start-start-radius:4px}
.msg.staff .who{color:var(--teal-on)}
.msg.user{align-self:flex-end;background:var(--card2);color:var(--ink);border-start-end-radius:4px}
.msg.note{align-self:stretch;max-width:100%;background:var(--gold-soft);border:1px dashed var(--gold);color:var(--ink)}
.msg.note .who{color:var(--gold-on)}
/* ── نقطهی حضور (آنلاین/آفلاین) روی آواتار ────────────────────── */
.ava{position:relative;display:inline-flex;flex-shrink:0}
.pres{position:absolute;bottom:-1px;inset-inline-end:-1px;width:11px;height:11px;border-radius:50%;
border:2px solid var(--card)}
.pres.on{background:var(--teal)}
.pres.off{background:var(--ink3)}
/* ── کانبان (ستونهای اولویتدار) ──────────────────────────────── */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-items:start}
.board-col{background:var(--card2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.board-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);
border-inline-start:3px solid var(--ac,var(--line))}
.board-hd b{font-size:12.5px;font-weight:800;flex:1}
.board-hd .n{font-size:11px;font-weight:700;color:var(--ink3);background:var(--card);border-radius:99px;
padding:1px 8px;flex-shrink:0}
.board-body{display:flex;flex-direction:column;gap:9px;padding:10px;min-height:80px}
.board-empty{text-align:center;padding:16px 8px;font-size:11.5px;color:var(--ink3)}
.board-card{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 12px;
cursor:pointer;transition:all .15s}
.board-card:hover{border-color:var(--teal);box-shadow:var(--sh)}
.board-card b{font-size:12.5px;font-weight:700;display:block;margin-bottom:4px}
.board-card p{font-size:11px;color:var(--ink2);line-height:1.5}
.board-card .meta{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:10.5px;color:var(--ink3)}
/* ══════════════════════════════════════════════════════════════
اجزایی که از «ثبت خزر» به استاندارد ارتقا یافتند (۱۴۰۵/۰۶/۱۳)
══════════════════════════════════════════════════════════════ */
/* ── بستر و کارت — سطحِ دولایه ──
قاعدهی سطح: بسترِ تیرهتر، و کارتِ روشن روی آن. بستر همیشه **یکی** است و در
بالاترین ظرف مینشیند؛ بسترِ تودرتو یعنی سه خاکستریِ نزدیکبههم که چشم
نمیتواند از هم جدا کند. داخلِ کارت `gap` بگذارید نه `margin`. */
.plane{display:flex;flex-direction:column;min-width:0}
.plane-head{display:flex;align-items:center;gap:9px;height:26px;margin-bottom:12px}
.plane-head::after{content:"";flex:1 1 auto;min-width:14px;height:2px;border-radius:2px;
opacity:.5;margin-inline-end:-14px}
.plane-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:2px solid var(--bg);box-shadow:0 0 0 2px currentColor}
.plane-title{font-family:var(--font-display);font-weight:800;font-size:13.5px}
.plane-count{font-family:var(--mono);font-size:11.5px;color:var(--ink2);
background:var(--card2);border-radius:99px;padding:2px 8px}
.plane-body{background:var(--card2);border:1px dashed var(--line);border-radius:var(--r);padding:8px;
min-height:120px;display:flex;flex-direction:column;gap:8px}
.plane-empty{text-align:center;padding:16px 8px;font-size:11.5px;color:var(--ink3)}
.plane-body.is-over{background:var(--teal-soft);border-color:var(--teal);border-style:solid}
/* ── چیدمانِ کارتی — گرید بهجای ستونِ عمودی ──
⚠ `.main` عرضِ حداکثر ندارد، پس فهرستِ عمودی روی مانیتورِ عریض نصفِ صفحه را
خالی میگذارد و کاربر را وادار به اسکرول میکند. `.cgrid` عرضِ **صفحه** را
میبیند نه عرضِ ظرف را. `.kv-grid` همان کار را برای `.dl-row` میکند. */
.cgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:16px; align-items:start; }
.cgrid.wide { grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); }
.cgrid > .card { margin-bottom:0; }
.cgrid .span-all { grid-column:1/-1; }
.kv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 22px; }
.kv-grid .dl-row + .dl-row { border-top:0; }
.cgrid.xwide { grid-template-columns:repeat(auto-fit,minmax(560px,1fr)); }
/* ── آواتار — دایرهی عکس یا حروف ──
۴ رنگ از سایههای معناییِ موجود، نه پالتِ تازه. نگاشتِ کاربر→رنگ سمتِ سرور
قفل میشود تا هر کاربر همیشه همان رنگ را داشته باشد.
`.tone-c*` همان رنگ را روی متن میگذارد، بدونِ پسزمینه. */
.av-circle { width:var(--av-size,32px); height:var(--av-size,32px); border-radius:50%; flex:none;
overflow:hidden; display:inline-grid; place-items:center; font-weight:800; line-height:1;
font-size:calc(var(--av-size,32px) * .36); }
.av-circle img { width:100%; height:100%; object-fit:cover; }
.av-c0, .tone-c0 { background:var(--teal-soft); color:var(--teal-on); }
.av-c1, .tone-c1 { background:var(--blue-soft); color:var(--blue-on); }
.av-c2, .tone-c2 { background:var(--gold-soft); color:var(--gold-on); }
.av-c3, .tone-c3 { background:var(--coral-soft); color:var(--coral-on); }
.tone-c0, .tone-c1, .tone-c2, .tone-c3 { background:none; }
.av-c-mut { background:var(--card2); color:var(--ink3); }
.tone-c-mut { color:var(--ink3); }
.avpick { display:flex; align-items:center; gap:16px; }
.avpick-circle { position:relative; display:block; cursor:pointer; flex:none; border-radius:50%; }
.avpick-circle:hover .av-circle { filter:brightness(.92); }
.avpick-cam { position:absolute; inset-inline-end:-2px; inset-block-end:-2px; width:24px; height:24px;
border-radius:50%; background:var(--teal); color:var(--on-teal); border:2px solid var(--card);
display:grid; place-items:center; }
.avpick-txt b { display:block; font-size:13px; margin-bottom:3px; }
.avpick-txt span { display:block; font-size:11.5px; color:var(--ink3); line-height:1.7; max-width:340px; }
/* ── حبابِ گفتگو و رویدادِ سیستمی ──
دو لحن در یک رشته: پیامِ انسان حباب میگیرد (`.fd-bubble`)، رویدادِ خودکارِ
موتور ردیفِ گزارشیِ تمامعرض میشود (`.fd-sys`) تا با حرفِ آدم اشتباه نشود.
با `.thread`/`.msg` فرق دارد: آن یکطرفه و ساده است، این دوطرفه با آواتار. */
.chat-day { display:flex; align-items:center; gap:9px; margin:12px 0 9px; }
.chat-day::before, .chat-day::after { content:""; flex:1; height:1px; background:var(--line); }
.chat-day span { font-size:10px; font-weight:700; color:var(--ink3); white-space:nowrap; }
.fd-row { display:flex; gap:8px; margin-bottom:12px; max-width:100%; }
.fd-row.mine { flex-direction:row-reverse; }
.fd-row.cont { margin-top:-6px; }
.fd-sp { width:28px; flex:none; }
.fd-col { display:flex; flex-direction:column; max-width:78%; min-width:0; }
.fd-row.mine .fd-col { align-items:flex-end; }
.fd-who { font-size:10.5px; font-weight:800; margin:0 3px 3px; }
.fd-bubble { background:var(--card2); border-radius:var(--r-sm); border-end-start-radius:4px;
padding:8px 12px; font-size:12.5px; white-space:pre-wrap; word-break:break-word; }
.fd-row.mine .fd-bubble { background:var(--teal-soft); border-end-start-radius:var(--r-sm); border-end-end-radius:4px; }
.fd-meta { display:flex; align-items:center; gap:6px; margin-top:3px; padding:0 3px; font-size:10px;
color:var(--ink3); flex-wrap:wrap; }
.fd-row.mine .fd-meta { flex-direction:row-reverse; }
.fd-meta time { font-variant-numeric:tabular-nums; }
.fd-sys { display:flex; gap:9px; align-items:flex-start; margin-bottom:12px; padding:10px 13px;
border-radius:var(--r-sm); background:var(--blue-soft); color:var(--blue-on); }
.fd-sys.tone-warn { background:var(--gold-soft); color:var(--gold-on); }
.fd-sys-ic { flex:none; margin-top:2px; }
.fd-sys-body { flex:1; min-width:0; }
.fd-sys-body p { font-size:12px; font-weight:600; line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.fd-sys-meta { display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; }
.fd-sys-meta span { font-size:10px; font-variant-numeric:tabular-nums; opacity:.75; }
.fd-link { font:inherit; font-size:10px; font-weight:700; color:var(--ink3); background:none; border:0;
padding:0; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; }
.fd-link:hover { color:var(--teal-on); }
.fd-sys .fd-link { color:inherit; opacity:.8; }
.fd-sys .fd-link:hover { opacity:1; }
/* ── پنلِ کشویی از کنار ──
جانشینِ «یک صفحهی تازه» وقتی کاربر فقط میخواهد چیزی را ببیند یا یک اقدامِ
کوتاه بزند. زمینهی فهرست پشتِ سر باقی میماند، پس برگشت هزینه ندارد. */
.ldrawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(410px,94vw);z-index:81;
background:var(--card);border-inline-start:1px solid var(--line);box-shadow:var(--sh-lg);
display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .22s ease}
.ldrawer.wide{width:min(480px,94vw)}
.ldrawer.on{transform:translateX(0)}
.ldrawer[hidden]{display:none}
.dr-backdrop { position:fixed; inset:0; background:rgba(8,20,17,.42); z-index:80; }
.dr-backdrop[hidden] { display:none; }
/* ── کاشیِ آپلود ──
درگودراپ + پیشنمایش + پیشرفتِ دایرهای.
⚠ خودِ `
` هرگز `hidden` نمیشود، فقط دیداری کنار میرود:
با `hidden` اعتبارسنجیِ بومیِ `required` بیصدا submit را میبندد (فایرفاکس). */
.uprow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.uptile {
position: relative; width: 76px; height: 76px; flex-shrink: 0;
border-radius: var(--r-sm); border: 1.5px dashed var(--line); background: var(--card2);
display: grid; place-items: center; overflow: hidden;
transition: border-color .14s, background .14s;
}
.uptile:hover { border-color: var(--teal); }
.uptile.is-drag { border-color: var(--teal); background: var(--teal-soft); }
.uptile.is-err { border-color: var(--red); }
.uptile-input {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer; margin: 0; padding: 0;
}
.uptile-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink3); pointer-events: none; }
.uptile-empty span { font-size: 9.5px; line-height: 1.3; text-align: center; padding: 0 4px; }
.uptile-preview { position: absolute; inset: 0; pointer-events: none; }
.uptile-preview img { width: 100%; height: 100%; object-fit: cover; }
.uptile-fileico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink3); background: var(--card2); }
.uptile-fileico[hidden] { display: none; }
/* ⚠ پردهی تیره روی تصویر عمداً در هر دو تم مشکی است (همان استثنای مستندِ
قاعدهی «رنگ فقط توکن»): زیرش تصویرِ کاربر است، نه سطحِ تم. سفیدِ حلقه و
درصد هم روی همین پرده مینشیند، پس در هر دو تم خواناست. */
.uptile-ring {
position: absolute; inset: 0; background: rgba(10, 20, 17, .55);
display: grid; place-items: center;
}
.uptile-ring[hidden] { display: none; }
.uptile-ring svg { position: absolute; width: 44px; height: 44px; transform: rotate(-90deg); }
.uptile-ring-bg { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; }
.uptile-ring-fg {
fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round;
stroke-dasharray: 100.5; stroke-dashoffset: 100.5; transition: stroke-dashoffset .2s linear;
}
.uptile-pct { position: relative; color: #fff; font-size: 11px; font-weight: 700; }
.uptile-ok {
position: absolute; inset: 0; display: grid; place-items: center;
/* ⚠ تیل با color-mix، نه rgba هارد: نسخهی قبلی #0e7a68 (تیلِ تمِ روشن) را
ثابت کرده بود و در تمِ تاریک با محیط نمیخواند. */
background: color-mix(in srgb, var(--teal) 88%, transparent); color: var(--on-teal);
}
.uptile-ok[hidden] { display: none; }
.uptile-x {
position: absolute; top: 3px; inset-inline-end: 3px; width: 18px; height: 18px; border-radius: 999px;
background: rgba(0,0,0,.55); color: #fff; border: 0; display: grid; place-items: center;
cursor: pointer; pointer-events: auto; padding: 0; z-index: 1;
}
.uptile-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.uptile-meta b { font-size: 12.5px; }
.uptile-meta .req { color: var(--red); }
.uptile-file { font-size: 11px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uptile-file.is-set { color: var(--teal-on); }
.uprow-del { flex-shrink: 0; }
.up-err { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--red-on); }
.up-err[hidden] { display: none; }
/* ── نمودار — نواری و خطی ──
صفحهی آماری، فهرستِ مرورپذیر نیست: فرمولِ KPI+گرید آنجا صدق نمیکند.
⚠ راهنما (`.legend`) برای دو سری به بالا **اجباری** است؛ رنگ بهتنهایی
سریها را از هم جدا نمیکند. */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2)}
.legend-key{width:12px;height:3px;border-radius:2px;flex-shrink:0}
.bar-list{display:flex;flex-direction:column;gap:12px}
.bar-row{position:relative}
.bar-row .bhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px;font-size:12px}
.bar-row .bhead b{font-weight:700;color:var(--ink)}
.bar-row .bhead .val{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:700}
.bar-track{height:22px;border-radius:5px;background:var(--card2);overflow:hidden;display:flex;position:relative}
.bar-fill{height:100%;border-radius:4px;flex-shrink:0;transition:filter .12s}
.bar-row:hover .bar-fill{filter:brightness(1.06)}
.bar-fill + .bar-fill{margin-inline-start:2px}
.bar-row.is-link{cursor:pointer;border-radius:8px;margin:-4px;padding:4px;transition:background .12s;text-decoration:none;color:inherit;display:block}
.bar-row.is-link:hover{background:var(--card2)}
.bar-tip{position:absolute;bottom:calc(100% + 6px);right:0;background:var(--ink);color:var(--bg);
font-size:11px;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;
transition:opacity .12s,transform .12s;transform:translateY(3px);z-index:2;font-variant-numeric:tabular-nums}
.bar-row:hover .bar-tip,.bar-row:focus-within .bar-tip{opacity:1;transform:translateY(0)}
.trend-wrap{position:relative;margin-top:6px}
.trend-svg{width:100%;height:220px;display:block;overflow:visible}
.trend-axis-label{font-size:10.5px;fill:var(--ink3);font-family:var(--font)}
.trend-grid-line{stroke:var(--line);stroke-width:1}
.trend-crosshair{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none}
.trend-dot{r:4;stroke:var(--card);stroke-width:2}
.trend-tooltip{position:absolute;top:0;background:var(--ink);color:var(--bg);border-radius:9px;padding:8px 11px;
font-size:11.5px;opacity:0;pointer-events:none;transition:opacity .1s;transform:translateX(-50%);
white-space:nowrap;z-index:3}
.trend-tooltip .tt-row{display:flex;align-items:center;gap:6px;justify-content:space-between}
.trend-tooltip .tt-row+.tt-row{margin-top:3px}
.trend-tooltip .tt-key{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.trend-tooltip b{font-variant-numeric:tabular-nums;margin-inline-start:8px}
.trend-tooltip .tt-date{font-weight:700;margin-bottom:4px;display:block}
/* ── منوی «بیشتر» و اعلان ──
دراپداونِ عمومیِ تهردیف، و زنگولهی نوارِ بالا با همان قاب. */
.more-btn { width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--card2); color:var(--ink2); display:grid; place-items:center; font-size:18px; }
.more-btn:hover { border-color:var(--teal); }
.more-menu { position:absolute; inset-inline-end:0; bottom:calc(100% + 6px); z-index:20; min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-lg); overflow:hidden; padding:4px; }
.more-item { display:block; width:100%; text-align:right; padding:10px 12px; border:0; background:none; color:var(--ink); font-family:inherit; font-size:13px; cursor:pointer; border-radius:6px; }
.more-item:hover { background:var(--card2); }
.more-item.danger { color:var(--red); }
.nbell { position:relative; }
.nbell > summary { list-style:none; cursor:pointer; position:relative; }
.nbell > summary::-webkit-details-marker { display:none; }
.nb-dot { position:absolute; top:-3px; inset-inline-end:-3px; min-width:16px; height:16px; padding:0 4px;
border-radius:99px; background:var(--red); color:var(--on-red); font-size:10px; font-weight:800;
display:grid; place-items:center; }
.nb-menu { position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60; width:300px;
max-height:60vh; overflow-y:auto; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-sm); box-shadow:var(--sh-lg); }
.nb-head { display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:11px 13px; border-bottom:1px solid var(--line); font-size:12.5px; }
.nb-head .c-link { border:0; background:none; cursor:pointer; font-family:inherit; }
.nb-item { display:block; padding:10px 13px; border-bottom:1px solid var(--line); }
.nb-item:last-child { border-bottom:0; }
.nb-item:hover { background:var(--card2); }
.nb-item.new { background:var(--teal-soft); }
.nb-item b { display:block; font-size:12.5px; font-weight:700; }
.nb-item span { display:block; font-size:11.5px; color:var(--ink2); margin-top:2px; }
.nb-item small { display:block; font-size:10.5px; color:var(--ink3); margin-top:3px; }
.nb-empty { padding:22px; text-align:center; font-size:12px; color:var(--ink3); }
/* ── سرچِ زنده ──
پاپاوورِ نتیجه زیرِ ورودی، با گروهبندی و حالتِ خالی. */
.dsearch { position:relative; min-width:300px; }
.dsearch-pop {
position:absolute; top:calc(100% + 6px); inset-inline:0; z-index:40;
background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
box-shadow:0 12px 30px rgba(0,0,0,.14); padding:6px; max-height:340px; overflow:auto;
}
.dsearch-pop[hidden] { display:none; }
.ds-grp { font-size:10.5px; color:var(--ink3); padding:6px 8px 3px; font-weight:600; }
.ds-item {
display:flex; align-items:center; gap:9px; width:100%; text-align:start;
padding:7px 8px; border-radius:8px; background:none; border:0; cursor:pointer;
color:var(--ink); font:inherit; font-size:12.5px;
}
.ds-item:hover, .ds-item:focus-visible { background:var(--card2); }
.ds-item b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-item .ds-sub { font-size:11px; color:var(--ink3); }
.ds-item .di {
width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
background:var(--teal-soft); color:var(--teal-on); flex-shrink:0;
}
.ds-item small { color:var(--ink3); margin-inline-start:auto; font-size:11px; flex-shrink:0; }
.ds-empty { padding:14px; text-align:center; color:var(--ink3); font-size:12.5px; }
/* ── ورودیِ تاریخِ شمسی ──
پیکرِ کوچکِ بازشونده. ⚠ مقدار با رویدادِ `formdata` ارسال میشود نه با
`.value`ِ مستقیم، وگرنه فرمِ بدونِ JS مقدارِ نمایشی را میفرستد. */
.jdate-wrap{position:relative;display:block}
.jdate-pop{position:absolute;inset-inline-start:0;top:calc(100% + 6px);z-index:40;
width:252px;max-width:88vw;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-sm);box-shadow:var(--sh-lg);padding:10px}
.jdate-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.jdate-head b{font-size:12.5px;font-weight:700;color:var(--ink)}
.jdate-nav{width:26px;height:26px;flex:none;border-radius:7px;border:1px solid var(--line);
background:var(--card2);color:var(--ink2);font-size:13px;line-height:1;cursor:pointer}
.jdate-nav:hover{border-color:var(--teal);color:var(--teal)}
.jdate-week{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.jdate-week span{text-align:center;font-size:10px;color:var(--ink3)}
.jdate-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.jdate-grid span{height:28px}
.jdate-day{height:28px;border:0;border-radius:7px;background:none;color:var(--ink);
font-size:12px;font-family:var(--mono);cursor:pointer}
.jdate-day:hover{background:var(--card2)}
.jdate-day.is-today{color:var(--teal);font-weight:700}
.jdate-day.is-sel{background:var(--teal);color:var(--on-teal);font-weight:700}
.jdate-today-btn{display:block;width:100%;margin-top:8px;padding:6px;border:1px dashed var(--line);
border-radius:7px;background:none;color:var(--ink2);font-size:11.5px;cursor:pointer}
.jdate-today-btn:hover{border-color:var(--teal);color:var(--teal)}
/* ── قالبِ مبلغ ──
عدد باید در یک نگاه خوانده شود: `tabular-nums` و LTR تا ستونهای ریالی زیرِ
هم بنشینند. جهتِ پول با **رنگ** کد میشود نه با + و − که در RTL جابهجا
میشوند. جداکنندهی سهرقمی هم از رویدادِ `formdata` میرود. */
.money { font-family:var(--mono); direction:ltr; unicode-bidi:isolate;
font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }
.money.in { color:var(--teal-on); }
.money.out { color:var(--red-on); }
.money.mute { color:var(--ink3); font-weight:400; }
.money .rial { font-family:var(--font); font-size:.82em; font-weight:400; color:var(--ink3);
margin-inline-start:3px; }
/* ── درگودراپ — Pointer Events ──
⚠ HTML5 DnD روی لمس اصلاً کار نمیکند و در هر شلیکِ `dragover` واقعاً گره را
جابهجا میکند (پرشِ چشمی + بازچینشِ مداوم). اینجا تا لحظهی رهاکردن هیچ
گرهی تکان نمیخورد؛ فقط `.dnd-line` جای افتادن را نشان میدهد.
⚠ عمودی **لایهی شناور** است نه آیتمِ فلکس: آیتمِ فلکس خودش جا میگرفت و
هدفِ زیرِ دستِ کاربر همان لحظه سُر میخورد.
⚠ `left`/`top`ِ فیزیکی، نه `inset-inline-start`: مبدأ `clientX/clientY` است. */
.dnd-line { position:absolute; inset-inline:6px; height:3px; margin-top:-1.5px;
border-radius:99px; background:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);
pointer-events:none; z-index:3; }
.dnd-line.is-x { position:static; inset:auto; flex:0 0 3px; align-self:stretch;
height:auto; min-height:90px; margin:0; }
.dnd-ghost { position:fixed; top:0; left:0; z-index:999; pointer-events:none;
opacity:.92; transform-origin:top left; box-shadow:var(--sh-lg, 0 18px 40px rgba(0,0,0,.22));
border-radius:12px; overflow:hidden; rotate:1.2deg; }
body.dnd-dragging { user-select:none; -webkit-user-select:none; cursor:grabbing; }
body.dnd-dragging * { cursor:grabbing !important; }
/* ── نوار و فرمِ کمکی ──
نوارِ فیلترِ بالای فهرست · فرمِ تکخطیِ درجا · چند فرمِ POST ته یک ردیفِ کارتی
· بخشِ بسترِ `.m-sheet` داخلِ مودال · فرمِ جمعشوندهی `
`. */
.row-acts {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.filter-bar {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 14px;
padding-top: 18px;
}
.filter-bar .field { flex: 1 1 200px; }
.filter-bar .chk { padding-bottom: 11px; }
.filter-bar .btn { flex-shrink: 0; }
.mini-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.mini-form .inp { width: auto; flex: 1; min-width: 150px; padding: 8px 11px; font-size: 13px; margin: 0; }
.add-collapse { margin-top:6px; }
.add-collapse > summary { list-style:none; cursor:pointer; color:var(--teal); font-weight:700; font-size:13px; padding:6px 2px; display:inline-block; }
.add-collapse > summary::-webkit-details-marker { display:none; }
.add-collapse-sm { margin-top:6px; }
.add-collapse-sm > summary.i-btn { list-style:none; cursor:pointer; }
.add-collapse-sm > summary.i-btn::-webkit-details-marker { display:none; }
.m-sheet { background:var(--card2); border-top:1px solid var(--line);
padding:14px; display:grid; gap:12px; align-content:start; }
.m-sheet > :last-child { margin-bottom:0; }
/* ── تب و سگمنت با `` ──
`.tabs button`/`.seg button` بالاتر تعریف شدهاند. وقتی هر نما مسیرِ خودش
را دارد (قابلِ بوکمارک، بازشدن در تبِ تازه) لینک درستتر از دکمه است، پس
همان ظاهر برای `` هم لازم است. */
.tabs a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:99px;
color:var(--ink2);font-size:12.5px;font-weight:700;white-space:nowrap;transition:all .15s;
/* ⚠ `flex:none` لازم است وگرنه در باریکی تبها بهجای اسکرولِ نوار
(که `.tabs` با `overflow-x:auto` دارد) خودشان له میشوند. */
flex:none}
.tabs a:hover{color:var(--ink)}
.tabs a.on{background:var(--card);color:var(--teal);box-shadow:var(--sh)}
.seg a{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:99px;
background:transparent;color:var(--ink2);font-size:12.5px;font-weight:700;transition:all .15s}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--card);color:var(--teal);box-shadow:var(--sh)}
[data-theme="dark"] .seg a.on{background:var(--teal-soft);color:var(--teal-on);box-shadow:none}
/* ── وضعیتِ بررسی روی `.file-row` ──
`.file-row .fi` بهطور پیشفرض فیروزهای است؛ این کلاسها رنگش را به
وضعیتِ بررسیِ همان مدرک گره میزنند، تا فهرستِ بلند در یک نگاه خوانده شود. */
.file-row .fi.st-ok{background:var(--teal-soft);color:var(--teal-on)}
.file-row .fi.st-bad{background:var(--red-soft);color:var(--red-on)}
.file-row .fi.st-wait{background:var(--blue-soft);color:var(--blue-on)}
.file-row .fi.st-miss{background:var(--gold-soft);color:var(--gold-on)}
.file-row .fi.st-opt{background:var(--card2);color:var(--ink3)}
.file-row .st{font-size:11.5px;margin-top:2px;display:block;color:var(--ink3)}
.file-row .st.bad{color:var(--red-on);font-weight:600}
.file-row .st.wait{color:var(--blue-on)}
.file-row .st.ok{color:var(--teal-on)}
.file-row .req{color:var(--red);font-weight:800}
.file-row .acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
/* تُنِ هشدار روی نوارِ کوتاه — پیشفرضش گرادیانِ فیروزهای است */
.rbar.lo i{background:var(--red)}
.rbar.mid i{background:var(--gold)}
/* ── واکنشگرا ─────────────────────────────────────────────── */
@media(max-width:1080px){
.cols{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr)}
.cols-2{grid-template-columns:1fr}
.fgrid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.side-wrap{transform:translateX(110%);transition:transform .22s ease;padding:14px}
.side-wrap.open{transform:none}
.s-ovl.open{display:block}
.main{margin-right:0;padding:14px 12px}
.stats{grid-template-columns:1fr}
.hero{padding:22px}
.hero .acts{margin:0;width:100%}
.hero .acts .btn{flex:1}
.t-search{display:none}
.t-menu{display:grid}
.fgrid,.fgrid.c3{grid-template-columns:1fr}
.span2{grid-column:auto}
.row{flex-wrap:wrap}
.row .stage,.row .col{min-width:0}
.c-head,.fset,.acts-list{padding-inline:16px}
.rows{padding-inline:8px}
/* مودال در موبایل به bottom-sheet تبدیل میشود */
.modal{align-items:flex-end;padding:0}
.modal .box,.modal .box.sm,.modal .box.md,.modal .box.lg,.modal .box.xl{
max-width:100%;max-height:92dvh;border-radius:20px 20px 0 0;
transform:translateY(100%)}
.modal[open] .box,.modal.open .box{transform:none}
@starting-style{.modal[open] .box{transform:translateY(100%)}}
/* دستگیره خودکار ساخته میشود — هیچ مودالی مارکآپ اضافه نمیخواهد.
`.m-handle` دستی هنوز کار میکند ولی دیگر لازم نیست. */
.m-head{padding-top:22px}
.m-head::before{content:'';position:absolute;top:8px;inset-inline:0;margin-inline:auto;
width:36px;height:4px;border-radius:2px;background:var(--ink3);opacity:.35}
.m-head:has(+ .m-handle)::before,.box > .m-handle + .m-head::before{display:none}
.m-handle{width:36px;height:4px;background:var(--ink3);opacity:.35;border-radius:2px;margin:10px auto 0}
/* روی آیفون فوتر زیرِ نوارِ خانه میرفت */
.m-foot{padding-bottom:max(16px,env(safe-area-inset-bottom))}
.steps{flex-direction:column;align-items:stretch;gap:10px}
.step{flex-direction:row;text-align:start;gap:10px}
.step + .step::before{display:none}
.board{grid-template-columns:1fr}
}