/* ============================================================
   پوستهٔ تازه — «روشن و آرام»، در حال‌وهوای نرم‌افزارهای ابریِ بزرگ.

   این فایل بعد از styles.css خوانده می‌شود و فقط ظاهر را عوض می‌کند؛
   هیچ نام کلاسی، هیچ ساختاری و هیچ رفتاری دست نمی‌خورد. اگر روزی
   خواستید ظاهر قبلی برگردد، کافی است همین یک خط از index.html برداشته
   شود.

   چهار تغییرِ اصلی:
     ۱. منوی کناریِ روشن به‌جای منوی تیرهٔ رنگی
     ۲. نشان‌های خطیِ یک‌دست به‌جای شکلک‌های رنگی (فایل icons.js)
     ۳. کارت و جدولِ تخت با خط مو — نه سایه و گرادیان و گردیِ زیاد
     ۴. رنگ فقط جایی که معنا دارد: پولِ ورودی سبز، پولِ خروجی قرمز،
        و بقیهٔ صفحه سرمه‌ای و خاکستری
   ============================================================ */

:root{
  /* رنگ اصلی: سرمه‌ایِ سیر — رنگِ نرم‌افزارهای مالی، نه آبیِ روشنِ وب */
  --brand:#17356B;--brand2:#22488A;--brand-soft:#EEF2F9;--brand-ink:#17356B;
  --teal:#12715B;--teal-soft:#E7F2EF;--teal-ink:#0E5C4A;

  /* خنثی‌ها با یک تهِ آبیِ خیلی کم — خاکستریِ کاملاً بی‌طرف بی‌روح است */
  --bg:#F7F8FA;--card:#FFFFFF;--ink:#0B1220;--muted:#5B6675;--line:#E6E9EF;
  --line-soft:#F1F3F7;--dim:#8B95A5;

  /* رنگِ معنا‌دار: پولِ ورودی / هشدار / پولِ خروجی */
  --ok:#12715B;--ok-soft:#E7F2EF;--warn:#9A5B08;--warn-soft:#FDF6E7;
  --bad:#B03B2E;--bad-soft:#FBEEEC;

  /* منوی کناریِ روشن */
  --side1:#FFFFFF;--side2:#FFFFFF;--side-ink:#3F4855;

  /* سایه‌ها تقریباً نامرئی — عمق از خط می‌آید، نه از سایه */
  --shadow:0 1px 2px rgba(11,18,32,.04);
  --shadow-lg:0 12px 32px -8px rgba(11,18,32,.16),0 4px 10px -4px rgba(11,18,32,.06);
  --r:10px;
  --r-sm:8px;
}
[data-theme="dark"]{
  --brand:#8FB0E8;--brand2:#A8C2EF;--brand-soft:#16233B;--brand-ink:#A8C2EF;
  --bg:#080C13;--card:#121821;--ink:#E9EDF3;--muted:#98A3B2;--line:#212934;
  --line-soft:#1A212B;--dim:#7A8494;
  --ok:#4FBF9E;--ok-soft:#0E2A24;--warn:#D9A03F;--warn-soft:#2C2210;
  --bad:#E0796A;--bad-soft:#2E1815;--teal-soft:#0E2A24;
  --side1:#0F141C;--side2:#0F141C;--side-ink:#A6B0BE;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px -10px rgba(0,0,0,.65);
}

/* اعداد هم‌عرض: ستون مبلغ‌ها دقیقاً زیر هم می‌افتد */
body{font-feature-settings:"ss01";font-size:13.5px}
table,.card .val,.kpi b,input,.badge,.money,td,th{font-variant-numeric:tabular-nums}

/* ============================================================
   نشان‌های خطی (SVG) — یک ضخامت، یک اندازه، رنگ از متنِ اطراف
   ============================================================ */
.ico{
  width:17px;height:17px;flex:none;display:inline-block;vertical-align:-3.5px;
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- منوی کناری ---------- */
aside{
  width:244px;background:var(--side1);color:var(--side-ink);
  border-inline-end:1px solid var(--line);box-shadow:none;
}
aside .brand{
  padding:0 16px 14px;border-bottom:1px solid var(--line-soft);margin-bottom:8px;
}
aside .brand b{color:var(--ink);font-size:14.5px;font-weight:700}
aside .brand .logo{
  width:34px;height:34px;font-size:13px;border-radius:9px;
  background:var(--brand);box-shadow:none;
}
aside nav a{
  padding:8px 12px;margin:1px 10px;border-radius:var(--r-sm);
  color:var(--side-ink);font-size:13px;font-weight:500;
}
aside nav a:hover{background:var(--line-soft);color:var(--ink);transform:none}
aside nav a.active{
  background:var(--brand-soft);color:var(--brand-ink);font-weight:700;
  box-shadow:none;
}
aside nav a.active::before{content:none}
aside nav a .ic{width:auto;display:flex;align-items:center;color:var(--dim)}
aside nav a.active .ic{color:var(--brand)}
aside nav a .ic .ico{vertical-align:0}
aside .foot{border-top:1px solid var(--line-soft);padding:10px 16px}
aside .rail-btn{border-color:var(--line);background:var(--card);color:var(--muted)}
.nav-group .gh{
  color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.2px;
  border-top-color:var(--line-soft)!important;
}
#whoami{color:var(--ink)}
#whoami .avatar{background:var(--brand-soft);color:var(--brand-ink)}

/* سرگروهِ بخش‌ها: نشانِ خطی به‌جای مربعِ رنگی و درخشان */
.nav-group.modgrp .gh{color:var(--ink);font-size:12.5px;font-weight:700}
.nav-group.modgrp .gh:hover{background:var(--line-soft);color:var(--ink)}
.nav-group.modgrp .gh .mi{
  width:20px;height:20px;border-radius:0;background:none!important;box-shadow:none!important;
  color:var(--m,var(--brand));
}
.nav-group.modgrp .gh .mi .ico{width:18px;height:18px;vertical-align:0}
.nav-group.modgrp.cur .gh{background:var(--line-soft);color:var(--ink)}
/* فلشِ باز/بسته: خوابیده وقتی گروه باز است */
.nav-group .gh .ar{display:flex;align-items:center;color:var(--dim);opacity:1;
  transition:transform .18s}
.nav-group .gh .ar .ico{width:14px;height:14px;vertical-align:0}
.nav-group.open .gh .ar{transform:rotate(-90deg)}
/* سنجاق: ستارهٔ خالی، و وقتی سنجاق شده پُر */
aside nav a .pin{display:flex;align-items:center;color:var(--dim)}
aside nav a .pin .ico{width:14px;height:14px;vertical-align:0}
aside nav a .pin.on{color:var(--warn)}
aside nav a .pin.on .ico{fill:currentColor;stroke-width:1.2}
aside nav a .pin:hover{transform:none;color:var(--warn)}
.nav-subh{color:var(--muted);font-size:10.5px}

/* ---------- نوار بالا ---------- */
.topbar{
  background:color-mix(in srgb,var(--card) 90%,transparent);
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px);
  padding-top:11px;padding-bottom:11px;
}
.topbar h2{font-size:17px;font-weight:700;letter-spacing:-.2px;background:none;color:var(--ink);
  -webkit-text-fill-color:currentColor}
.icon-btn{border-radius:var(--r-sm);width:32px;height:32px;border-color:transparent;
  background:transparent;color:var(--muted)}
.icon-btn:hover{background:var(--line-soft);color:var(--ink);transform:none;border-color:transparent}
.icon-btn .ico{width:17px;height:17px;vertical-align:0}
#mod-badge{
  background:var(--brand-soft);color:var(--brand-ink);box-shadow:none;
  border-radius:6px;font-size:12px;padding:4px 9px;font-weight:600;gap:5px;
}
#mod-badge .ico{width:15px;height:15px;vertical-align:0;color:var(--m,var(--brand))}
#mod-badge span:first-child{display:flex;align-items:center}

/* ---------- کارت و پنل: تخت، با خط مو ---------- */
.card,.panel{
  border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);
}
.panel{padding:16px}
.card{padding:14px 16px}
.cards>.card::before{width:3px;opacity:.85}
.cards>.card:hover{transform:none;box-shadow:var(--shadow);border-color:#D3DAE6}
.card .chip{width:32px;height:32px;border-radius:var(--r-sm)}
.card .lbl{font-size:12px;color:var(--muted);font-weight:500}
.card .val{font-size:19px;font-weight:700;letter-spacing:-.4px}
.panel h3{font-size:14px;font-weight:700;margin-bottom:10px}
.empty-ico{color:var(--dim);margin-bottom:10px}
.empty-ico .ico{width:42px;height:42px;stroke-width:1.2}

/* ---------- جدول ---------- */
table{font-size:13px}
thead th{
  background:var(--card);color:var(--muted);font-size:11.5px;font-weight:600;
  border-bottom:1px solid var(--line);padding:9px 10px;white-space:nowrap;
}
tbody td{border-bottom:1px solid var(--line-soft);padding:9px 10px}
tbody tr:hover td{background:var(--line-soft)}
tbody tr:last-child td{border-bottom:0}
/* سطر جمع: خطِ بالای پررنگ و زمینهٔ خیلی کم‌رنگ — تا «جمع» با داده اشتباه نشود */
tfoot td,tfoot th{
  border-top:1.5px solid var(--line);background:var(--line-soft);
  font-weight:700;color:var(--ink);padding:9px 10px;font-size:12.5px;
}
/* پول: ورودی سبز، خروجی قرمز، خالی یک خطِ تیره — نه صفرِ گمراه‌کننده */
td .pos,.money.pos{color:var(--ok);font-weight:600}
td .neg,.money.neg{color:var(--bad);font-weight:600}
td .zero,.money.zero{color:var(--dim)}

/* ---------- دکمه‌ها: مستطیلِ نرم، نه قرص ---------- */
.btn{
  border-radius:var(--r-sm);padding:8px 14px;font-size:13px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--ink);box-shadow:none;
}
.btn:hover{background:var(--line-soft);filter:none;transform:none}
.btn:active{transform:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
.btn.primary:hover{background:var(--brand2);border-color:var(--brand2)}
.btn.green{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:none}
.btn.red,.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:none}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:6px}
.btn.wide{width:100%}
.btn .ico{width:15px;height:15px;vertical-align:-3px}
.quickbar .qi{display:inline-flex;align-items:center;color:var(--muted)}
.quickbar .btn.primary .qi{color:#fff}
.quickbar .qi .ico{width:15px;height:15px;vertical-align:0}

/* ---------- ورودی‌ها ---------- */
input,select,textarea{
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);
  padding:9px 11px;font-size:13.5px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none;
}
label{font-size:12px;color:var(--muted);font-weight:500}

/* ---------- برچسب وضعیت ---------- */
.badge{
  border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:600;
  background:var(--line-soft);color:var(--muted);
}
.badge.blue{background:var(--brand-soft);color:var(--brand-ink)}
.badge.green{background:var(--ok-soft);color:var(--ok)}
.badge.amber{background:var(--warn-soft);color:var(--warn)}
.badge.red{background:var(--bad-soft);color:var(--bad)}

/* ---------- زبانه‌ها ---------- */
.tabs{background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;padding:0;gap:2px}
.tabs button,.tabs .tab{
  border-radius:0;border-bottom:2px solid transparent;padding:9px 14px;
  font-size:13.5px;font-weight:600;color:var(--muted);background:transparent;
}
.tabs button.active,.tabs .tab.active{
  background:transparent;color:var(--brand-ink);border-bottom-color:var(--brand);
}

/* ---------- پنجره‌ها ---------- */
#modal{border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:20px 22px}
#modal-top{border-bottom:1px solid var(--line);background:var(--card)}

/* ---------- جستجوی سریع ---------- */
.pal-row .ic{display:flex;align-items:center;color:var(--dim)}
.pal-row .ic .ico{vertical-align:0}
.pal-row.sel .ic{color:var(--brand)}
/* ۳۹٫۵۱: سطرِ نتیجهٔ جست‌وجوی سراسری — شرح زیرِ عنوان */
.pal-rec>span:last-child{min-width:0;overflow-wrap:anywhere}
.pal-rec small{display:block;margin-top:2px;font-weight:400}

/* ---------- کاشی‌های صفحهٔ خانه ---------- */
.tiles-box,.mod-tile,.mod-card{border-radius:var(--r)!important;box-shadow:var(--shadow)!important}
.mod-tile:hover,.mod-card:hover{transform:none!important}
.tile{border-radius:var(--r);background:var(--card)}
.tile:hover{transform:none;border-color:var(--brand);box-shadow:var(--shadow)}
.tile .ti{color:var(--muted);display:flex;justify-content:center}
.tile .ti .ico{width:21px;height:21px;vertical-align:0}
.tile:hover .ti{color:var(--brand)}
.tile .pin{color:var(--dim);display:flex}
.tile .pin .ico{width:13px;height:13px;vertical-align:0}
.tile .pin.on{color:var(--warn)}
.tile .pin.on .ico{fill:currentColor;stroke-width:1.2}

/* ---------- صفحهٔ ورود ---------- */
#login-page{background:
  radial-gradient(1100px 560px at 80% -10%, var(--brand-soft), transparent 60%),
  var(--bg)}
#login-page .login-box{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 48px -16px rgba(11,18,32,.18);color:var(--ink);backdrop-filter:none;
}
#login-page .login-box h1{color:var(--ink);font-size:19px}
#login-page .login-box p{color:var(--muted)}
#login-page .login-box label{color:var(--muted)}
#login-page .login-box .field{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)}
#login-page .login-box .field input{background:transparent;border:0;color:var(--ink)}
#login-page .login-box .field input::placeholder{color:#98A2B3}
#login-page .login-box .fi{color:var(--dim);display:flex;align-items:center;opacity:1;top:50%;
  transform:translateY(-50%)}
#login-page .login-box .fi .ico{width:16px;height:16px;vertical-align:0}
#login-page .login-box .eye{color:var(--dim);display:flex;align-items:center;top:50%;
  transform:translateY(-50%)}
#login-page .login-box .eye .ico{width:16px;height:16px;vertical-align:0}
#login-page .logo{border-radius:12px;background:var(--brand);box-shadow:none}
#login-page .logo.pulse{animation:none}
#login-page .login-orbit{opacity:.28}
#login-page .login-foot{color:var(--muted)}
#portal-link{border-top-color:var(--line)!important}
#portal-link .t{color:var(--muted)}
#portal-link a{color:var(--brand);background:var(--card)}
#portal-link a:hover{background:var(--brand);color:#fff}

/* ---------- نوار اشتراک ---------- */
#saas-bar{border-bottom:1px solid var(--line);font-size:12.5px}
#saas-bar.ok{background:var(--card);color:var(--muted)}
#saas-bar.ok b{color:var(--ink)}

@media(max-width:900px){
  aside{box-shadow:var(--shadow-lg)}
}

/* ---------- زمینهٔ صفحه: بدون نقطه‌چین ---------- */
main{background-image:none}

/* ---------- کاشی‌های بخش‌ها روی «خانه» ---------- */
/* رنگ هر بخش می‌ماند، ولی به‌جای قاب رنگی و سایهٔ رنگی، فقط یک نوارِ نازک
   بالای کارت. شلوغی کم می‌شود و کارت‌ها یک خانواده به نظر می‌رسند. */
.modtile{
  border:1px solid var(--line);border-top:3px solid var(--m,var(--brand));
  border-radius:var(--r);box-shadow:var(--shadow);animation:none;padding:15px 16px;
}
.modtile::after{content:none}
.modtile:hover{transform:none;box-shadow:var(--shadow);border-color:#D3DAE6}
.modtile .mt-ic{
  background:none!important;box-shadow:none!important;border-radius:0!important;
  width:auto!important;height:auto!important;color:var(--m,var(--brand));
  display:flex;align-items:center;
}
.modtile .mt-ic .ico{width:20px;height:20px;vertical-align:0}
.nav-modhead .ic{
  background:var(--brand-soft);box-shadow:none;border-radius:var(--r-sm);
  width:28px;height:28px;font-size:13px;
}
.nav-modhead span:last-child{color:var(--ink);font-size:14px;font-weight:700}
.nav-back{border-top-color:var(--line-soft)}
.nav-back a{color:var(--muted)}
.nav-back a:hover{color:var(--ink)}
aside .brand .logo{width:36px;height:36px;font-size:12px;letter-spacing:.5px}

/* دکمه‌های میان‌بر زیر کاشی‌ها */
.quick .btn,.qbtns .btn{border-radius:var(--r-sm)}

/* نام شرکتِ بلند، مربع لوگو را جمع می‌کرد و «bc» بریده دیده می‌شد */
aside .brand .logo,#login-page .logo{flex:none}

/* دکمهٔ جمع‌کردن منو روی لوگو افتاده بود (در چیدمان راست‌به‌چپ، ابتدای
   خط همان سمت راست است) — به سمت دیگر منتقل شد */
.rail-btn{
  inset-inline-start:auto;inset-inline-end:6px;top:4px;
  background:var(--line-soft);color:var(--muted);border:1px solid var(--line);
  width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
}
.rail-btn .ico{width:13px;height:13px;vertical-align:0}
.rail-btn:hover{background:var(--line);color:var(--ink)}
body.rail .rail-btn .ico{transform:rotate(180deg)}

/* ---------- کاشی‌های آمارِ نوار بالا ---------- */
.ltile{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);padding:6px 10px}
.ltile:hover{transform:none;border-color:var(--brand);box-shadow:none}
.ltile .lt-i{display:flex;align-items:center;color:var(--dim)}
.ltile .lt-i .ico{width:15px;height:15px;vertical-align:0}
.ltile .lt-v{font-weight:700;font-size:13.5px}
.ltile.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.ltile.warn .lt-v{color:var(--warn)}
.ltile.warn .lt-i{color:var(--warn)}
.ltile-gear{border:1px solid var(--line);border-radius:var(--r-sm);color:var(--dim);
  display:flex;align-items:center;justify-content:center;padding:6px 8px}
.ltile-gear .ico{width:14px;height:14px;vertical-align:0}
.ltile-gear:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- نشانِ کارت‌های داشبورد ---------- */
.card .chip{background:var(--line-soft);color:var(--muted);box-shadow:none}
.card .chip .ico{width:17px;height:17px;vertical-align:0}
.card .chip.g{background:var(--ok-soft);color:var(--ok)}
.card .chip.a{background:var(--warn-soft);color:var(--warn)}
.card .chip.r{background:var(--bad-soft);color:var(--bad)}

/* ---------- نوار بخش‌ها (زیر عنوان صفحه) ---------- */
.secbar a .ico{width:15px;height:15px;color:var(--dim)}
.secbar a.on .ico{color:var(--brand)}
.secbar b{color:var(--ink)}
/* نشان داخل دکمه‌ها و عنوان‌ها: هم‌تراز با متن */
h3 .ico,h4 .ico,summary .ico,.hint .ico,.badge .ico{width:15px;height:15px}
.btn.sm .ico{width:14px;height:14px}

/* ---------- کارت‌های بخش: رنگ فقط روی نشان، نه روی قاب ---------- */
/* شش نوارِ رنگیِ بالای کارت‌ها صفحهٔ خانه را رنگین‌کمان می‌کرد. رنگِ هر
   بخش می‌ماند — ولی فقط روی نشانش، همان‌جایی که در منوی کناری هم هست. */
.modtile{border-top:1px solid var(--line)}
.modtile:hover{border-color:var(--brand)}

/* ---------- صفحهٔ ورود: زمینهٔ آرام ---------- */
/* گوی‌های محوِ بنفش و آبی با سرمه‌ای جور نبود و صفحه را «تبلیغاتی» می‌کرد. */
#login-page .login-orbit{display:none}
#login-page{background:
  linear-gradient(180deg,var(--brand-soft),transparent 42%),var(--bg)}

/* ============================================================
   نوار منوی افقی — چیدمان تازه (نسخهٔ ۲۷)

   منوی کناری برداشته شد. حالا ساختار صفحه دو نوار افقی است:
     ۱. نوار منو: نام شرکت | عنوان‌های اصلی با زیرمنو | ابزارهای کاربر
     ۲. نوار صفحه: عنوان صفحهٔ باز، آمار زنده، تاریخ
   تمام عرض صفحه برای خودِ کار می‌ماند — مثل نرم‌افزارهای حسابداری.
   ============================================================ */
#app{display:block;min-height:100vh}
/* همان قانونِ styles.css: عددِ حاشیه فقط در --main-pad نوشته می‌شود. */
main{--main-pad:22px;padding:0 var(--main-pad) 24px;background-image:none}

#menubar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:6px;
  height:52px;padding:0 18px;background:var(--card);
  border-bottom:1px solid var(--line);
}
#menubar .mb-brand{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);
  padding-inline-end:14px;margin-inline-end:6px;border-inline-end:1px solid var(--line-soft);
  flex:none;height:34px;
}
#menubar .mb-brand .logo{
  width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;letter-spacing:.5px;
}
#menubar .mb-brand b{font-size:13.5px;font-weight:700;white-space:nowrap}
#menubar .nav-toggle{display:none}

#menubar nav{display:flex;align-items:center;gap:1px;flex:1;min-width:0;overflow:visible}
.mb-menu{position:relative}
.mb-top{
  display:flex;align-items:center;gap:6px;height:34px;padding:0 11px;border:0;background:none;
  border-radius:var(--r-sm);color:var(--side-ink);font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;white-space:nowrap;
}
.mb-top:hover{background:var(--line-soft);color:var(--ink)}
.mb-top .mi{display:flex;align-items:center;color:var(--m,var(--brand))}
.mb-top .mi .ico{width:16px;height:16px;vertical-align:0}
.mb-top .ico{vertical-align:0}
.mb-top .mb-ar{width:12px;height:12px;color:var(--dim);transform:rotate(-90deg);margin-inline-start:1px}
a.mb-top.active,.mb-menu.cur>.mb-top{background:var(--brand-soft);color:var(--brand-ink)}
.mb-menu.open>.mb-top{background:var(--line-soft);color:var(--ink)}
.mb-menu.open>.mb-top .mb-ar{transform:rotate(90deg)}

/* زیرمنو: ستون‌بندی‌شده — «مالی» چهار ستون دارد، بقیه یکی */
.mb-drop{
  display:none;position:absolute;top:calc(100% + 5px);inset-inline-start:0;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:10px;min-width:220px;
}
.mb-menu.open>.mb-drop,.mb-acc.open>.mb-drop{display:block}
@media (hover:hover){
  .mb-menu:hover>.mb-drop{display:block}
}
.mb-cols{display:flex;gap:6px;align-items:flex-start}
.mb-col{min-width:196px;display:flex;flex-direction:column}
.mb-col + .mb-col{border-inline-start:1px solid var(--line-soft);padding-inline-start:6px;margin-inline-start:0}
.mb-colh{
  font-size:10.5px;font-weight:700;color:var(--dim);padding:8px 10px 4px;letter-spacing:.2px;
}
.mb-drop a{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-sm);
  color:var(--side-ink);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;
}
.mb-drop a:hover{background:var(--line-soft);color:var(--ink)}
.mb-drop a.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.mb-drop a .ic{display:flex;align-items:center;color:var(--dim)}
.mb-drop a.active .ic{color:var(--brand)}
.mb-drop a .ic .ico{width:16px;height:16px;vertical-align:0}
.mb-drop a .tx{flex:1}
.mb-drop a .pin{display:flex;align-items:center;color:transparent}
.mb-drop a:hover .pin{color:var(--dim)}
.mb-drop a .pin.on{color:var(--warn)}
.mb-drop a .pin.on .ico{fill:currentColor;stroke-width:1.2}
.mb-drop a .pin .ico{width:13px;height:13px;vertical-align:0}

/* ابزارهای سمت دیگرِ نوار */
.mb-tools{display:flex;align-items:center;gap:2px;flex:none;margin-inline-start:auto}
.mb-acc{position:relative}
.mb-accbtn{
  display:flex;align-items:center;height:34px;padding:0 8px;border:0;background:none;
  border-radius:var(--r-sm);cursor:pointer;font:inherit;
}
.mb-accbtn:hover{background:var(--line-soft)}
#menubar #whoami{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink)}
#menubar #whoami .avatar{
  width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;
}
.mb-accdrop{inset-inline-start:auto;inset-inline-end:0;min-width:180px}
.mb-accdrop a,.mb-accdrop button{
  display:block;width:100%;text-align:start;padding:8px 10px;border:0;background:none;
  border-radius:var(--r-sm);color:var(--side-ink);text-decoration:none;font:inherit;
  font-size:13px;font-weight:500;cursor:pointer;
}
.mb-accdrop a:hover,.mb-accdrop button:hover{background:var(--line-soft);color:var(--ink)}
.mb-accdrop #app-ver{
  border-top:1px solid var(--line-soft);margin-top:6px;padding:8px 10px 2px;
  font-size:10.5px;color:var(--dim);
}

/* نوار دومِ صفحه: فقط عنوان و آمار */
.topbar{margin:0 calc(-1 * var(--main-pad,22px)) 16px;
  padding:11px var(--main-pad,22px);top:52px}

/* ---------- گوشی: نوار منو جمع می‌شود ---------- */
@media(max-width:1000px){
  /* نوار منو یک لایهٔ مستقل می‌سازد؛ اگر پایین‌تر از پردهٔ پشتِ منو بنشیند،
     پردهٔ نیمه‌شفاف روی خودِ منو می‌افتد و لمس کار نمی‌کند. */
  #menubar{gap:4px;padding:0 12px;z-index:80}
  #menubar .nav-toggle{display:flex}
  #menubar .mb-brand{border:0;padding-inline-end:0;margin-inline-end:0}
  #menubar .mb-brand b{display:none}
  #menubar nav{
    position:fixed;inset-block:0;inset-inline-start:0;width:290px;max-width:86vw;
    flex-direction:column;align-items:stretch;gap:0;background:var(--card);
    border-inline-end:1px solid var(--line);box-shadow:var(--shadow-lg);
    padding:14px 10px 24px;overflow-y:auto;z-index:70;
    transform:translateX(100%);transition:transform .22s;
  }
  body.nav-open #menubar nav{transform:none}
  .mb-menu{position:static}
  .mb-top{width:100%;height:auto;padding:9px 11px}
  .mb-top .mb-ar{margin-inline-start:auto;transform:rotate(-90deg)}
  .mb-menu.open>.mb-top .mb-ar{transform:rotate(90deg)}
  #menubar nav .mb-drop{
    position:static;display:none;border:0;box-shadow:none;padding:0 0 6px 0;
    background:none;min-width:0;
  }
  /* این سه قانون باید هم‌وزنِ قانونِ بالا باشند، وگرنه «#menubar nav» که
     شناسه دارد از آن‌ها قوی‌تر می‌شود و زیرمنو روی گوشی هرگز باز نمی‌شود —
     کلاسِ «باز» می‌نشیند ولی چیزی دیده نمی‌شود. */
  #menubar nav .mb-menu.open>.mb-drop{display:block}
  #menubar nav .mb-menu:hover>.mb-drop{display:none}
  #menubar nav .mb-menu.open:hover>.mb-drop{display:block}
  .mb-cols{flex-direction:column;gap:0}
  .mb-col{min-width:0}
  .mb-col + .mb-col{border:0;padding:0;border-top:1px solid var(--line-soft);margin-top:4px;padding-top:4px}
  #menubar nav .mb-drop a{padding-inline-start:26px}
  #menubar #whoami span:not(.avatar){display:none}
  main{--main-pad:12px;padding:0 var(--main-pad) 20px}
  .topbar{margin-bottom:14px;padding-top:10px;padding-bottom:10px}
}
@media(max-width:1000px){
  #nav-backdrop{display:block;position:fixed;inset:0;background:rgba(11,18,32,.45);
    opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
  #menubar nav{z-index:1}
  body.nav-open #nav-backdrop{opacity:1;pointer-events:auto}
}

/* ---------- رد پا (به‌جای نوار تکراریِ بخش‌ها) ---------- */
.crumb{display:flex;align-items:center;gap:6px;margin:0 0 14px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brand)}
.crumb b{color:var(--ink);font-weight:700}
.crumb i{display:flex;align-items:center;color:var(--dim)}
.crumb i .ico{width:13px;height:13px;vertical-align:0}

/* ---------- منوی کاربر: پیکان، و جا شدن روی گوشی ---------- */
.mb-accbtn{gap:5px}
.mb-accbtn .mb-ar{display:flex;align-items:center;color:var(--dim);
  transform:rotate(-90deg);transition:transform .18s}
.mb-accbtn .mb-ar .ico{width:12px;height:12px;vertical-align:0}
.mb-acc.open .mb-accbtn .mb-ar{transform:rotate(90deg)}
.mb-acc.open .mb-accbtn{background:var(--line-soft)}
@media(max-width:1000px){
  /* ابزارهای کاربر سمت چپِ نوارند، پس این منو هم از همان لبه آویزان می‌شود.
     اینجا عمداً «چپ» فیزیکی نوشته شده تا در چیدمان راست‌به‌چپ جابه‌جا نشود. */
  .mb-accdrop{position:fixed;top:52px;left:8px;right:auto;
    min-width:190px;z-index:90}
}

/* ---------- دکمهٔ حذفِ داخل جدول ---------- */
/* قرمزِ تو‌پُر در هر ردیفِ جدول، چشم را می‌دزدید و جدول را ترسناک می‌کرد.
   حذف همان‌قدر در دسترس می‌ماند، ولی رنگش را فقط موقع نزدیک‌شدن نشان می‌دهد. */
td .btn.sm.danger,td .btn.sm.red{
  background:transparent;color:var(--bad);border-color:var(--line);
}
td .btn.sm.danger:hover,td .btn.sm.red:hover{
  background:var(--bad-soft);border-color:var(--bad);color:var(--bad);
}

/* ============================================================
   ۳۸٫۸۹ — پایه‌های طرحِ تازه: اندازهٔ متن و اندازهٔ لمس
   ------------------------------------------------------------
   اندازه‌گیریِ پیش از این تغییر، روی گوشیِ ۳۹۰ پیکسلی:
     • قلمِ پایه ۱۳٫۵ پیکسل
     • در صفحهٔ «امروز» ۳۴ عنصرِ لمسی از ۳۵ تا، کوتاه‌تر از ۴۴ پیکسل
     • در «دفترِ معین» ۳۰ از ۳۱
   کمینهٔ ۴۴ پیکسل عددِ دل‌بخواه نیست؛ رهنمودِ هر دو سیستم‌عاملِ گوشی است.
   ============================================================ */
:root{ --tap:44px; --tap-lg:52px; }

body{font-size:14px}

@media(max-width:900px){
  body{font-size:15px}

  /* هر چیزی که انگشت باید بزند، دست‌کم یک بندِ انگشت جا بگیرد. */
  .btn,.icon-btn,button,select,
  input:not([type=checkbox]):not([type=radio]),
  .tabs a,.chip{ min-height:var(--tap) }

  .btn{padding-block:0;display:inline-flex;align-items:center;justify-content:center;
       font-size:14px;border-radius:12px}
  .btn.sm{padding-inline:14px;font-size:13px;border-radius:11px}
  .btn.primary,.btn.main{min-height:var(--tap-lg);font-size:15px;border-radius:14px}

  .icon-btn{width:var(--tap);height:var(--tap);border-radius:12px}

  input:not([type=checkbox]):not([type=radio]),select,textarea{
    font-size:16px;              /* زیرِ ۱۶ پیکسل، iOS هنگامِ تایپ صفحه را زوم می‌کند */
    border-radius:12px;padding-inline:12px}

  /* تیک و دکمهٔ رادیو خودشان کوچک می‌مانند، ولی ناحیهٔ لمسشان نه. */
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  label:has(> input[type=checkbox]),label:has(> input[type=radio]){
    min-height:var(--tap);display:flex;align-items:center;gap:8px}

  /* گوشه‌ها روی گوشی یک پله بازتر — طرحِ تأییدشده */
  .card,.panel{border-radius:16px}

  .tabs a{padding-inline:14px;display:inline-flex;align-items:center}
}

/* ============================================================
   ۳۸٫۹۰ — نوارِ پایینیِ گوشی و صفحهٔ «همهٔ بخش‌ها»
   ------------------------------------------------------------
   نوار فقط روی گوشی هست. روی رایانه اصلاً ساخته نمی‌شود که دیده شود،
   چون آنجا نوارِ بالا کارِ خودش را می‌کند.
   ============================================================ */
#tabbar{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

@media(max-width:900px){
  #tabbar{
    display:flex;align-items:center;gap:2px;
    position:fixed;inset:auto 0 0 0;z-index:60;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--card) 94%,transparent);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  #tabbar a{
    flex:1 1 0;min-width:0;min-height:var(--tap);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;border-radius:14px;
    color:var(--dim);text-decoration:none;
  }
  #tabbar a.on{background:var(--brand-soft);color:var(--brand-ink)}
  #tabbar a .ico{width:21px;height:21px}
  /* نامِ بلند در دو سطر می‌پیچد؛ بریدن با سه‌نقطه بدتر از دو سطر است. */
  #tabbar .tb-t{font-size:10.5px;font-weight:500;line-height:1.15;text-align:center;
    max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;word-break:break-word}
  #tabbar a.on .tb-t{font-weight:700}

  /* محتوا نباید زیرِ نوار گم شود. */
  main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}

  /* صفحهٔ «همهٔ بخش‌ها» */
  .mr-wrap{display:flex;flex-direction:column;gap:18px}
  .mr-search{display:flex;align-items:center;gap:9px;min-height:var(--tap);
    padding:0 13px;background:var(--card);border:1px solid var(--line);border-radius:13px}
  .mr-search .ico{width:18px;height:18px;color:var(--dim);flex:none}
  .mr-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;
    font-size:16px;color:var(--ink);padding:0}
  .mr-sec{display:flex;flex-direction:column;gap:9px}
  .mr-h{font-size:11.5px;font-weight:700;color:var(--dim);padding-inline-start:3px}
  .mr-grp{display:flex;flex-direction:column;gap:6px}
  .mr-gh{font-size:11px;color:var(--dim);padding:6px 3px 0}
  .mr-list{background:var(--card);border:1px solid var(--line);border-radius:16px;
    overflow:hidden}
  .mr-row{display:flex;align-items:center;gap:11px;min-height:52px;padding:0 14px;
    color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-soft)}
  .mr-row:last-child{border-bottom:0}
  .mr-dot{width:7px;height:7px;border-radius:50%;flex:none}
  .mr-rt{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .mr-pin{width:var(--tap);height:var(--tap);margin-inline-end:-10px;flex:none;
    display:flex;align-items:center;justify-content:center;color:var(--line)}
  .mr-pin.on{color:var(--warn)}
  .mr-pin .ico{width:17px;height:17px}
  .mr-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .mr-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;min-height:78px;padding:8px 4px;background:var(--card);
    border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none}
  .mr-tile .ico{width:21px;height:21px;color:var(--brand)}
  .mr-tt{font-size:10.5px;font-weight:500;line-height:1.2;text-align:center;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mr-empty{padding:26px 0;text-align:center;color:var(--dim);font-size:13.5px}
}

@media print{#tabbar{display:none!important}}

/* ============================================================
   ۳۸٫۹۱ — جدول‌ها روی گوشی کارت می‌شوند
   ------------------------------------------------------------
   نامِ ستون از data-l می‌آید که app.js از <th> همان جدول برداشته؛
   هیچ فهرستِ دومی از نامِ ستون‌ها وجود ندارد.
   ============================================================ */
@media(max-width:900px){
  table.cardy{display:block;width:100%;border:0;background:none;font-size:14px}
  table.cardy thead{display:none}
  table.cardy tbody{display:flex;flex-direction:column;gap:10px}

  table.cardy tr{
    display:flex;flex-direction:column;gap:0;
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:4px 14px;overflow:hidden;
  }
  table.cardy tr + tr{margin:0}

  table.cardy td{
    display:flex;align-items:baseline;gap:12px;
    padding:9px 0;border:0;border-bottom:1px solid var(--line-soft);
    text-align:start;white-space:normal;
  }
  table.cardy td:last-child{border-bottom:0}
  table.cardy td::before{
    content:attr(data-l);
    flex:0 0 38%;max-width:38%;
    font-size:11.5px;color:var(--dim);line-height:1.5;
  }

  /* ستونِ اول سرِ کارت است: بزرگ، بی‌برچسب، بی‌خطِ جدا نیست. */
  table.cardy td:first-child{
    padding-top:12px;font-size:15px;font-weight:600;line-height:1.4;
  }
  table.cardy td:first-child::before{display:none}

  /* سلولِ خالی و ستونِ بی‌نام (دکمه‌ها) */
  table.cardy td.cy-empty{display:none}
  table.cardy tfoot :is(th,td):empty{display:none}   /* ۴۰٫۱۱: خانه‌های خالیِ ردیفِ جمع روی گوشی */
  table.cardy td.cy-act{gap:8px;flex-wrap:wrap;padding-top:11px}
  table.cardy td.cy-act::before{display:none}

  /* سطرِ «چیزی ثبت نشده» */
  table.cardy tr.cardy-note{align-items:center;padding:18px 14px;color:var(--dim)}
  table.cardy tr.cardy-note td{border:0;padding:0;font-size:13.5px}
  table.cardy tr.cardy-note td::before{display:none}

  /* رنگِ معنا سرِ جایش می‌ماند: پول، وضعیت، بدهی. */
  table.cardy td .money,table.cardy td .badge{font-size:14px}
  table.cardy td:not(:first-child){color:var(--ink)}
}


/* ============================================================
   ۳۸٫۹۳ — نوارِ بالا جا می‌شود: هر چه نشد، پشتِ «بیشتر»
   ------------------------------------------------------------
   پیش از این، ماژولِ جانشده از لبهٔ صفحه بیرون می‌زد: در عرضِ ۱۰۲۴
   پیکسل ۴۲۶ پیکسل و در ۱۴۴۰ پیکسل ۱۰ پیکسل. حالا app.js عرض را
   اندازه می‌گیرد و هر چه جا نشد کلاسِ ovf می‌گیرد.
   ============================================================ */
.mb-menu.ovf{display:none!important}

#nav-more .mb-top{color:var(--muted)}
#nav-more .mb-drop{inset-inline-end:auto;inset-inline-start:0}
#nav-more .mb-cols{max-width:min(78vw,760px)}

/* ============================================================
   ۳۸٫۹۶ — زیرمنوی بلند از لبهٔ صفحه بیرون نزند
   ------------------------------------------------------------
   با ادغامِ منوها در ۳۸٫۹۴، منوی «شرکتی» ده گروه شد. ستون‌ها در یک
   ردیفِ بدونِ شکست می‌نشستند:

     عرض 1280 → زیرمنو 2036 پیکسل، 991 پیکسل بیرون از صفحه
     عرض 1366 → 905 بیرون
     عرض 1920 → 351 بیرون

   دو چیز لازم بود: ستون‌ها بشکنند، و خودِ جعبه از عرضِ صفحه پهن‌تر نشود.
   عددِ ستون ثابت نوشته نمی‌شود؛ هر چند تا جا شد، جا می‌شود.
   ============================================================ */
/* width:max-content یعنی «عرضِ کاملِ بدونِ شکست»؛ max-width آن را
   می‌بُرد و همان‌جا شکست می‌افتد. بدونِ اولی، جعبهٔ مطلق عرضش را از
   باریک‌ترین حالت می‌گیرد و هر ده ستون روی هم می‌افتند (اندازه‌گیری:
   عرضِ ۲۲۰، بلندیِ ۸۱۰). */
.mb-cols{flex-wrap:wrap;width:max-content;max-width:min(96vw,1120px)}

/* جعبه هرگز از صفحه پهن‌تر نشود، هر جای نوار که باشد. */
.mb-drop{max-width:calc(100vw - 16px);box-sizing:border-box}

/* ستونِ اولِ هر ردیفِ تازه نباید خطِ جداکنندهٔ کناری بگیرد — وگرنه خطی
   وسطِ هوا می‌افتد. :not(:first-child) کافی نیست چون شکستِ ردیف در CSS
   دیده نمی‌شود؛ به‌جایش خط را به خودِ ستون می‌دهیم و با فاصله جبران. */
.mb-col{padding-block:2px}

/* گروه‌های زیاد = جعبهٔ بلند. از ارتفاعِ پنجره بلندتر نشود. */
.mb-drop{max-height:calc(100vh - var(--saas-bar-h,0px) - 90px);overflow:auto}

/* ============================================================
   ۳۸٫۹۷ — قابِ ماژول رنگِ خودِ ماژول را می‌گیرد
   ------------------------------------------------------------
   کاربر نوارِ پایینیِ تازه را پسندید و خواست نوارِ بالا تیره و به رنگِ
   خودِ ماژول باشد، با نامِ صفحه و مسیر.

   قاعده‌ای که نگه داشته می‌شود: رنگ در هیچ قاعده‌ای ثابت نوشته نمی‌شود.
   --mod را app.js از روی MODULES می‌نویسد؛ صفحه‌هایی که ماژول ندارند
   (خانه، تنظیمات) هیچ مقداری نمی‌گیرند و var(--mod,var(--brand)) خودش
   به رنگِ برنامه برمی‌گردد. پس رستهٔ تازه فقط یک رنگ در MODULES اضافه
   می‌کند و هیچ قاعده‌ای در این فایل دست نمی‌خورد.

   چرا فقط روی گوشی: روی رایانه نوارِ بالا خودش منوست و ده ماژول کنار هم
   نشسته‌اند؛ اگر پس‌زمینه رنگِ یکی‌شان را بگیرد، نُه تای دیگر روی آن
   رنگ خوانده می‌شوند. آنجا رنگ همان‌جایی می‌ماند که تا امروز بود:
   نشانِ ماژول و ماژولِ باز.
   ============================================================ */
@media(max-width:1000px){
  #menubar{
    background:var(--mod,var(--brand));border-bottom-color:transparent;
    box-shadow:none;
  }
  #menubar .mb-brand,#menubar .icon-btn,#menubar #whoami{color:#fff}
  #menubar .icon-btn:hover{background:rgba(255,255,255,.14);color:#fff}
  #menubar .mb-brand .logo{
    background:rgba(255,255,255,.16);color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  }
  #menubar #whoami .avatar{background:rgba(255,255,255,.16);color:#fff}

  /* نوارِ عنوان درست زیرِ منو می‌نشیند و همان رنگ را می‌گیرد، پس این دو
     مثلِ یک تکه دیده می‌شوند. backdrop-filter برداشته می‌شود چون روی
     پس‌زمینهٔ سیر کارِ دیگری می‌کند و لبهٔ مات می‌سازد. */
  .topbar{
    background:var(--mod,var(--brand));border-bottom-color:transparent;
    backdrop-filter:none;
  }
  .topbar h2{color:#fff;-webkit-text-fill-color:#fff}
  .topbar .date{color:rgba(255,255,255,.72)}
  .topbar .icon-btn{color:#fff}

  /* نشانِ ماژول روی گوشی تکراری‌ست: خودِ رنگِ نوار همان را می‌گوید. */
  #mod-badge.show{display:none}
}

/* ══════════ حالتِ نصب‌شده روی گوشی — «قاب» (۳۹٫۰۸) ══════════
   با viewport-fit=cover صفحه تا لبهٔ فیزیکیِ گوشی می‌رود، پس هر چیزی که به
   لبه چسبیده باید خودش کنار بکشد. عددها ثابت نوشته نمی‌شوند: env() روی
   دستگاهی که ناچ ندارد صفر است، پس همین قاعده‌ها روی اندرویدِ ساده هم درست
   درمی‌آیند. */
@media(max-width:1000px){
  #menubar{
    padding-top:env(safe-area-inset-top,0px);
    height:calc(52px + env(safe-area-inset-top,0px));
    /* نوارِ بالا در حالتِ نصب‌شده خودش پس‌زمینهٔ نوارِ وضعیتِ گوشی هم هست */
    box-sizing:border-box;
  }
  .topbar,main{
    padding-inline-start:max(var(--main-pad,0px),env(safe-area-inset-left,0px));
    padding-inline-end:max(var(--main-pad,0px),env(safe-area-inset-right,0px));
  }
  /* ۳۹٫۸۳: کشوی منو هم از زیرِ ناچ و نوارِ وضعیت بیرون بیاید (روی آیفونِ نصب‌شده سطرِ اولش
     زیرِ نوارِ وضعیت پنهان می‌ماند و کشو خالی دیده می‌شد) */
  #menubar nav{padding-top:calc(14px + env(safe-area-inset-top,0px));
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  /* نوارِ عنوان زیرِ نوارِ منو می‌چسبد، و نوارِ منو حالا به‌اندازهٔ ناچ بلندتر است */
  .topbar{top:calc(52px + env(safe-area-inset-top,0px))}
  /* پنجره‌ها هم نباید زیرِ ناچ یا خطِ پایین بروند */
  #modal-bg{
    padding-top:max(16px,env(safe-area-inset-top,0px));
    padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  }
}

/* ---------- جزئیاتِ لمسی: چیزهایی که «وب‌بودن» را لو می‌دهند ---------- */
html{
  -webkit-text-size-adjust:100%;          /* چرخاندنِ گوشی متن را بزرگ نکند */
  overscroll-behavior-y:none;             /* کشِ آمدنِ کلِ صفحه هنگام کشیدن */
}
body{overscroll-behavior-y:none}
*{-webkit-tap-highlight-color:transparent}
/* متنِ خودِ داده انتخاب‌شدنی می‌ماند (شمارهٔ IMEI و تلفن را باید بشود کپی
   کرد)؛ فقط قاب و دکمه‌ها از انتخابِ اتفاقی بیرون می‌آیند. */
#menubar,#tabbar,.topbar,.btn,button,label,summary,.badge,.tab,.sheet-item,
.combo-row,.crumbs,.secbar{
  -webkit-user-select:none;user-select:none;
}
button,.btn,a{touch-action:manipulation}   /* بدونِ تأخیرِ ۳۰۰ میلی‌ثانیه‌ای */

/* ---------- پردهٔ شروع ---------- */
#boot{
  position:fixed;inset:0;z-index:9999;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--brand,#1d4ed8);color:#fff;
  animation:bootOut .35s ease .2s forwards;
  animation-delay:2.5s;                    /* اگر JS نیامد، خودش می‌رود */
}
body.booted #boot{animation-delay:0s;pointer-events:none}
#boot .boot-logo{
  width:84px;height:84px;border-radius:24px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:800;letter-spacing:1px;
  animation:bootPulse 1.4s ease-in-out infinite;
}
#boot .boot-name{font-size:15px;opacity:.9}
@keyframes bootPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  #boot .boot-logo{animation:none}
}

/* ══════════ لایهٔ ۲ — صفحه‌های اپ‌مانند روی گوشی (۳۹٫۰۹) ══════════
   فقط وقتی فعال است که صفحه خودش body.m-app را بگذارد؛ بقیهٔ صفحه‌ها
   تا وقتی نوبتشان برسد، دست‌نخورده می‌مانند. مرز = مرزِ نوارِ پایینی. */
.m-only,.m-hdr-title,#m-sheet{display:none}
#m-more-btn{position:relative}
#m-more-dot{position:absolute;top:9px;inset-inline-end:9px;width:8px;height:8px;border-radius:50%;
  background:#f87171}
#m-more-dot.hidden{display:none}
.pw-x,.pw-short{display:none}

@media(max-width:900px){
  /* ---- سربرگ: عنوان + ذره‌بین + «⋯»؛ نوارِ عنوانِ دوم و ردِ پا نیست ---- */
  /* منوی کشویی و ردِ پا می‌مانند (۳۹٫۱۱): بدونِ آن‌ها کاربر نمی‌دانست کجاست
     و بینِ بخش‌ها راه پیدا نمی‌کرد. */
  body.m-app #menubar .mb-brand,
  body.m-app #menubar .mb-tools > :not(.m-keep){display:none}
  body.m-app #menubar .m-only{display:flex}
  #m-more-dot{box-shadow:0 0 0 2px var(--mod,var(--brand))}
  body.m-app #menubar .m-hdr-title{display:block;flex:1;min-width:0;color:#fff;
    font-size:19px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    padding-inline-start:4px}
  body.m-app #menubar .mb-tools{margin-inline-start:auto;gap:2px}
  body.m-app .topbar{display:none}
  body.m-app .crumb{margin:10px 0 0;font-size:14px}

  /* ---- هشدارِ رمز: یک خطِ باریکِ بستنی ---- */
  body.m-app #pw-warn{flex-wrap:nowrap;justify-content:flex-start;gap:8px;
    border-radius:12px;margin:10px 0 0;padding:4px 6px 4px 4px;padding-inline-start:12px;
    font-size:14px;min-height:44px}
  body.m-app #pw-warn b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-weight:700}
  body.m-app #pw-warn .pw-long,body.m-app #pw-warn .pw-full{display:none}
  body.m-app #pw-warn .pw-short{display:inline}
  body.m-app #pw-warn .btn{min-height:36px;padding-inline:10px;font-size:13.5px;white-space:nowrap}
  body.m-app #pw-warn .pw-x{display:flex;align-items:center;justify-content:center;
    width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:10px;
    background:rgba(255,255,255,.16);color:#fff}
  body.m-app #pw-warn .pw-x .ico{width:16px;height:16px}
  body.m-app.pw-closed #pw-warn{display:none}

  /* ---- بدنه ---- */
  body.m-app main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .m-page{display:flex;flex-direction:column;gap:18px;padding-top:12px}
  .m-page .mex-hint{margin:0;font-size:14px}

  .m-sec{display:flex;flex-direction:column;gap:8px}
  .m-sec-h{display:flex;align-items:center;gap:8px;padding:0 4px}
  .m-sec-h h3{margin:0;font-size:16px;font-weight:800;color:var(--ink)}
  .m-cnt{min-width:24px;height:24px;padding:0 7px;border-radius:12px;display:inline-flex;
    align-items:center;justify-content:center;font-size:14px;font-weight:700;
    background:var(--line-soft);color:var(--ink)}
  .m-cnt.ok{background:var(--ok-soft);color:var(--ok)}
  .m-cnt.bad{background:var(--bad-soft);color:var(--bad)}
  .m-cnt.warn{background:var(--warn-soft);color:var(--warn)}
  .m-date{margin-inline-start:auto;color:var(--dim);font-size:14px}

  .m-list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .m-row{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;margin:0;
    padding:10px 14px;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;
    background:none;color:var(--ink);font:inherit;text-align:start;box-shadow:none}
  .m-row:last-child{border-bottom:0}
  button.m-row:active{background:var(--line-soft)}
  .m-row.bad{box-shadow:inset -3px 0 0 var(--bad)}
  .m-row.warn{box-shadow:inset -3px 0 0 var(--warn)}
  [dir=ltr] .m-row.bad{box-shadow:inset 3px 0 0 var(--bad)}
  .m-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .m-t{font-size:16px;font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .m-s{font-size:14px;color:var(--dim);line-height:1.45;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .m-amt{flex:none;font-size:15px;font-weight:700;white-space:nowrap;
    }
  .m-amt small{font-weight:500;color:var(--dim);font-size:14px}
  .m-amt .badge{font-size:14px;white-space:nowrap}
  .m-chev{flex:none;display:flex;color:var(--dim);margin-inline-end:-4px}
  .m-chev .ico{width:18px;height:18px}
  .m-page .ok{color:var(--ok)} .m-page .bad,.m-amt.bad{color:var(--bad)} .m-page .warn{color:var(--warn)}
  .m-amt.ok{color:var(--ok)}
  .m-more{display:flex;align-items:center;gap:4px;align-self:flex-start;min-height:var(--tap);
    padding:0 4px;color:var(--brand-ink);font-size:14px;font-weight:600;text-decoration:none}
  .m-more .ico{width:16px;height:16px}
  .m-empty{background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:18px;font-size:15px;line-height:1.8;color:var(--dim)}

  /* خلاصهٔ امروز: دو ستون، عدد درشت، واحد یک بار در عنوان */
  .m-kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .m-kpi{background:var(--card);padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
  .m-kpis .m-kpi:last-child:nth-child(odd){grid-column:1 / -1}
  .m-kl{font-size:14px;color:var(--dim)}
  .m-kv{font-size:19px;font-weight:800;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .m-kv.ok{color:var(--ok)} .m-kv.bad{color:var(--bad)} .m-kv.warn{color:var(--warn)}
  .m-note{margin:0;padding:0 4px;font-size:14px;color:var(--dim)}

  /* ردیفِ چیپ */
  .m-hz{display:flex;flex-direction:column;gap:6px}
  .m-hz-l{font-size:14px;color:var(--dim);padding:0 4px}
  .m-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 2px 2px;
    margin:0 calc(-1 * var(--main-pad,12px));padding-inline:var(--main-pad,12px)}
  .m-chips::-webkit-scrollbar{display:none}
  .m-chip{flex:none;min-height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--line);
    background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:600}
  .m-chip.on{background:var(--mod,var(--brand));border-color:transparent;color:#fff}

  /* نوارِ راه‌اندازی */
  .m-setup{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:52px;
    padding:10px 14px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);
    color:var(--ink);font:inherit;text-align:start;overflow:hidden}
  .m-su-t{flex:1;min-width:0;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .m-su-s{font-weight:500;color:var(--dim);font-size:14px}
  .m-su-go{display:flex;align-items:center;gap:2px;color:var(--brand-ink);font-size:14px;font-weight:700}
  .m-su-go .ico{width:16px;height:16px}
  .m-su-bar{position:absolute;inset:auto 0 0 0;height:4px;background:var(--line-soft)}
  .m-su-bar i{display:block;height:100%;background:var(--mod,var(--brand))}

  /* هشدارِ باریکِ عمومی */
  .m-alert{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 4px;
    padding-inline-start:12px;border-radius:12px;background:var(--warn-soft);color:var(--ink);font-size:14px}
  .m-alert.bad{background:var(--bad);color:#fff}
  .m-al-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-al-x{width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:10px;
    background:transparent;color:inherit;display:flex;align-items:center;justify-content:center}
  .m-al-x .ico{width:16px;height:16px}

  /* دکمهٔ شناورِ «+» — بالای نوارِ پایینی، سمتِ پایانِ خط */
  .m-fab{position:fixed;z-index:61;left:16px;
    bottom:calc(84px + env(safe-area-inset-bottom,0px));
    width:58px;height:58px;min-height:58px;padding:0;border:0;border-radius:18px;
    background:var(--mod,var(--brand));color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 22px rgba(0,0,0,.24)}
  .m-fab .ico{width:28px;height:28px;stroke-width:2.4}
  .m-fab:active{transform:scale(.96)}

  /* برگهٔ پایینی */
  #m-sheet{position:fixed;inset:0;z-index:95;background:rgba(11,18,32,.45);
    align-items:flex-end;justify-content:center}
  #m-sheet.open{display:flex}
  .ms-box{width:100%;max-height:82vh;overflow-y:auto;background:var(--card);
    border-radius:20px 20px 0 0;padding:6px 12px calc(12px + env(safe-area-inset-bottom,0px));
    display:flex;flex-direction:column;gap:2px;box-shadow:0 -10px 30px rgba(0,0,0,.18)}
  .ms-grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:4px auto 8px}
  .ms-h{font-size:16px;font-weight:800;padding:2px 6px 8px;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ms-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:0;
    padding:8px 8px;border:0;border-radius:12px;background:none;color:var(--ink);
    font:inherit;font-size:16px;text-align:start;text-decoration:none}
  .ms-row:active{background:var(--line-soft)}
  .ms-row.danger{color:var(--bad)}
  .ms-i{flex:none;width:28px;display:flex;justify-content:center;font-size:19px}
  .ms-i .ico{width:21px;height:21px}
  .ms-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .ms-t{font-weight:600}
  .ms-s{font-size:14px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ms-cancel{margin-top:6px;min-height:50px;border:0;border-radius:14px;background:var(--line-soft);
    color:var(--ink);font:inherit;font-size:16px;font-weight:700}
}
@media print{.m-fab,#m-sheet{display:none!important}}

/* ══════════ کلِ ماژولِ موبایل روی گوشی (۳۹٫۱۰) ══════════
   همان DOMِ رومیزی، بازچیده. فقط زیرِ body.m-app و فقط روی گوشی. */
@media(max-width:900px){
  body.m-app #content .m-moved{display:none!important}
  body.m-app #content .toolbar.m-tb-empty{display:none}
  body.m-app #content .toolbar{flex-wrap:wrap;gap:8px}
  body.m-app #content .toolbar .m-chips{flex:1 1 100%;margin:0;padding-inline:0}
  body.m-app #content .hint,body.m-app #content small{font-size:14px}

  /* جدول ← ردیف: ستونِ اول درشت، مبلغ در انتها، بقیه یک خطِ کم‌رنگ */
  body.m-app table.m-rows tbody{gap:0;background:var(--card);border:1px solid var(--line);
    border-radius:16px;overflow:hidden}
  body.m-app table.m-rows tr{flex-direction:row;flex-wrap:wrap;align-items:baseline;
    column-gap:8px;row-gap:2px;min-height:64px;padding:11px 14px;border:0;border-radius:0;
    border-bottom:1px solid var(--line-soft);background:none}
  body.m-app table.m-rows tr:last-child{border-bottom:0}
  body.m-app table.m-rows tr.m-tap{cursor:pointer}
  body.m-app table.m-rows tr.m-tap:active{background:var(--line-soft)}
  body.m-app table.m-rows td{display:inline;padding:0;border:0;font-size:14px;color:var(--dim)}
  body.m-app table.m-rows td::before{display:none}
  body.m-app table.m-rows td.cy-title{order:0;flex:1 1 55%;min-width:0;padding:0;
    font-size:16px;font-weight:700;color:var(--ink);line-height:1.4}
  body.m-app table.m-rows td.cy-amt{order:1;flex:none;margin-inline-start:auto;
    font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
  body.m-app table.m-rows td.cy-sub{order:2;flex:0 1 auto;min-width:0;line-height:1.5}
  body.m-app table.m-rows td.cy-sub1{flex-basis:auto}
  body.m-app table.m-rows td.cy-subn::before{display:inline;content:"·";margin-inline-end:8px;
    flex:none;max-width:none;color:var(--dim);font-size:14px}
  body.m-app table.m-rows td.cy-sub .badge{font-size:13.5px}
  body.m-app table.m-rows td.cy-act{display:none}
  body.m-app table.m-rows tr.cardy-note{justify-content:center}
  body.m-app table.m-rows tr.cardy-note td{font-size:14px}
  /* خطِ دوم همیشه زیرِ خطِ اول شروع شود */
  body.m-app table.m-rows td.cy-sub1{flex-grow:0}
  body.m-app table.m-rows tr::after{content:"";order:1;flex-basis:100%;height:0}
}
@media(max-width:900px){
  body.m-app table.m-rows td.cy-empty,body.m-app table.m-rows td.cy-dash{display:none}
  body.m-app table.m-rows td{background:none!important}
  /* جدول داخلِ پنل: خودِ پنل قابِ فهرست است، نه یک قابِ دوم */
  body.m-app .panel table.m-rows tbody{border:0;border-radius:0;background:none}
  body.m-app .panel table.m-rows tr{padding-inline:2px}
}
@media(max-width:900px){
  /* زبانه‌های نوارِ ابزار (گزارش‌ها) یک ردیفِ چیپِ افقی */
  body.m-app #content .m-tabrow{margin-bottom:10px}
  body.m-app #content .m-tabrow > .btn{flex:none;min-height:40px;border-radius:20px;font-size:14px;
    white-space:nowrap;padding-inline:14px}
}

/* ══════════ نوارِ جمعِ فاکتور — دو طبقه (۳۹٫۱۳) ══════════
   پیش از این ده کادر در یک نوارِ چسبان: روی گوشی ۳۲۰ پیکسل (۳۸٪ صفحه)،
   روی رایانه ۱۴۵. حالا یک خط همیشه پیدا و بقیه پشتِ «جزئیات». */
.ivfoot{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;
  background:var(--card);color:var(--ink);border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(0,0,0,.10)}
.ivfoot .ivf-main,.ivfoot .ivf-more{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px}
.ivfoot .ivf-more{display:none;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.ivfoot.open .ivf-more{display:flex}
.ivfoot .ivfp{background:none;border:0;border-radius:10px;padding:2px 8px;min-width:0;text-align:start}
.ivfoot .ivfp .t{font-size:13.5px;color:var(--dim);margin:0}
.ivfoot .ivfp .v{font-size:15px;font-weight:800;color:var(--ink)}
.ivfoot .ivfp.hl{background:var(--brand-soft)}
.ivfoot .ivfp.hl .v{color:var(--brand-ink);font-size:17px}
.ivfoot .ivfp.pf{background:var(--ok-soft);border:0}
.ivfoot .ivfp input,.ivfoot .ivfp select{background:var(--card);color:var(--ink);border:1px solid var(--line);
  width:120px;padding:5px 8px;font-size:15px;border-radius:9px}
.ivfoot .ivfp input.ivf-pct{width:46px;padding:2px 4px;text-align:center;font-size:13.5px}
.ivfoot .gr{color:var(--ok)} .ivfoot .rd{color:var(--bad)}
.ivfoot .btn{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.ivfoot .btn.primary{background:#16a34a;color:#fff;border-color:transparent;padding-inline:22px}
.ivf-tog{border:0;background:none;color:var(--brand-ink);font:inherit;font-size:14px;font-weight:700;
  padding:6px 8px;cursor:pointer}
.ivfoot.open .ivf-tog span{display:inline-block;transform:rotate(180deg)}
.ivf-sp{flex:1}
@media(max-width:900px){
  /* روی گوشی: جمعِ کل و مانده در خطِ اول، دریافت و ذخیره در خطِ دوم؛ «انصراف» همان پیکانِ بالای فرم است */
  .ivfoot .ivf-main{gap:4px 8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  .ivfoot .ivf-cancel,.ivfoot .ivf-sp{display:none}
  .ivfoot .ivf-save{margin-inline-start:auto;min-height:46px}
  .ivfoot .ivfp input{width:110px}
  .ivfoot .ivf-more .ivfp{flex:1 1 40%}
  /* پنجرهٔ باز: دکمهٔ «+» و نوارِ پایینی روی فرم نمی‌افتند */
  body:has(#modal-bg:not(.hidden)) .m-fab,
  body:has(#modal-bg:not(.hidden)) #tabbar{display:none}
}

/* ══════════ ردیف‌های فاکتور روی گوشی (۳۹٫۱۳) ══════════
   جدولِ ۹ستونه با حداقل ۱۰۴۰ پیکسل روی گوشی فقط «کالا» و «شرح» را نشان
   می‌داد؛ تعداد و قیمت بیرونِ صفحه بودند. همان سطرها، همان کادرها، فقط
   چیدمان: هر ردیف یک کارت — کالا، سپس تعداد/قیمت/تخفیف، سپس شرح و جمع. */
@media(max-width:900px){
  table.ivtable{min-width:0;border:0;background:none}
  .ivtable thead,.ivtable tfoot{display:none}
  .ivtable tbody{display:flex;flex-direction:column;gap:10px}
  .ivtable tbody tr{display:grid;grid-template-columns:1fr 1fr 1fr 44px;
    grid-template-areas:"nm nm nm del" "qty pr ds ds" "de de ru sm";
    border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
  .ivtable tbody tr td{border:0;height:auto;background:var(--card)!important;display:flex;flex-direction:column;
    justify-content:center;min-width:0}
  .ivtable td.rn{display:none}
  .ivtable td:nth-child(2){grid-area:nm;border-bottom:1px solid var(--line-soft)}
  .ivtable td:nth-child(3){grid-area:de}
  .ivtable td:nth-child(4){grid-area:qty}
  .ivtable td:nth-child(5){grid-area:ru;font-size:13.5px;text-align:center}
  .ivtable td:nth-child(6){grid-area:pr}
  .ivtable td:nth-child(7){grid-area:ds}
  .ivtable td:nth-child(8){grid-area:sm;padding:0 12px;font-size:15px;font-weight:800;text-align:left}
  .ivtable td:nth-child(9){grid-area:del;border-bottom:1px solid var(--line-soft)}
  .ivtable td:nth-child(4),.ivtable td:nth-child(6),.ivtable td:nth-child(7){border-bottom:1px solid var(--line-soft)}
  .ivtable td:nth-child(4)::before{content:"تعداد"}
  .ivtable td:nth-child(6)::before{content:"قیمتِ واحد"}
  .ivtable td:nth-child(7)::before{content:"تخفیف"}
  .ivtable td:nth-child(4)::before,.ivtable td:nth-child(6)::before,.ivtable td:nth-child(7)::before{
    font-size:13.5px;color:var(--dim);padding:6px 10px 0}
  .ivtable input{height:44px;font-size:16px}
  .ivtable td:nth-child(2) input{height:52px;font-weight:700}
  .ivgrid{overflow:visible}
  /* سررسیدِ فاکتور: یک ردیفِ چیپ، نه پنج دکمهٔ تمام‌عرض */
  .row.ivdue{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .row.ivdue .btn{flex:none;width:auto;border-radius:18px}
}
@media(max-width:900px){
  /* فرمِ تازه شش ردیفِ خالی دارد؛ روی گوشی فقط اولینِ خالی دیده شود — «افزودن ردیف» بقیه را می‌آورد */
  .ivtable tbody tr:has(.ivsearch[value=""]) ~ tr:has(.ivsearch[value=""]){display:none}
}

/* ══════════ همهٔ فرم‌ها روی گوشی (۳۹٫۱۴) ══════════
   فقط زیرِ ۹۰۰ پیکسل؛ رایانه دست نمی‌خورد. همهٔ فرم‌ها از #modal می‌گذرند،
   پس این قاعده‌ها یک‌جا همه را می‌گیرند: فرمِ دریافت و پرداخت، پذیرش، پرسنل،
   فاکتور، پیش‌فاکتور، … */
@media(max-width:900px){
  /* نوارِ بالای برنامه روی فرم می‌افتاد و نوارِ خودِ فرم (برگشت + عنوان) زیرش گم بود */
  body:has(#modal-bg:not(.hidden)) #menubar{display:none}
  #modal-top{min-height:52px}
  #modal-top b{font-size:17px}
  /* فرم لبه‌تا‌لبه، نه کارتی وسطِ صفحهٔ خاکستری */
  #modal{width:100%;margin:0;border:0;border-radius:0;box-shadow:none;padding:12px 14px 0;min-height:calc(100vh - 52px)}
  #modal label{font-size:14px}
  #modal .hint{font-size:13.5px}
  /* دکمهٔ ذخیره همیشه پیدا، پایینِ صفحه — نه بعد از اسکرول تا تهِ فرم */
  #modal .row:has(> #f-save){position:sticky;bottom:0;z-index:5;margin:14px -14px 0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.06)}
  #modal .row:has(> #f-save) > #f-save{flex:1}
  #modal .row:has(> #f-save) > .btn:not(#f-save){flex:0 0 auto}
  /* دکمه‌های کنارِ تاریخ (روزِ قبل، تقویم، روزِ بعد) داخلِ همان کادر، نه یک ردیفِ جدا */
  /* فقط داخلِ فرم؛ در کادرهای باریکِ پالایهٔ صفحه‌ها رقمِ آخرِ تاریخ پشتِ دکمه‌ها می‌رفت (۳۹٫۱۷) */
  #modal .dtbar{display:flex;justify-content:flex-end;gap:2px;height:0;position:relative;top:calc(-1 * var(--tap) + 2px);
    padding-inline-end:4px;pointer-events:none}
  #modal .dtbar button{pointer-events:auto;height:calc(var(--tap) - 6px);min-height:0;min-width:36px;padding:0 6px;
    border:0;border-radius:9px;background:var(--line-soft)}
  #modal input.dt-date,#modal input.dt-month{padding-left:128px!important}
  /* چند دکمهٔ کوچکِ کنارِ هم (سررسید، بازه‌ها): یک ردیفِ افقی، نه دکمه‌های تمام‌عرضِ روی هم */
  #modal .row:has(> .btn.sm + .btn.sm + .btn.sm){flex-direction:row;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;gap:6px}
  #modal .row:has(> .btn.sm + .btn.sm + .btn.sm) > .btn{flex:none;width:auto;border-radius:18px}

  /* فاکتور و پیش‌فاکتور: سربرگِ خودش با متنِ سفید روی زمینهٔ روشن نامرئی بود */
  #modal-bg:has(#modal.iv) #modal-top{display:none}
  #modal.iv{padding:0}
  .iv-head{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);flex-wrap:nowrap;
    padding:8px 10px;gap:8px;min-height:56px}
  .iv-head h3{color:var(--ink);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .iv-head .ivback{background:var(--brand-soft);color:var(--brand-ink)}
  .iv-head .iv-no{display:none}
  .iv-head .btn{background:var(--card);color:var(--ink);border:1px solid var(--line)}
  /* ذخیره و ذخیرهٔ موقت در نوارِ پایینِ فرم هستند؛ اینجا فقط «ذخیره و چاپ» */
  .iv-head .btn.primary,.iv-head .btn[onclick*="false,true)"]{display:none}
  .iv-top{grid-template-columns:1fr}
}
@media(max-width:900px){
  #modal .row:has(> #f-save){flex-direction:row;align-items:center}
  #modal .row:has(> #f-save) > .btn{margin:0}
  /* عنوانِ فرم در نوارِ بالای خودش هست؛ تکرارش در بدنه یک ردیفِ هدر است */
  #modal-bg:not(:has(#modal.iv)) #modal > h3:first-child{display:none}
}
@media(max-width:900px){
  #modal .row:has(> #f-save) > .btn{width:auto;min-width:0}
  #modal .row:has(> #f-save) > #f-save{flex:1 1 auto}
  #modal .row:has(> #f-save) > .btn:not(#f-save){flex:0 0 28%}
}

/* ══════════ فاکتور روی گوشی، دورِ دوم (۳۹٫۱۵) ══════════ */
.ivf-rem{font-size:13.5px;color:var(--dim);white-space:nowrap}
.ivf-rem .v{display:inline;font-size:14px;font-weight:800}
@media(max-width:900px){
  /* نوارِ جمع یک ردیف: جمع (و مانده زیرش) · دریافت · جزئیات · ذخیره */
  .ivfoot .ivf-main{flex-wrap:nowrap;gap:6px;align-items:center}
  .ivfoot .ivf-main > .ivfp{flex:0 1 auto;padding:4px 6px}
  .ivfoot .ivfp .t{font-size:13.5px}
  .ivfoot .ivfp.hl .v{font-size:16px}
  .ivfoot .ivf-main .ivfp input{width:96px;height:38px;min-height:0}
  .ivfoot .ivf-tog{padding:6px 2px;white-space:nowrap}
  .ivfoot .ivf-save{padding-inline:14px;min-height:44px;white-space:nowrap}

  /* بالای فاکتور: تاریخ و شماره کنارِ هم، بقیه تمام‌عرض؛ کادرها کوتاه‌تر */
  .iv-top{grid-template-columns:1fr 1fr;gap:0 10px}
  .iv-top > div:first-child,.iv-top > div:nth-child(2),.iv-top > div:last-child{grid-column:1 / -1}
  .iv-top label{margin-top:8px}
  .iv-top input,.iv-top select{min-height:44px!important;height:44px;padding-block:6px!important}
  /* کادرِ تاریخِ نیم‌عرض جای سه دکمه ندارد: فقط تقویم */
  #modal .iv-top .dtbar button[data-a="-1"],#modal .iv-top .dtbar button[data-a="1"]{display:none}
  #modal .iv-top input.dt-date{padding-left:48px!important}
  #modal .iv-top .dtbar{top:-40px}
  #modal .iv-top .dtbar button{height:36px}
  #modal .row.ivdue .btn{min-height:34px;font-size:14px;padding-inline:12px}

  /* ردیف‌ها: «افزودن» یک دکمهٔ بزرگ درست زیرِ کارت‌ها؛ حذف با نام، نه یک ✕ ریز */
  .inv-chips .ivadd{order:-1;flex:1 1 100%;min-height:50px;font-size:16px;border:2px dashed currentColor;
    background:var(--ok-soft)!important;color:var(--ok)!important}
  .ivtable td.rdel button{font-size:0;height:44px;color:var(--bad)}
  .ivtable td.rdel button::before{content:"حذف";font-size:14px;font-weight:700}
  .ivtable tbody tr{grid-template-columns:1fr 1fr 1fr 56px}
  /* فقط یک ردیفِ خالی — همیشه آخرین — دیده شود */
  .ivtable tbody tr:has(.ivsearch[value=""]) ~ tr:has(.ivsearch[value=""]){display:grid}
  .ivtable tbody tr:has(.ivsearch[value=""]):has(~ tr .ivsearch[value=""]){display:none}
}

/* ══════════ بالای فاکتور: خلاصهٔ یک‌خطی (۳۹٫۱۶) ══════════ */
.iv-meta-tog{display:none}
@media(max-width:900px){
  .iv-top:not(.meta-open) > div:not(:first-child){display:none}
  .iv-top .iv-meta-tog{display:flex;grid-column:1 / -1;align-items:center;gap:8px;width:100%;margin-top:8px;
    min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);
    color:var(--ink);font:inherit;font-size:14px;text-align:start}
  .iv-meta-tog span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}
  .iv-meta-tog b{flex:none;color:var(--brand-ink);font-size:14px}
}

/* ══════════ مبلغ هرگز بریده نشود (۳۹٫۱۷) ══════════
   روی آیفونِ مهدی رقمِ آخرِ مبلغِ ردیف‌ها دیده نمی‌شد (۴٬۱۳۳٬۵۲۰ ← «۴٬۱۳۳٬۵۲»)؛
   داده سالم بود. عدد یک تکهٔ چپ‌به‌راستِ جدا می‌شود، کمینهٔ پهنایش خودِ متن است
   و ردیف چیزی را نمی‌بُرد. */
@media(max-width:900px){
  body.m-app table.m-rows tr{overflow:visible}
  body.m-app table.m-rows td.cy-amt,.m-amt,.m-kv{flex:0 0 auto;min-width:max-content;overflow:visible;
    direction:ltr;unicode-bidi:isolate;text-align:left;padding-inline:2px}
}
@media(max-width:900px){
  /* کادرهای پالایه با پهنای ثابتِ رایانه (۱۲۰px) روی گوشی با فونتِ ۱۶ رقمِ آخر را نشان نمی‌دادند */
  body.m-app #content input[style*="width"]:not([type=checkbox]):not([type=radio]){width:auto!important;
    flex:1 1 140px;min-width:140px}
}

/* ══════════ فاکتورِ خریدِ موبایل (۳۹٫۱۹) ══════════
   همان جدولِ فاکتورِ شرکتی؛ ردیفِ گوشی یک برچسب دارد. */
.mpi-tag{display:inline-block;font-size:13.5px;font-weight:800;color:var(--brand-ink);margin-bottom:3px}
/* ۳۹٫۶۲: برند/رنگ/حافظه (زیرِ نام) و گارانتی/رجیستری/وضعیت (زیرِ IMEI) —
   کادرهای باریک، همیشه پیدا؛ به‌خواستِ کاربر دیگر ردیفِ دومِ بازشونده نیست. */
.mpi-mini{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
/* دو رقیب اینجا !important دارند: .ivtable input (حاشیه) و #modal select
   (پدینگ/فونت) — چون یکی‌شان گزینشگرِ شناسه دارد، فقط کلاسِ بیشتر کافی
   نیست؛ !important هم لازم است، وگرنه پدینگِ ۱۱px متنِ کادرِ ۲۸پیکسلی را
   بیرون می‌راند و فقط فلشِ select دیده می‌شود. */
.ivtable .mpi-mini-i{flex:1 1 90px!important;min-width:64px;width:auto!important;
  font-size:13.5px!important;padding:3px 6px!important;height:30px!important;
  border-radius:6px!important;text-overflow:ellipsis;
  border:1px solid var(--line)!important;background:var(--card)!important}
.mpi-mini-c{display:flex;align-items:center;gap:4px;flex:0 0 auto;min-width:0;font-size:13.5px;
  border:1px solid var(--line);border-radius:8px;padding:0 6px;height:30px;background:var(--card);white-space:nowrap}
.mpi-mini-c input{width:auto!important;flex:0 0 auto}
.ivtable.mpi td.ru .btn{margin:2px 0;white-space:nowrap}
@media(max-width:900px){
  /* ردیفِ گوشی: IMEI تمام‌عرض، تعداد (همیشه ۱) پنهان، دکمه‌ها کنارِ جمع */
  .ivtable.mpi tbody tr.mpi-dev{display:grid!important;
    grid-template-areas:"nm nm nm del" "de de de de" "pr pr ds ds" "ru ru ru sm"}
  .ivtable.mpi tr.mpi-dev td:nth-child(4){display:none}
  .ivtable.mpi tr.mpi-dev td:nth-child(3){border-bottom:1px solid var(--line-soft)}
  /* ۳۹٫۶۵: خانه‌های «nm»/«de» چهارستونی‌اند (چهار ردیفِ گرید را در یک
     td می‌گیرند) و برند/رنگ/حافظه یا گارانتی/رجیستریِ داخلشان با
     flex-wrap دو خط می‌شوند؛ display:flex ِ پایه (برایِ وسط‌چین‌کردنِ
     ردیف‌های تک‌خطیِ فاکتورِ لوازم) روی همین خانه‌های چندستونی، ارتفاعِ
     ردیفِ گرید را کمتر از نیازِ واقعیِ محتوا حساب می‌کرد — ردیفِ زیرین
     رویش می‌افتاد. block، اندازه‌گیریِ درست را برمی‌گرداند. */
  .ivtable.mpi tr.mpi-dev td:nth-child(2),
  .ivtable.mpi tr.mpi-dev td:nth-child(3){display:block}
  .ivtable .mpi-mini-i,.mpi-mini-c{flex-basis:100px;height:var(--tap);font-size:13.5px}
  .ivtable.mpi td.ru{flex-direction:row;gap:4px;padding:4px}
  .ivtable.mpi td.ru .btn{flex:1;min-height:40px;padding:0 4px;font-size:13.5px}
}
@media(max-width:900px){
  /* «پرداختِ الان» با ۹۶ پیکسل، ۱۰۰٬۰۰۰٬۰۰۰ ریال را «۰٬۰۰۰٬۰۰۰» نشان می‌داد (۳۹٫۱۹) */
  .ivfoot .ivf-main .ivfp input{width:124px;font-size:15px;padding-inline:6px}
  /* اندازه‌گیری: جمع + پرداخت + جزئیات + ذخیره روی ۳۹۰ پیکسل ۴۱۸ پیکسل می‌خواست و
     دکمهٔ «ذخیره» از لبهٔ صفحه بیرون می‌زد. دو ردیف: مبلغ‌ها، سپس جزئیات و ذخیره. */
  .ivfoot .ivf-main{flex-wrap:wrap}
  .ivfoot .ivf-main > .ivfp.hl{flex:1 1 auto}
  .ivfoot .ivf-main .ivf-tog{flex:0 0 auto;order:5}
  .ivfoot .ivf-main .ivf-save{flex:1 1 auto;order:6;margin-inline-start:0}
}
/* سربرگِ فاکتورِ خریدِ موبایل روی رایانه هم خوانا (متنِ سفید روی زمینهٔ روشن نماند) */
.iv-head.mpi-head{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line)}
.iv-head.mpi-head h3{color:var(--ink)}
.iv-head.mpi-head .ivback{background:var(--brand-soft);color:var(--brand-ink)}
/* فاکتورِ فروشِ موبایل (۳۹٫۲۰): ردیف‌های دریافت و جدولِ قسط */
.msi-part{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.msi-part > b{min-width:58px}
.msi-part .pp-amt{width:140px}
.msi-part input,.msi-part select{width:auto;flex:0 1 auto}
table.msi-plan td input{min-width:90px}
/* ۳۹٫۴۳: راهنمای قیمتِ خرید/معاوضهٔ کارکرده — کادرِ خط‌چین، یعنی «پیشنهاد، نه ثبت» */
.mph{border:1px dashed var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.mph-h{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin-bottom:4px}
.mph-s{font-size:17px;margin:6px 0 2px}
.mph-s b{color:var(--brand-ink)}
.mph-warn{color:var(--warn);margin:6px 0}
.mph-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 14px;margin:10px 0 6px}
.mph-g > div{display:flex;flex-direction:column;min-width:0}
.mph-g span,.mph-g small{color:var(--muted);font-size:13.5px}
.msi-part .mph-box{flex:1 1 100%}
.msi-igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:4px 10px}
.msi-igrid label{margin-top:6px}
@media(max-width:900px){
  .msi-part{border:1px solid var(--line);border-radius:12px;padding:8px}
  .msi-part .pp-amt{flex:1 1 60%}
  .msi-part input:not(.pp-amt),.msi-part select{flex:1 1 45%}
  .msi-igrid{grid-template-columns:1fr 1fr}
  /* کادرِ تاریخ با سه دکمه‌اش در نیم‌عرض جا نمی‌شد و «۱۴۰۵» زیرِ دکمه‌ها می‌رفت */
  .msi-igrid > div:has(input.dt-date){grid-column:1 / -1}
  table.msi-plan{font-size:14px}
  table.msi-plan td,table.msi-plan th{padding:4px}
  table.msi-plan td input{min-width:0;width:100%;height:40px}
}
table.msi-plan{max-width:760px}

/* ══════════ اسکن با دوربین (۳۹٫۴۳) ══════════
   کادر و 📷 در یک ردیفِ انعطافی (camAttach کادر را در .cam-wrap می‌گذارد)؛
   راهنمای زیرِ کادرِ IMEI (mobileWireImeiHint) به خطِ بعد می‌رود. داخلِ جدولِ
   فاکتور دکمه بی‌قاب است تا ارتفاعِ ردیف و خطوطِ جدول عوض نشود. */
.cam-wrap{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap;width:100%;min-width:0}
.cam-wrap > input{flex:1 1 0;min-width:0;width:auto}
.cam-wrap > .cam-btn{order:1}
.cam-wrap > .hint{flex-basis:100%;order:2}
.cam-btn{flex:none;min-width:44px;padding:0 8px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.cam-btn:hover{border-color:var(--brand2);background:var(--brand-soft)}
.ivtable .cam-wrap{gap:0;flex-wrap:nowrap;height:100%}
.ivtable .cam-btn{border:0;border-radius:0;background:transparent;min-width:40px;font-size:17px}
#camscan{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(11,18,32,.6);padding:16px}
#camscan.open{display:flex}
#camscan .cam-card{background:var(--card);color:var(--ink);border-radius:16px;width:min(460px,100%);
  max-height:calc(100dvh - 32px);overflow:auto;padding:14px;box-shadow:var(--shadow-lg)}
#camscan .cam-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:16px}
#camscan .cam-x{border:0;background:transparent;color:var(--muted);font-size:20px;min-width:40px;min-height:40px;cursor:pointer}
#camscan .cam-view{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:4/3}
#camscan video{width:100%;height:100%;object-fit:cover;display:block}
#camscan .cam-aim{position:absolute;inset:24% 10%;border:2px solid rgba(255,255,255,.9);border-radius:10px;
  box-shadow:0 0 0 999px rgba(0,0,0,.28)}
#camscan .cam-st{margin:10px 0 6px;font-size:14.5px;line-height:1.8}
#camscan .cam-st.bad{color:var(--bad)}
#camscan .cam-ch{display:flex;flex-direction:column;gap:8px;margin:6px 0}
#camscan .cam-pick{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px;font-size:15px}
#camscan .cam-pick .ltr{direction:ltr;unicode-bidi:isolate;font-size:15px;letter-spacing:.5px}
#camscan .cam-shot{display:flex;justify-content:center;align-items:center;min-height:48px;margin-top:6px;font-size:15px;cursor:pointer}
#camscan .cam-why{margin:10px 0 0;font-size:13.5px;line-height:1.8}
@media print{#camscan{display:none!important}}

/* ══════════ چیدمانِ دلخواه (۳۹٫۲۳) ══════════ */
body.arr-on .arr-item{position:relative;outline:2px dashed color-mix(in srgb,var(--brand) 40%,transparent);
  outline-offset:2px;border-radius:12px}
/* دستگیره بیرونِ گوشه می‌نشیند، نه روی متن؛ بلوکِ بزرگ گوشهٔ چپ، چیزهای داخلش گوشهٔ راست
   — تا دستگیرهٔ بلوک و دستگیرهٔ اولین کارتش روی هم نیفتند */
.arr-h{position:absolute;top:-12px;inset-inline-end:-8px;z-index:6;width:30px;height:30px;display:grid;
  place-items:center;border-radius:50%;background:var(--brand);color:var(--card);font-size:17px;line-height:1;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow-lg)}
.cards > .arr-item > .arr-h,.dash-grid > .arr-item > .arr-h,.mb-col > .arr-item > .arr-h{
  inset-inline-end:auto;inset-inline-start:-8px}
#nav .arr-h{width:24px;height:24px;font-size:14px;top:-8px}
body.arr-on .cards,body.arr-on .dash-grid{padding-top:8px}
.arr-x{position:absolute;top:-12px;inset-inline-end:-8px;z-index:6;width:30px;height:30px;display:grid;
  place-items:center;border-radius:9px;background:var(--bad-soft);color:var(--bad);font-size:15px;cursor:pointer}
.arr-ph{border:2px dashed var(--brand);border-radius:12px;background:var(--brand-soft);box-sizing:border-box;
  list-style:none}
.arr-drag{box-shadow:var(--shadow-lg);opacity:.93;cursor:grabbing}
.arr-hidden{display:none!important}
#arr-bar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:130;background:var(--card);
  color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px 12px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px)}
#arr-bar .arr-t{font-size:13.5px}
@media(max-width:900px){#arr-bar{bottom:calc(74px + env(safe-area-inset-bottom,0px))}}
@media print{#arr-bar,.arr-h,.arr-x{display:none!important}}

/* ══════════ داشبوردِ ویجتی (۳۹٫۲۳) ══════════ */
.bw-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dash-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dw{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);
  min-width:0}
.dw-s{grid-column:span 1}.dw-m{grid-column:span 2}.dw-l{grid-column:1 / -1}
.dw-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.dw-h h3{margin:0;font-size:15px}
.dw-s .dw-h{display:none}
.bw-top{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px}
.bw-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);
  color:var(--brand-ink)}
.bw-v{font-size:24px;font-weight:800;margin:10px 0 4px;min-width:max-content;unicode-bidi:isolate}
.bw-v small{font-size:13.5px;font-weight:500;color:var(--muted)}
.bw-sub{font-size:13.5px;color:var(--muted);line-height:1.7}
.bw-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.bw-spark{width:120px;height:30px;margin-inline-start:auto}
.bw-d{font-weight:800;font-size:13.5px}.bw-d.up{color:var(--ok)}.bw-d.dn{color:var(--bad)}
.bw-dt{font-size:13.5px;color:var(--muted)}
.bw-list{display:flex;flex-direction:column}
.bw-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line-soft);
  color:var(--ink);text-decoration:none;font-size:14px}
.bw-row:last-child{border-bottom:0}
.bw-row:hover{background:var(--bg)}
.bw-rt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw-rd,.bw-rn{color:var(--muted);font-size:13.5px}
.bw-row b{min-width:max-content;unicode-bidi:isolate}
.bw-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}
.bw-dot.bad{background:var(--bad)}.bw-dot.warn{background:var(--warn)}
.bw-more{font-size:13.5px;color:var(--brand-ink);text-decoration:none}
@media(max-width:1100px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dw-m{grid-column:1 / -1}}
@media(max-width:900px){.dash-grid{gap:10px}.dw{padding:12px;border-radius:14px}.bw-v{font-size:20px}
  .bw-spark{width:100%;height:26px}.bw-ic{width:30px;height:30px}}
body.arr-on .arr-item{overflow:visible!important}

/* ══════════ ظاهرِ تازه — الگوی ویدیوی مهدی (۳۹٫۲۴) ══════════
   فقط رایانه (بالای ۱۰۰۰ پیکسل) و فقط وقتی body.skin2 است؛ «ظاهرِ کلاسیک» از منوی
   حساب برمی‌گرداند. همان نشانه‌گذاریِ منو، فقط چیدمان: نوارِ کناریِ تیره با
   عنوانِ بخش‌ها، گزینه‌ها همیشه دیده، بخشِ باز پررنگ؛ کارت‌های عددی با نشانِ
   رنگی؛ جدول و وضعیت‌ها کپسولی؛ پنل‌ها گردتر. */
:root{--sb-w:252px;--sb-bg:#0E1A33;--sb-ink:#C6D0E3;--sb-dim:#7E8CA8;--sb-hi:rgba(255,255,255,.07);
  --sb-acc:#E8B230;--sb-line:rgba(255,255,255,.07)}
[data-theme="dark"]{--sb-bg:#0A1120;--sb-line:rgba(255,255,255,.05)}
.mb-search{display:none}
@media(min-width:1001px){
  body.skin2 #app{padding-inline-start:var(--sb-w)}
  body.skin2 #menubar{height:60px;padding-inline:22px}
  body.skin2 #menubar .mb-brand{position:fixed;top:0;inset-inline-start:0;width:var(--sb-w);height:60px;z-index:47;
    margin:0;padding:0 18px;border:0;background:var(--sb-bg);color:#fff;box-sizing:border-box;
    border-bottom:1px solid var(--sb-line)}
  body.skin2 #menubar .mb-brand .logo{background:var(--sb-acc);color:#1b1300}
  body.skin2 #menubar nav{position:fixed;top:60px;bottom:0;inset-inline-start:0;width:var(--sb-w);z-index:46;
    flex-direction:column;align-items:stretch;gap:0;padding:10px 10px 28px;overflow-y:auto;overflow-x:hidden;
    background:var(--sb-bg);box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#2a3a5c transparent}
  body.skin2 #nav > a.mb-top{color:var(--sb-ink);height:40px;padding:0 12px;border-radius:10px;font-size:13.5px}
  body.skin2 #nav > a.mb-top .ico{color:var(--sb-dim)}
  body.skin2 #nav > a.mb-top:hover{background:var(--sb-hi);color:#fff}
  body.skin2 #nav > a.mb-top.active{background:var(--sb-hi);color:#fff;box-shadow:inset -3px 0 0 var(--sb-acc)}
  body.skin2 #nav .mb-menu{position:static;margin-top:10px;border-top:1px solid var(--sb-line);padding-top:6px}
  body.skin2 #nav .mb-menu > .mb-top{width:100%;height:30px;padding:0 8px;background:none!important;
    color:var(--sb-dim);font-size:13.5px;font-weight:700}
  body.skin2 #nav .mb-menu > .mb-top .mi{color:var(--m,var(--sb-acc))}
  body.skin2 #nav .mb-menu > .mb-top .mb-ar{margin-inline-start:auto;color:var(--sb-dim)}
  body.skin2 #nav .mb-menu.cur > .mb-top{color:#fff}
  body.skin2 #nav .mb-drop{position:static!important;display:none!important;background:none;border:0;box-shadow:none;
    padding:0;min-width:0;transform:none!important}
  /* ۳۹٫۲۷: فقط sb-open — بخشِ جاری هم مثلِ بقیه جمع می‌شود (sbApply پیش‌فرض بازش می‌کند) */
  body.skin2 #nav .mb-menu.sb-open > .mb-drop{display:block!important}
  body.skin2 #nav .mb-menu.sb-open > .mb-top .mb-ar{transform:rotate(90deg)}
  body.skin2 #nav .mb-cols{flex-direction:column;gap:0}
  body.skin2 #nav .mb-col{min-width:0}
  body.skin2 #nav .mb-col + .mb-col{border:0;padding:0;margin:0}
  body.skin2 #nav .mb-colh{color:var(--sb-dim);opacity:.8;font-size:13.5px;padding:8px 12px 3px}
  body.skin2 #nav .mb-drop a{color:var(--sb-ink);padding:8px 12px;border-radius:10px;font-size:13.5px}
  body.skin2 #nav .mb-drop a .ic{color:var(--sb-dim)}
  body.skin2 #nav .mb-drop a:hover{background:var(--sb-hi);color:#fff}
  body.skin2 #nav .mb-drop a.active{background:var(--sb-hi);color:#fff;font-weight:700;box-shadow:inset -3px 0 0 var(--sb-acc)}
  body.skin2 #nav .mb-drop a.active .ic{color:var(--sb-acc)}
  body.skin2 #nav .hub-col .hub-h{color:var(--sb-ink);padding:8px 12px;border-radius:10px;font-size:13.5px}
  body.skin2 #nav .hub-col .hub-h .ic,body.skin2 #nav .hub-col .hub-h .hub-ar{color:var(--sb-dim)}
  body.skin2 #nav .hub-col .hub-h:hover{background:var(--sb-hi);color:#fff}
  body.skin2 #nav .hub-col .hub-g.cur > .hub-h{color:#fff}
  body.skin2 #nav .hub-col .hub-g.cur > .hub-h .ic{color:var(--sb-acc)}
  body.skin2 #nav .hub-col .hub-sub a.hub-p{padding:6px 12px;padding-inline-start:42px;font-size:13.5px;color:var(--sb-dim)}
  body.skin2 #nav .hub-col .hub-sub a.hub-p:hover{color:#fff}
  body.skin2 #nav .hub-col .hub-sub a.hub-p.active{color:#fff}
  body.skin2 #nav-more{display:none!important}
  /* نوارِ بالا: جست‌وجوی پهن، مثلِ ویدیو */
  body.skin2 .mb-search{display:flex;align-items:center;gap:8px;flex:0 1 420px;height:40px;margin-inline-end:auto;
    padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--dim);
    font:inherit;font-size:13.5px;cursor:text;text-align:start}
  body.skin2 .mb-search kbd{margin-inline-start:auto;font:inherit;font-size:13.5px;color:var(--dim);
    border:1px solid var(--line);border-radius:6px;padding:0 6px;background:var(--card)}
  body.skin2 .topbar{top:60px;padding-block:16px;background:var(--bg);border:0}
  body.skin2 .topbar h2{font-size:22px;font-weight:800}
  /* کارت‌های عددی */
  body.skin2 .cards{gap:16px}
  body.skin2 .card{border-radius:16px;padding:18px;box-shadow:var(--shadow);position:relative}
  body.skin2 .card .cd-ic{position:absolute;top:16px;inset-inline-end:16px;width:40px;height:40px;border-radius:12px;
    display:grid;place-items:center;background:var(--cd-bg,var(--brand-soft));color:var(--cd-fg,var(--brand-ink))}
  body.skin2 .card .cd-ic .ico{width:20px;height:20px}
  body.skin2 .card:has(.cd-ic) .lbl{padding-inline-end:48px;min-height:20px}
  body.skin2 .card .val{font-size:24px;font-weight:800;margin-top:6px}
  body.skin2 .card.cd-ok{--cd-bg:var(--ok-soft);--cd-fg:var(--ok)}
  body.skin2 .card.cd-warn{--cd-bg:var(--warn-soft);--cd-fg:var(--warn)}
  body.skin2 .card.cd-bad{--cd-bg:var(--bad-soft);--cd-fg:var(--bad)}
  /* پنل و جدول */
  body.skin2 .panel{border-radius:16px;padding:20px;box-shadow:var(--shadow)}
  body.skin2 .panel > h3:first-child{font-size:16px}
  body.skin2 .panel table thead th{background:var(--bg);color:var(--muted);font-size:13.5px;font-weight:600;
    border-bottom:1px solid var(--line)}
  body.skin2 .panel table thead th:first-child{border-start-start-radius:10px;border-end-start-radius:10px}
  body.skin2 .panel table thead th:last-child{border-start-end-radius:10px;border-end-end-radius:10px}
  body.skin2 .panel table tbody td{padding-block:12px}
  body.skin2 .panel table tbody tr:hover td{background:var(--line-soft)}
  body.skin2 .badge{border-radius:999px;padding:3px 10px;font-weight:600}
  body.skin2 .toolbar{gap:8px}
  body.skin2 .toolbar .btn,body.skin2 .toolbar input,body.skin2 .toolbar select{border-radius:10px}
  body.skin2 .btn.primary{box-shadow:0 6px 14px -8px color-mix(in srgb,var(--brand) 80%,transparent)}
}
.card .cd-ic{display:none}
@media(min-width:1001px){body.skin2 .card .cd-ic{display:grid}}

/* ---------- نوارِ کناریِ جمع‌شونده و صفحه‌های فشرده‌تر (۳۹٫۲۷) ----------
   اندازه‌گیری پیش از این (۱۴۴۰×۹۰۰): نوارِ کناری ۱۰۷۸ پیکسل در صفحهٔ ۹۰۰ —
   ته‌اش زیرِ لبه می‌رفت و پیامِ پایینِ صفحه رویش می‌نشست. */
@media(min-width:1001px){
  /* پیام‌های پایینِ صفحه روی نوارِ کناری ننشینند */
  body.skin2 #toasts{right:auto;left:20px}
  /* صفحه: ردِ پا همان عنوان و نشانِ بخشِ نوارِ بالاست — این‌جا تکراری بود */
  body.skin2 #content > .crumb{display:none}
  body.skin2 .mex-hint{margin:0 0 10px}
  body.skin2 .topbar{padding-block:10px}
  body.skin2 .panel{padding:16px}
  body.skin2 .panel table tbody td{padding-block:9px}
  body.skin2 .cards{gap:12px}
  body.skin2 .card{padding:14px 16px}
  body.skin2 .card .cd-ic{top:12px;width:36px;height:36px}
  body.skin2 .card .val{font-size:22px;margin-top:4px}
}

/* ---------- تابلوی کانبانِ تعمیرها (۳۹٫۲۵) ---------- */
.kb-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.kb-seg .btn{border:0;border-radius:0;background:transparent;min-height:34px}
.kb-seg .btn.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.kb-hint{margin:4px 2px 10px}
.kb{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.kb-col{flex:1 1 0;min-width:250px;background:var(--line-soft);border:1px solid var(--line);
    border-radius:12px;padding:8px;scroll-snap-align:start;transition:background .15s,opacity .15s,box-shadow .15s}
.kb-h{display:flex;align-items:center;gap:8px;padding:4px 4px 10px}
.kb-n{font-size:14px;color:var(--muted)}
.kb-sum{margin-inline-start:auto;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.kb-list{display:flex;flex-direction:column;gap:8px;min-height:60px}
.kb-empty{margin:0;padding:18px 0;text-align:center;color:var(--dim);font-size:13.5px}
.kb-more{align-self:center}
.kb-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
    cursor:grab;box-shadow:var(--shadow);user-select:none;-webkit-user-select:none;transition:box-shadow .15s,border-color .15s}
.kb-card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.kb-card.late{border-inline-start:4px solid var(--bad)}
.kb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.kb-id{font-size:13.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.kb-grip{font-size:18px;color:var(--dim);cursor:grab;padding:2px 6px;margin:-4px -6px;touch-action:none;line-height:1}
.kb-dev{display:block;font-size:15px}
.kb-who{font-size:14px;color:var(--muted)}
.kb-issue{font-size:13.5px;color:var(--ink);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
.kb-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.kb-f{font-size:13.5px;padding:1px 8px;border-radius:99px;background:var(--line-soft);color:var(--muted)}
.kb-f.bad{background:var(--bad-soft);color:var(--bad)}
.kb-f.warn{background:var(--warn-soft);color:var(--warn)}
.kb-f.ok{background:var(--ok-soft);color:var(--ok)}
.kb-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:8px;
    padding-top:6px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--muted)}
.kb-foot b{color:var(--ink);font-variant-numeric:tabular-nums}
.kb-src{opacity:.35}
.kb-ghost{position:fixed;z-index:9999;pointer-events:none;transform:rotate(-2deg);box-shadow:var(--shadow-lg);opacity:.95}
body.kb-dragging,body.kb-dragging *{cursor:grabbing!important}
.kb-col.kb-ok{background:var(--brand-soft);border-style:dashed;border-color:var(--brand)}
.kb-col.kb-no{opacity:.45}
.kb-col.kb-over.kb-ok{box-shadow:0 0 0 2px var(--brand) inset}
.kb-cancel{display:none;position:fixed;bottom:16px;inset-inline:0;margin:auto;width:max-content;max-width:90vw;
    z-index:9998;padding:12px 22px;border-radius:99px;background:var(--bad-soft);color:var(--bad);
    border:2px dashed var(--bad);font-weight:700}
body.kb-dragging .kb-cancel.kb-ok{display:block}
.kb-cancel.kb-over{background:var(--bad);color:#fff}
@media(max-width:1000px){
  .kb{margin-inline:-4px;padding-inline:4px}
  .kb-col{flex:0 0 82vw;min-width:0}
}

/* ---------- ردیفی که پرونده دارد (۳۹٫۲۶) ---------- */
tr[data-go]{cursor:pointer}
tr[data-go]:hover > td{background:var(--brand-soft)}
table.kv th{text-align:start;font-weight:600;color:var(--muted);background:transparent;white-space:nowrap}
table.kv td,table.kv th{padding:8px 10px;border-bottom:1px solid var(--line-soft)}


@media(min-width:1001px){ #content tbody tr.row-view{cursor:pointer} #content tbody tr.row-view:hover > td{background:var(--brand-soft)} }

/* ---------- انتخابِ ماژول در نوارِ بالا (۳۹٫۳۱) ---------- */
#modtabs{display:none}
.sb-mini-btn{display:none!important}
@media(min-width:1001px){
  body.skin2 #modtabs{display:flex;align-items:center;gap:4px;height:40px;padding:4px;margin-inline-end:14px;
    border-radius:12px;background:var(--bg);border:1px solid var(--line)}
  body.skin2.mod-one #modtabs{display:none}
  body.skin2 .mt-tab{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:9px;
    background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
  body.skin2 .mt-tab:hover{background:var(--card);color:var(--ink)}
  body.skin2 .mt-tab.on{background:var(--m);color:#fff;box-shadow:0 4px 10px -6px var(--m)}
  body.skin2 .mt-tab .mt-i{font-size:15px;line-height:1}
  body.skin2 .mt-tab .mt-n{min-width:20px;height:20px;padding:0 6px;border-radius:99px;font-size:13.5px;line-height:20px;
    text-align:center;background:var(--bad);color:#fff;font-weight:700}
  body.skin2 .mt-tab.on .mt-n{background:#fff;color:var(--m)}
  /* رنگِ ماژول: خطِ زیرِ نوارِ بالا و گزینهٔ فعالِ نوارِ کناری */
  body.skin2 #menubar{box-shadow:inset 0 -3px 0 var(--modc,transparent)}
  body.skin2 #nav .mb-drop a.active{box-shadow:inset -3px 0 0 var(--modc,var(--sb-acc))}
  body.skin2 #nav .mb-drop a.active .ic{color:var(--modc,var(--sb-acc));filter:brightness(1.6)}
  /* نوارِ کناری فقط ماژولِ انتخاب‌شده — بی‌سرِ بخش، همهٔ گروه‌ها باز */
  body.skin2 #menubar nav{bottom:0}
  body.skin2 #nav > .mb-menu[data-mod]:not(.mod-sel){display:none}
  body.skin2 #nav > .mb-menu.mod-sel{margin-top:6px;padding-top:0;border-top:0}
  body.skin2 #nav > .mb-menu.mod-sel > .mb-top{display:none}
  body.skin2 #nav > .mb-menu.mod-sel > .mb-drop{display:block!important;max-height:none!important;overflow:visible!important}
  body.skin2 #nav .mb-colh{padding:10px 12px 3px}
  body.skin2 #nav > a.mb-top{height:40px;min-height:40px;display:flex;align-items:center;gap:10px;flex:none}
}

/* ---------- بخش‌های ماژولِ بزرگ، بالای نوارِ کناری (۳۹٫۳۳) ---------- */
#sectabs{display:none}
@media(min-width:1001px){
  body.skin2.has-sec #sectabs{display:grid;grid-template-columns:repeat(var(--secn,4),1fr);gap:4px;position:fixed;top:60px;
    inset-inline-start:0;width:var(--sb-w);height:62px;padding:6px 8px;box-sizing:border-box;z-index:47;
    background:var(--sb-bg);border-bottom:1px solid var(--sb-line)}
  body.skin2.has-sec #menubar nav{top:122px}
  body.skin2 .st-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;
    border-radius:10px;background:transparent;color:var(--sb-dim);font:inherit;font-size:13.5px;line-height:1.1;
    cursor:pointer;padding:2px}
  body.skin2 .st-tab span{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body.skin2 .st-tab .ico{width:18px;height:18px}
  body.skin2 .st-tab:hover{background:var(--sb-hi);color:#fff}
  body.skin2 .st-tab.on{background:var(--sb-hi);color:#fff;box-shadow:inset 0 -2px 0 var(--modc,var(--sb-acc))}
  body.skin2 #nav .mb-col.sec-hide{display:none}
}

/* ---------- رنگِ نوارِ کناری از رنگِ ماژول (۳۹٫۳۴) ----------
   همان رنگ با ۶۲٪ سیاهِ سرمه‌ای: هر رنگی که انتخاب شود، نوشته‌های روشنِ
   نوار خوانا می‌مانند (حتی زرد و صورتی). */
#sb-color{display:none}
@media(min-width:1001px){
  body.skin2{--sb-bg:color-mix(in srgb,var(--modc,var(--brand)) 38%,#070b16);
    --sb-hi:color-mix(in srgb,#fff 9%,transparent);--sb-line:color-mix(in srgb,#fff 8%,transparent)}
  [data-theme="dark"] body.skin2{--sb-bg:color-mix(in srgb,var(--modc,var(--brand)) 26%,#05080f)}
  body.skin2 #menubar nav,body.skin2 #menubar .mb-brand,body.skin2.has-sec #sectabs{transition:background-color .25s}
  /* دکمهٔ رنگ پایینِ نوار — بالا روی نامِ شرکت می‌افتاد */
  body.skin2 #menubar nav{bottom:42px}
  body.skin2 #sb-color{display:flex;align-items:center;gap:8px;position:fixed;bottom:0;inset-inline-start:0;z-index:48;
    width:var(--sb-w);height:42px;padding:0 18px;box-sizing:border-box;border:0;border-top:1px solid var(--sb-line);
    background:var(--sb-bg);color:var(--sb-dim);font:inherit;font-size:13.5px;cursor:pointer;transition:background-color .25s}
  body.skin2 #sb-color:hover{color:#fff}
}
.mc-sw{display:grid;grid-template-columns:repeat(6,40px);gap:10px;margin-top:10px}
.mc-dot{width:40px;height:40px;padding:0;border-radius:12px;border:3px solid transparent;background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 25%,transparent)}
.mc-dot.on{border-color:var(--ink)}
.mc-color{width:56px!important;height:36px!important;padding:2px!important;flex:none}

/* دکمهٔ «ویرایش» روی خودِ ردیفِ فاکتور — فقط گوشی؛ روی رایانه ستونِ دکمه‌ها هست (۳۹٫۳۶) */
.m-inline-edit{display:none}
body.m-app .m-inline-edit{display:inline-flex;margin-inline-start:8px;min-height:32px;padding:0 12px}

/* ══════════ هاب‌ها (۳۹٫۳۸) — «در منوها گم می‌شوم» ══════════
   ماژولِ هاب‌دار (موبایل): نوارِ کناری هفت سطر است و صفحه‌های هم‌خانواده
   زبانه‌های بالای صفحه. روی رایانه رنگِ اصلیِ برنامه (نوارِ بالا به تصمیمِ
   ۳۹٫۳۱ بی‌رنگِ ماژول می‌ماند)؛ روی گوشی رنگِ همان ماژول. */
.hubtabs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  background:var(--line-soft);padding:4px;border-radius:12px;width:max-content;max-width:100%;margin:0 0 16px}
.hubtabs::-webkit-scrollbar{display:none}
.hubtabs a{padding:7px 14px;border-radius:9px;color:var(--muted);font-weight:600;font-size:13.5px;
  white-space:nowrap;text-decoration:none}
.hubtabs a:hover{color:var(--ink)}
.hubtabs a.on{background:var(--card);color:var(--brand);box-shadow:0 1px 3px rgba(11,18,32,.10)}
.hubtabs a:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.hub-col .hub-sep{margin-top:10px}
.hub-col a.hub-a .ic .ico{width:19px;height:19px}
/* ۴۰٫۱۰ — منوی آکاردئونیِ حسابفا: سرتیترِ هاب (دکمه) و صفحه‌هایش زیرش (hubNavHtml در app.js).
   دکمه همان ظاهرِ پیوندهای منو را می‌گیرد؛ زیرفهرست فقط وقتی هاب باز است دیده می‌شود. */
.hub-col .hub-h{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;background:none;
  border-radius:var(--r-sm);color:var(--side-ink);font:inherit;font-size:13.5px;font-weight:500;text-align:start;cursor:pointer}
.hub-col .hub-h:hover{background:var(--line-soft);color:var(--ink)}
.hub-col .hub-h .ic{display:flex;align-items:center;color:var(--dim)}
.hub-col .hub-h .ic .ico{width:19px;height:19px}
.hub-col .hub-h .tx{flex:1}
.hub-col .hub-h .hub-ar{width:14px;height:14px;color:var(--dim);transition:transform .15s}
.hub-col .hub-g.open > .hub-h .hub-ar{transform:rotate(-90deg)}
.hub-col .hub-g.cur > .hub-h{font-weight:700;color:var(--ink)}
.hub-col .hub-g.cur > .hub-h .ic{color:var(--brand)}
.hub-col .hub-sub{display:none;padding:2px 0 6px}
.hub-col .hub-g.open > .hub-sub{display:block}
.mb-drop .hub-col .hub-sub a.hub-p{padding:6px 10px;padding-inline-start:38px;font-size:13.5px;white-space:normal;line-height:1.6}
.hub-col .hub-h:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* ردیفِ کاشی‌های آماریِ شرکتی در ماژولِ هاب‌دار بی‌معناست — جز خودِ شرکتی
   (۳۹٫۴۰): حاضرِ امروز و پروژهٔ فعال عددهای همین ماژول‌اند و باید بمانند. */
body.hubmod:not([data-mod="company"]) #live-tiles{display:none!important}

/* دکمهٔ «ثبتِ جدید» در سربرگ و منوی کوچکش */
.new-btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:8px 14px;
  background:var(--brand);color:#fff;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;
  white-space:nowrap;box-shadow:0 6px 14px -8px var(--brand)}
.new-btn .ico{width:17px;height:17px;stroke-width:2.4}
.new-btn:hover{filter:brightness(1.08)}
.new-btn.hidden{display:none}
#new-pop{position:fixed;z-index:90;min-width:230px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);padding:6px}
#new-pop.hidden{display:none}
#new-pop .np-h{font-size:13.5px;color:var(--dim);padding:6px 10px 4px;font-weight:600}
#new-pop .np-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;
  padding:9px 10px;border-radius:9px;font:inherit;font-size:14px;color:var(--ink);text-align:right;
  cursor:pointer;text-decoration:none}
#new-pop .np-row:hover{background:var(--line-soft)}
#new-pop .np-i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}
#new-pop .np-i .ico{width:17px;height:17px}

/* نوارِ پایینِ گوشی: «+» وسط */
@media(max-width:900px){
  .new-btn{display:none!important}
  #tabbar.tb-hub .tb-plus{flex:1 1 0;min-width:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:0}
  #tabbar.tb-hub .tb-pi{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;margin-top:-20px;
    background:var(--mod,var(--brand));color:#fff;box-shadow:0 8px 18px -8px var(--mod,var(--brand))}
  #tabbar.tb-hub .tb-pi .ico{width:26px;height:26px;stroke-width:2.4}
  body.hubmod.hubplus .m-fab{display:none!important}   /* ۳۹٫۴۰: فقط وقتی «+» نوار هست */
  /* اعلان‌ها روی نوارِ پایین نیفتند (قبلاً «دورهٔ آزمایشی…» دکمه‌ها را می‌پوشاند) */
  #toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .hubtabs{margin:10px 0 12px}
  /* ۴۰٫۱۰: روی گوشی زبانه‌های هاب چندسطری‌اند — نوارِ اسکرولیِ افقی زبانه‌های آخر (مثلاً «سرمایه‌گذارها»)
     را پنهان می‌کرد و کاربر نمی‌دانست هستند. زبانه‌های درونِ صفحه (subtabs) همان نوارِ لغزان می‌مانند. */
  nav.hubtabs:not(.subtabs){flex-wrap:wrap;overflow:visible;width:auto}
}
@media print{.hubtabs,.new-btn,#new-pop{display:none!important}}

/* ══════════ نمودارِ «روند» و نوارِ راه‌اندازی (۳۹٫۳۸) ══════════ */
.tr-card{margin:14px 0}
.tr-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tr-head h3{margin:0;display:flex;align-items:center;gap:6px}
.tr-head select{width:auto;font:inherit;font-weight:700;padding:3px 8px;border-radius:8px}
.tr-tools{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:8px}
.tr-seg{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--line-soft)}
.tr-seg button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;cursor:pointer;
  padding:5px 10px;border-radius:8px;font:inherit;font-size:13.5px;color:var(--muted)}
.tr-seg button .ico{width:15px;height:15px}
.tr-seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(11,18,32,.10)}
.tr-seg button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.tr-sum{color:var(--muted);font-size:13.5px;margin:10px 0 4px}
.tr-sum b{color:var(--ink);font-variant-numeric:tabular-nums}
.tr-sum i{font-style:normal;margin:0 8px;color:var(--dim)}
.tr-up{color:var(--ok);font-weight:700}
.tr-dn{color:var(--bad);font-weight:700}
.tr-plot{position:relative;height:260px}
.tr-plot svg{display:block}
.tr-plot text{font-family:inherit;font-size:13.5px;fill:var(--dim)}
.tr-plot .tr-ax.now{fill:var(--ink);font-weight:700}
.tr-plot .tr-leg text{fill:var(--muted)}
.tr-grid{stroke:var(--line);stroke-width:1}
.tr-grid.dash{stroke-dasharray:3 4}
.tr-bar{fill:color-mix(in srgb,var(--brand) 30%,var(--card))}
.tr-now{fill:var(--brand)}
.tr-prev{fill:color-mix(in srgb,var(--dim) 40%,var(--card))}
.tr-mk{transition:opacity .12s}
.tr-mk.dim{opacity:.45}
.tr-line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tr-pline{fill:none;stroke:var(--dim);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round}
.tr-area{fill:color-mix(in srgb,var(--brand) 14%,transparent)}
.tr-dot{fill:var(--brand);stroke:var(--card);stroke-width:2}
.tr-avg{stroke:var(--muted);stroke-width:1;stroke-dasharray:6 4;opacity:.8}
.tr-xh{stroke:var(--dim);stroke-width:1}
.tr-hit{fill:transparent;cursor:crosshair}
.tr-tip{position:absolute;z-index:3;pointer-events:none;display:flex;flex-direction:column;line-height:1.55;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;box-shadow:var(--shadow-lg);
  font-size:13.5px;white-space:nowrap}
.tr-tip.hidden{display:none}
.tr-tip b{font-size:14px;font-variant-numeric:tabular-nums}
.tr-tip em{font-style:normal;color:var(--muted);font-size:13.5px}
.tr-table{height:100%;overflow:auto;border:1px solid var(--line);border-radius:10px}
.tr-table table{margin:0}
@media(prefers-reduced-motion:reduce){.tr-mk{transition:none}}

.su-strip{margin-bottom:10px;padding:10px 14px}
.su-strip summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;flex-wrap:wrap}
.su-strip summary::-webkit-details-marker{display:none}
.su-strip .su-t{font-weight:700}
.su-strip .su-bar{flex:1;min-width:80px;max-width:260px;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.su-strip .su-bar i{display:block;height:100%;background:var(--brand);border-radius:4px}
.su-strip .su-go{margin-inline-start:auto;color:var(--dim);display:grid;transition:transform .15s}
.su-strip .su-go .ico{width:18px;height:18px}
.su-strip[open] .su-go{transform:rotate(180deg)}
.su-strip[open] summary{margin-bottom:8px}
/* ۳۹٫۸۲: راهنمای شروع، کارتِ خوش‌آمد و تورِ آشنایی */
.mh-welcome,.mh-hero{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px;
  background:var(--brand-soft);border-color:transparent}
.mh-wt{flex:1;min-width:220px}
.mh-wt h3{margin:0 0 4px}
.mh-wb{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mh-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.mh-head h3{margin:0}
.mh-bar{flex:1;min-width:80px;max-width:260px;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.mh-bar i{display:block;height:100%;background:var(--brand);border-radius:4px}
.mh-step{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-soft)}
.mh-step .mh-n{width:26px;height:26px;border-radius:99px;flex-shrink:0;display:grid;place-items:center;
  background:var(--line);font-weight:700;font-size:13.5px}
.mh-step.done .mh-n{background:var(--ok-soft);color:var(--ok)}
.mh-step.done b{opacity:.6}
.mh-st{flex:1;min-width:0}
.mh-q{flex:1;min-width:200px;max-width:380px;margin-inline-start:auto}
.mh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;align-items:start}
.mh-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card)}
.mh-card summary,.mh-faq summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.mh-card summary::-webkit-details-marker,.mh-faq summary::-webkit-details-marker{display:none}
.mh-card .mh-i{font-size:20px}
.mh-card .su-go{margin-inline-start:auto;color:var(--dim);display:grid;transition:transform .15s}
.mh-card .su-go .ico{width:18px;height:18px}
.mh-card[open] .su-go{transform:rotate(180deg)}
.mh-card ol{margin:10px 0 0;padding-inline-start:22px;line-height:1.9}
.mh-card.hidden{display:none}
.mh-faq{border-top:1px solid var(--line-soft);padding:10px 0}
.mh-faq p{margin:8px 0 0;color:var(--muted);line-height:1.9}
#tour{position:fixed;inset:0;z-index:9500}
#tour .tour-dim{position:fixed;inset:0;background:rgba(15,18,24,.55)}
#tour .tour-hl{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(15,18,24,.55);
  outline:2px solid var(--brand);pointer-events:none;transition:all .2s}
#tour .tour-card{position:fixed;background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:16px;padding:16px;box-shadow:var(--shadow-lg)}
#tour .tour-c{color:var(--muted);font-size:13.5px}
#tour h4{margin:4px 0 6px;font-size:17px}
#tour p{margin:0 0 12px;line-height:1.9}
#tour .tour-acts{display:flex;gap:8px;align-items:center}
@media(prefers-reduced-motion:reduce){#tour .tour-hl{transition:none}}
@media(max-width:900px){
  .tr-plot{height:220px}
  .tr-tools{margin-inline-start:0;width:100%;justify-content:space-between}
  /* روی گوشی نوعِ نمودار فقط نشانه است (نامش در title و aria-label) */
  .tr-seg button[data-trk="type"] span{display:none}
  .tr-seg button[data-trk="type"]{padding:6px 9px}
  .tr-seg button[data-trk="type"] .ico{width:18px;height:18px}
}

/* ══════════ ۳۹٫۴۳ — چک‌لیستِ وضعیتِ دستگاه، امضای مشتری، نرخ‌نامهٔ تعمیر ══════════
   سه وضعیتِ هر مورد یک کنترلِ سه‌تکه است (رادیوی واقعی، پس صفحه‌کلید و
   صفحه‌خوان هم کار می‌کنند). کادرِ امضا همیشه سفید است — مثلِ کاغذ — تا جوهرِ
   تیره در حالتِ تاریک هم دیده شود و خروجیِ PNG همان باشد که روی برگه می‌آید. */
.ck-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.ck-note-box{background:var(--brand-soft);border-radius:var(--r-sm);padding:9px 12px;color:var(--ink)}
.ck-sum{border-radius:var(--r-sm);padding:9px 12px;font-weight:700;font-size:14px;margin-bottom:8px}
.ck-sum.ok{background:var(--ok-soft);color:var(--ok)}
.ck-sum.warn{background:var(--warn-soft);color:var(--warn)}
.ck-list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ck-row{display:grid;grid-template-columns:minmax(150px,1.1fr) auto minmax(150px,1fr);gap:6px 12px;
  align-items:center;padding:8px 12px;border-top:1px solid var(--line-soft);border-inline-start:3px solid transparent}
.ck-row:first-child{border-top:0}
.ck-row.worse{background:var(--bad-soft);border-inline-start-color:var(--bad)}
.ck-row.better{background:var(--ok-soft);border-inline-start-color:var(--ok)}
.ck-item b{font-weight:700;font-size:14px}
.ck-ref{display:block;font-size:13.5px;color:var(--muted)}
.ck-ref.bad{color:var(--bad)}
.ck-ref.ok{color:var(--ok)}
.ck-flag{display:block;font-size:13.5px;font-weight:700}
.ck-flag:empty{display:none}
.ck-row.worse .ck-flag{color:var(--bad)}
.ck-row.better .ck-flag{color:var(--ok)}
.ck-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
#modal .ck-o{position:relative;display:block;margin:0;cursor:pointer;font-size:13.5px;font-weight:500}
.ck-o input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.ck-o span{display:block;padding:7px 12px;white-space:nowrap;color:var(--muted);font-size:13.5px;
  border-inline-start:1px solid var(--line);min-height:34px;box-sizing:border-box}
.ck-o:first-child span{border-inline-start:0}
.ck-o.ok input:checked + span{background:var(--ok-soft);color:var(--ok);font-weight:700}
.ck-o.bad input:checked + span{background:var(--bad-soft);color:var(--bad);font-weight:700}
.ck-o.na input:checked + span{background:var(--line-soft);color:var(--ink);font-weight:700}
.ck-o input:focus-visible + span{outline:2px solid var(--brand);outline-offset:-2px}
#modal .ck-row input.ck-note{padding:7px 10px;font-size:13.5px}
.ck-state{display:inline-block;padding:2px 10px;border-radius:99px;font-size:13.5px;font-weight:700;
  background:var(--line-soft);color:var(--muted)}
.ck-state.ok{background:var(--ok-soft);color:var(--ok)}
.ck-state.bad{background:var(--bad-soft);color:var(--bad)}
.ck-ntx{color:var(--muted);font-size:13.5px}
.ck-sign{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#modal .sig-row label{margin-top:0}
.sig-box{position:relative;margin-top:8px;height:190px;border:1.5px dashed var(--dim);border-radius:var(--r);
  background:#fff;overflow:hidden}
.sig-box canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;
  -webkit-user-select:none;user-select:none}
.sig-ph{position:absolute;inset:0;display:grid;place-items:center;color:#8b95a5;font-size:15px;pointer-events:none}
.sig-box.has .sig-ph{display:none}
.sig-base{position:absolute;inset-inline:24px;bottom:40px;border-bottom:1px solid #d5dae2;pointer-events:none}
.ck-tools,.sig-tools,.ck-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.ck-foot .spacer{flex:1}
.sig-done > div:last-child{flex:1;min-width:220px}
.sig-done{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.sig-img{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;width:260px;max-width:100%}
.sig-img img,.sig-mini img{display:block;width:100%;height:auto}
.ck-hist{margin-top:12px}
.ck-hist summary{cursor:pointer;font-weight:700;font-size:14px}
.ck-hrow{padding:8px 0;border-top:1px dashed var(--line)}
.ck-foot{margin-top:16px}
.ck-table tr.worse td{background:var(--bad-soft)}
.ck-table tr.better td{background:var(--ok-soft)}
.sig-pair{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0}
.sig-mini{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px;width:220px}
.sig-mini figcaption{font-size:13.5px;color:#475569;margin-top:4px}
@media(max-width:700px){
  .ck-row{grid-template-columns:1fr;padding:10px}
  .ck-seg{display:flex}
  #modal .ck-o{flex:1}
  .ck-o span{text-align:center;padding:9px 4px}
  .ck-row:not(.has-note):not(.ro) .ck-note{display:none}
  .sig-box{height:170px}
  .ck-foot > .btn{flex:1 1 auto}
  .ck-foot > .spacer{display:none}
}
/* نرخ‌نامه — در فرمِ پذیرش و صفحهٔ خودش */
.rate-table tr.off td{opacity:.55}
.rate-sug{border:1px solid var(--line);border-radius:var(--r);margin:-2px 0 12px;background:var(--brand-soft);overflow:hidden}
.rs-h{padding:8px 12px;font-size:13.5px;font-weight:700;color:var(--brand-ink)}
#modal .rs-row{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;border-top:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:14px;color:var(--ink);font-weight:400}
#modal .rs-row input{width:18px;height:18px;margin:0;flex:none}
.rs-tx{flex:1;min-width:0}
.rs-s{display:block;color:var(--muted);font-size:13.5px}
.rs-tag{display:inline-block;font-size:13.5px;border-radius:99px;padding:0 8px;background:var(--line-soft);color:var(--muted)}
.rs-tag.model{background:var(--ok-soft);color:var(--ok)}
.rs-tag.brand{background:var(--brand-soft);color:var(--brand-ink)}
.rs-amt{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-row.short .rs-amt{color:var(--muted)}
.rs-f{padding:8px 12px;font-size:13.5px;border-top:1px solid var(--line);background:var(--card)}
.rs-f:empty{display:none}
.rate-sug .bad,.rate-table .bad{color:var(--bad)}

/* ============================================================
   ۳۹٫۴۶ — ماندهٔ اشخاص، گردشِ حسابِ شخص، موجودیِ کالا
   ------------------------------------------------------------
   تشخیص با رنگ و متن هر دو: «بدهکار» (طلبِ من) کهربایی، «بستانکار»
   (بدهیِ من) قرمز — همان رنگ‌های کارت‌های «طلبِ من / بدهیِ من».
   ============================================================ */
.bal-amt.dr{color:var(--warn)}
.bal-amt.cr{color:var(--bad)}
.bal-tag{display:inline-block;border-radius:99px;padding:1px 9px;font-size:13.5px;font-weight:600;
  white-space:nowrap;background:var(--line-soft);color:var(--muted)}
.bal-tag.dr{background:var(--warn-soft);color:var(--warn)}
.bal-tag.cr{background:var(--bad-soft);color:var(--bad)}
.rep-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0}
.rep-filters input:not([type=checkbox]){width:190px;max-width:100%}
.rep-seg{display:inline-flex;flex-wrap:wrap;gap:4px}
.rep-chk{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;white-space:nowrap}
.rep-chk input{width:auto;margin:0}
/* ۳۹٫۷۳: انتخابِ چندتاییِ openForm — فهرستِ تیک‌دار، روی گوشی هم خوانا */
.fmulti{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:10px;
  padding:6px 8px;background:var(--card)}
.fmulti-i{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:14px;cursor:pointer}
.fmulti-i+.fmulti-i{border-top:1px dashed var(--line)}
.fmulti-i input{width:auto;margin:0;flex:none}
.fmulti-i span{flex:1}
/* ۳۹٫۷۱: فهرستِ «همهٔ گزارش‌ها» — کاشیِ کلیک‌شدنی، روی گوشی یک‌ستونه */
.rep-idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.rep-idx-b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:10px 12px;text-align:right;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:inherit;cursor:pointer;font:inherit;font-size:14px}
.rep-idx-b:hover{border-color:var(--brand);background:var(--brand-soft)}
@media(max-width:560px){.rep-idx{grid-template-columns:1fr}}
.rep-recon{max-width:520px}
.rep-recon td:nth-child(2){text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
#mst-table td:nth-child(n+3),#mrep-bal td:nth-child(n+3),#mrep-stock td:nth-child(n+3){
  font-variant-numeric:tabular-nums;white-space:nowrap}
#mst-table td:nth-child(2){min-width:220px}
tr.mst-open td{background:var(--line-soft)}
tr.mst-rev td:first-child{box-shadow:inset -3px 0 0 var(--bad)}
tr.stk-grp{cursor:pointer}
.stk-caret{color:var(--muted)}
tr.stk-sub td{background:var(--line-soft)}
tr.stk-sub td:first-child{padding-inline-start:26px}
.mst-print-head{display:none}
/* ۳۹٫۴۷: چک‌های در جریانِ شخص و تطبیقِ موجودیِ تاریخ‌دار */
.mst-chq td:nth-child(n+3),.rep-recon-asof td:nth-child(n+2){font-variant-numeric:tabular-nums;white-space:nowrap}
.mst-chq-box h4{font-size:14.5px}
.rep-recon-scroll{overflow-x:auto;max-width:100%}
.rep-recon-asof{min-width:560px}
@media(max-width:900px){
  .mst-chq td:nth-child(n+3){white-space:normal}
  :is(.mst-chq,.rep-recon-asof).cardy tfoot{display:block}
  :is(.mst-chq,.rep-recon-asof).cardy tfoot tr{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 14px;border-radius:14px;
    background:var(--line-soft);margin-top:10px}
  :is(.mst-chq,.rep-recon-asof).cardy tfoot td{border:0;padding:0;background:none}
  :is(.mst-chq,.rep-recon-asof).cardy tfoot td:empty{display:none}
}
@media(max-width:900px){
  .rep-filters input:not([type=checkbox]){flex:1 1 160px;width:auto}
  .rep-filters .spacer{display:none}
  #mst-table td:nth-child(2){min-width:0}
  #mst-table td:nth-child(n+3),#mrep-bal td:nth-child(n+3),#mrep-stock td:nth-child(n+3){white-space:normal}
  :is(#mrep-bal,#mrep-stock,#mst-table,#mic-table).cardy tfoot{display:block}
  :is(#mrep-bal,#mrep-stock,#mst-table,#mic-table).cardy tfoot tr{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 14px;border-radius:14px;
    background:var(--line-soft);margin-top:10px}
  :is(#mrep-bal,#mrep-stock,#mst-table,#mic-table).cardy tfoot td{border:0;padding:0;background:none}
  :is(#mrep-bal,#mrep-stock,#mst-table,#mic-table).cardy tfoot td:empty{display:none}
  tr.mst-rev td:first-child{box-shadow:none}
}
@media print{
  .rep-filters{display:none!important}
  .mst-print-head{display:block;font-weight:700;margin:0 0 6px}
  .mst-wrap,#mic-body > div{max-height:none!important;overflow:visible!important}
  .bal-tag{background:none!important;padding:0}
}

/* ══════════ ۳۹٫۴۹ — ممیزیِ ظاهرِ «موبایل و تعمیرات» ══════════ */

/* متنِ لاتین (مدل، برند، IMEI): رقمِ لاتین و چپ‌به‌راست. فونت با ss01 رقمِ لاتین
   را هم فارسی می‌کشید — «Galaxy A۵۲» و IMEIای که با *#06# نمی‌خواند. */
.lat{font-feature-settings:normal;direction:ltr;unicode-bidi:isolate}

/* عنوان = نامِ صفحه؛ هاب یک ردِ پای کوچک کنارش */
.page-hub{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.page-hub::after{content:"›";margin-inline:6px 0;color:var(--dim)}
.page-hub:hover{color:var(--brand)}

/* زبانه‌های سطحِ سوم: همان شکلِ زبانه‌های هاب، کوچک‌تر */
.hubtabs.subtabs{margin:0 0 12px;padding:3px;border-radius:10px}
.hubtabs.subtabs button{border:0;background:none;font:inherit;cursor:pointer;padding:6px 12px;
  border-radius:8px;color:var(--muted);font-weight:600;font-size:13.5px;white-space:nowrap}
.hubtabs.subtabs button:hover{color:var(--ink)}
.hubtabs.subtabs button.on{background:var(--card);color:var(--brand);box-shadow:0 1px 3px rgba(11,18,32,.10)}
.hubtabs.subtabs button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.hubtabs.subtabs .badge{margin-inline-start:4px}

/* «⋯» کنارِ ردیف و «بیشتر» در نوارِ ابزار */
.rm-wrap{display:inline-block;position:relative;vertical-align:middle}
.rm-btn{min-width:34px;font-weight:800;letter-spacing:1px}
.tb-more .rm-btn{letter-spacing:0}
.rm-pop{display:none;position:fixed;z-index:120;min-width:200px;max-width:min(320px,calc(100vw - 16px));
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;
  flex-direction:column;gap:2px}
.rm-wrap.open .rm-pop{display:flex}
.rm-pop > .btn,.rm-pop > a.btn{display:flex;justify-content:flex-start;width:100%;border:0;background:none;
  box-shadow:none;padding:9px 10px;min-height:38px;border-radius:8px;color:var(--ink);font-size:14px;
  font-weight:500;text-align:start;white-space:nowrap}
.rm-pop > .btn:hover,.rm-pop > .btn:focus-visible{background:var(--line-soft)}
.rm-pop > .btn.danger{color:var(--bad)}
.rm-pop > .btn.primary{color:var(--brand);font-weight:700}
@media print{.rm-wrap{display:none!important}}

/* ماندهٔ «پیش‌دریافت» (بیعانهٔ مشتری) بدهی نیست — آبی، نه قرمز */
.bal-amt.adv{color:var(--brand-ink)}
.bal-tag.adv{background:var(--brand-soft);color:var(--brand-ink)}

/* ردیفِ گوشی: عددهای بی‌نام (موجودی، قیمتِ خرید/فروش، ارزش) برچسبِ ستونشان را می‌گیرند */
@media(max-width:900px){
  body.m-app table.m-rows td.m-lbl.cy-sub1::before,body.m-app table.m-rows td.m-lbl.cy-amt::before{
    display:inline;content:attr(data-l) " ";color:var(--dim);font-size:13.5px;font-weight:500}
  body.m-app table.m-rows td.m-lbl.cy-subn::before{content:"· " attr(data-l) " "}
  body.m-app table.m-rows td.m-lbl.cy-amt{direction:rtl}
}

/* هشدارِ رمز روی هر صفحهٔ گوشی (نه فقط اپ‌مانندها) یک خطِ باریک + دکمه */
@media(max-width:900px){
  #pw-warn{flex-wrap:nowrap;justify-content:flex-start;gap:8px;border-radius:12px;margin:10px 0 0;
    padding:4px 6px 4px 4px;padding-inline-start:12px;font-size:14px;min-height:44px}
  #pw-warn b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
  #pw-warn .pw-long,#pw-warn .pw-full{display:none}
  #pw-warn .pw-short{display:inline}
  #pw-warn .btn{min-height:36px;padding-inline:10px;font-size:13.5px;white-space:nowrap}
}
/* تاریک: متنِ سفید روی قرمزِ کم‌رنگ (#E0796A) حدودِ ۳:۱ بود */
[data-theme="dark"] #pw-warn{background:#8C2A1F;color:#fff}
[data-theme="dark"] #pw-warn .btn{background:#fff;color:#8C2A1F}

/* اعلان هرگز روی برگهٔ پایینی، پنجره یا دکمه‌های ردیف نمی‌نشیند و کلیک را نمی‌گیرد */
#toasts{pointer-events:none}
body.m-sheet-open #toasts,body:has(#modal-bg:not(.hidden)) #toasts{bottom:auto;
  top:calc(12px + env(safe-area-inset-top,0px))}

/* تاریک: فرمِ فاکتور — سرِ جدول و دکمه‌های «+ نقد/کارت/چک/معاوضه» سفید روی آبیِ روشن بودند */
[data-theme="dark"] .ivtable thead th{background:var(--line-soft);color:var(--ink);background-image:none}
[data-theme="dark"] .ichip.b{background:#2C4F8C;color:#fff}
[data-theme="dark"] .ichip.g{background:#177A55;color:#fff}
[data-theme="dark"] .ichip.r{background:#A5372B;color:#fff}
[data-theme="dark"] .ichip.a{background:#8A5207;color:#fff}
[data-theme="dark"] .ivfp.hl,[data-theme="dark"] .ivfoot .ivfp.hl{background:var(--brand-soft)}
[data-theme="dark"] .ivfp.hl .v{color:var(--brand-ink)}
[data-theme="dark"] .ivfp.hl .t{color:var(--muted)}
/* ۳۹٫۶۱: قاعدهٔ قبلی («خانهٔ تخفیف … متنِ راهنمایش فارسی است») برای راهنمای فارسیِ
   قدیمیِ «۰ یا ۵٪» نوشته شده بود؛ آن راهنما به لاتینِ «0 / 5%» برگشت ولی این قاعده
   نه — و همان راهنما را در هر ردیفِ فاکتور وارونه («5% / 0») نشان می‌داد. */
/* تاریک: رنگِ اصلی روشن است (#8FB0E8)، پس متنِ سفیدِ دکمهٔ اصلی و «ثبتِ جدید» حدودِ ۲:۱ بود */
[data-theme="dark"] .btn.primary:not(.ivfoot .btn),[data-theme="dark"] .new-btn{color:#0B1220}
[data-theme="dark"] .rm-pop > .btn.primary{color:var(--brand)}

/* ۳۹٫۵۰ — زیروضعیتِ میزِ کار و صفحهٔ «گارانتی‌ها» */
.toolbar .hubtabs.subtabs{margin:0;max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
.toolbar .hubtabs.subtabs button{white-space:nowrap}
.toolbar.bench-sub{flex-wrap:wrap;gap:8px}
.war-rates{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.war-rates .panel{margin:0}
.sub-strip .btn b{margin-inline-start:4px}
@media (max-width:700px){.war-rates{grid-template-columns:1fr}}

/* ۳۹٫۵۲: انتخابِ گروهیِ پرونده‌های تعمیر */
.mt-bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-bottom:10px;
  margin-bottom:6px;border-bottom:1px solid var(--line)}
.mt-bulk-bar .mt-all{display:flex;align-items:center;gap:6px;cursor:pointer;margin:0}
.mt-bulk-bar input[type=checkbox],.mt-sel-row input[type=checkbox]{width:18px;height:18px;flex:none;margin:0}
.mt-sel-list{display:flex;flex-direction:column}
.mt-sel-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);
  cursor:pointer;margin:0;border-radius:8px}
.mt-sel-row.on{background:color-mix(in srgb,var(--brand) 9%,transparent)}
.mt-sel-main{flex:1;min-width:0;overflow-wrap:anywhere}
.mt-sel-main small{display:block}
.mt-sel-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:left;flex:none;max-width:45%}
@media (max-width:640px){
  .mt-sel-row{flex-wrap:wrap}
  .mt-sel-meta{flex-direction:row;flex-wrap:wrap;align-items:center;max-width:none;width:100%;padding-inline-start:28px}
}

/* ۳۹٫۵۴: نتیجهٔ بررسیِ IMEI زیرِ فیلدِ IMEI (فاکتورِ خرید، معاوضه، استعلام) */
.imei-chk{margin-top:4px;padding:6px 9px;border-radius:8px;line-height:1.7;
  background:color-mix(in srgb,var(--brand) 8%,transparent);overflow-wrap:anywhere}
.imei-chk.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.imei-chk.warn{background:color-mix(in srgb,var(--warn) 14%,transparent)}
.imei-chk.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad);font-weight:700}
.msi-part .imei-chk-box{flex-basis:100%}
.imei-chk.mini{display:block;margin:0;padding:2px 8px;border-radius:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-decoration:none;font-weight:700}
.imei-flags{display:flex;flex-direction:column;gap:8px}
.imei-flag{border:1px solid var(--line);border-inline-start:4px solid var(--bad);border-radius:10px;padding:9px 12px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;overflow-wrap:anywhere}
.imei-flag>.row{width:100%}
.imei-flag.off{border-inline-start-color:var(--line);opacity:.7}
/* ردیفِ فاکتورِ خرید: سلولِ IMEI با نشانِ بررسی بلندتر می‌شود؛ کادرِ 📷 (height:100%)
   نباید با آن کش بیاید و بالای کادر بیرون بزند */
.ivtable td:has(> .imei-chk-box:not(:empty)){vertical-align:top}
.ivtable td:has(> .imei-chk-box) > .cam-wrap{height:46px}
.imei-flag.neutral{border-inline-start-color:var(--brand)}   /* ۳۹٫۵۵: کارتِ ضامن */

/* ۳۹٫۵۷: «＋ … را به‌عنوانِ تازه ثبت کن» در انتخابگرِ مشتری — لمس‌شدنی و دیدنی */
.pp-dd .pp-none.pp-new{color:var(--brand,#1e3a8a);font-weight:800;font-size:14px;cursor:pointer;padding:12px 10px}
.pp-dd .pp-none.pp-new:hover{background:var(--brand-soft,rgba(30,58,138,.08))}

/* ۳۹٫۵۷: برچسبِ کاشی‌های عدد روی گوشی خوانا (۱۲px زیرِ حدِ ۱۳٫۵ بود)؛ ✕ ِ انتخابگرِ
   شخص لمس‌پذیر (۲۱px بود، کنارِ جایی که برای تایپ لمس می‌شود) */
@media (max-width:700px){ .card .lbl{font-size:13.5px} }
.pp-x{min-width:40px;min-height:40px;left:2px}
.pp-q{padding-left:46px}

/* ══════════ ۳۹٫۵۹ — ظاهرِ فرم‌های ورودِ اطلاعات ══════════
   فیلدهای بی‌گروه داخلِ کارتِ .fsec؛ برچسب بالای کادر با فاصلهٔ ثابت، راهنما زیرِ کادر
   (نه چسبیده با حاشیهٔ منفی)، کادرها هم‌قد و با گوشهٔ ملایم. */
.ff-hint{margin:4px 2px 10px;line-height:1.7}
#modal .ff > label{display:block;margin:0 2px 5px}
@media(max-width:900px){
  #modal-bg:not(:has(#modal.iv)) #modal{background:var(--bg);padding:12px 12px 0}
  #modal .fsec{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:12px 12px 2px;margin:0 0 12px}
  #modal .fgroup{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:4px 12px;margin:0 0 12px}
  #modal .ff{margin:0 0 12px}
  #modal .ff > label{font-size:14px;font-weight:600;color:var(--ink);margin:0 2px 6px}
  #modal .ff input:not([type=checkbox]):not([type=radio]),#modal .ff select,#modal .ff textarea{
    width:100%;min-height:var(--tap);border-radius:10px;border:1px solid var(--line);background:var(--card);
    padding-inline:12px;box-shadow:none}
  #modal .ff textarea{min-height:76px;padding-block:10px}
  #modal .ff input:focus,#modal .ff select:focus,#modal .ff textarea:focus{
    border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  #modal .ff .ff-hint{margin:6px 2px 0;font-size:13.5px;color:var(--muted)}
  #modal .ff:last-child{margin-bottom:10px}
}
@media(min-width:901px){
  /* رایانه: کادرهای تمام‌عرضِ ۹۰۰ پیکسلی کشیده به نظر می‌رسید؛ دو ستون، شرح و متنِ بلند تمام‌عرض */
  #modal .fsec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;align-items:start}
  #modal .fsec > .ff:has(textarea),#modal .fsec > .ff[data-k="note"]{grid-column:1/-1}
  #modal .ff{margin:0 0 12px}
  #modal .ff input:not([type=checkbox]):not([type=radio]),#modal .ff select,#modal .ff textarea{width:100%}
}

/* ══════════ ۳۹٫۶۱ — خانهٔ تخفیفِ ردیفِ فاکتور (مبلغ یا درصد) ══════════
   خودِ خانه فقط عدد می‌گیرد (صفحه‌کلیدِ عددی)؛ دکمهٔ ٪ کنارش با یک لمس ردیف را
   «درصد» یا «مبلغ» می‌کند — دیگر برای تایپِ نشانهٔ ٪ لازم نیست صفحه‌کلید عوض شود. */
.ivds-wrap{display:flex;gap:4px;align-items:stretch}
.ivds-wrap input{flex:1;min-width:0}
.ivds-pct{flex:0 0 auto;width:34px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--muted);font-weight:800;font-size:13.5px;cursor:pointer;padding:0}
.ivds-pct.on{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand)}
@media(max-width:900px){
  .ivds-pct{width:38px;min-height:var(--tap)}
}

/* ══════════ ۳۹٫۶۱ — فهرستِ جست‌وجوی کالا در ردیفِ فاکتور، روی گوشی ══════════
   هر گزینه فقط ۹px بالشتک و ۱۳px قلم داشت — کوچک‌تر از حداقلِ استانداردِ لمسِ
   برنامه (۴۴px) و کمترِ حداقلِ خوانایی (۱۳٫۵px)، پس لمسِ گزینهٔ درست سخت بود. */
@media(max-width:900px){
  .iv-dd div{min-height:var(--tap);padding:11px 12px;font-size:14px}
  .iv-dd small{font-size:13.5px}
}