/* ===================== رنگیو — پنل MVC (نسخهٔ پریمیوم) ===================== */
/*
  رنگِ پوسته فقط از همین توکن‌ها می‌آید. هر قاعده‌ای که رنگ پوسته را مستقیم بنویسد،
  در پنل ادمین (پوستهٔ زمردی) بنفش می‌ماند؛ پس تنها راهِ درست، استفاده از var() است.
  توکن‌های ‎*-rgb‎ لازم‌اند چون از یک hex نمی‌شود rgba() ساخت.
  نکته: داخل تعریفِ یک توکنِ دیگر var() ننویسید؛ مقدار همان‌جا در :root قفل می‌شود
  و با عوض‌شدن پوسته به‌روز نمی‌شود (‎--shadow-lift‎ به همین دلیل در هر پوسته جدا آمده).
*/
:root{
  /* پالت: گرافیتی + مسی.
     آبی‌بنفشِ قبلی پسندیده نشد. جایگزین با سه قیدی انتخاب شده که خودِ همین فایل
     تحمیل می‌کند: سبز/کهربایی/قرمز رزروِ معنا هستند (سالم / منتظر اقدام / مشکل)،
     فیروزه‌ای پوستهٔ ادمین است، و رنگِ اصلی باید روی دکمه متنِ سفید را نگه دارد.
     گرافیتی هر سه را برآورده می‌کند — خنثی است پس با هیچ رنگِ وضعیتی اشتباه
     نمی‌شود — و مسی گرمای لازم را می‌دهد بی‌آنکه به کهربایی نزدیک شود.
     کنتراست: ‎#3d4757‎ با سفید ‎9.4:1‎ و ‎#c2703c‎ با سفید ‎3.6:1‎ — پس مسی فقط برای
     حاشیه/آیکن/تأکید است، نه زمینهٔ متنِ سفید. */
  --primary:#3d4757; --primary-dark:#232b38; --primary-light:#8794a6;
  --primary-rgb:61,71,87; --primary-light-rgb:135,148,166;
  --accent:#c2703c; --accent-rgb:194,112,60; --accent-light:#e8b489;
  --header-grad:linear-gradient(120deg,#2b3442 0%,#3d4757 55%,#5a4a3e 100%);
  --sidebar-bg:linear-gradient(185deg,#2a323e 0%,#20262f 45%,#171c23 100%);
  --brand-grad:linear-gradient(90deg,#e8b489,#f2d0b0,#cbd5e1);
  --banner-grad:linear-gradient(120deg,#232b38,#3d4757 55%,#6b5340);
  /* عنوان بخش‌های منو؛ ‎5.5:1‎ روی تیره‌ترین و روشن‌ترین نقطهٔ سایدبار (AA) */
  --sec-ink:#9aa3b0;
  /* کارت‌های شمارشِ خنثی: سه تُنِ هم‌خانواده با پوسته.
     رنگ‌های معنادار (سبز/کهربایی/قرمز) توکن پوسته ندارند و ثابت می‌مانند،
     چون معنایشان — سالم / منتظر اقدام / مشکل — به نقش کاربر ربطی ندارد. */
  --card-a:linear-gradient(135deg,#3d4757,#5a4a3e);
  --card-b:linear-gradient(135deg,#2b3442,#232b38);
  --card-c:linear-gradient(135deg,#55606f,#3d4757);
  --bg:#eef1f7; --card:#fff; --ink:#1e293b; --ink-soft:#64748b; --line:#e7ebf3;
  --sidebar-w:272px; --radius:18px;
  /* این پوسته روشن است و حالتِ تاریک ندارد. بدونِ این یک خط، مرورگرِ کاربری که
     ویندوز/کرومش روی حالتِ تاریک است کنترل‌های بومی — به‌ویژه فهرستِ بازشوندهٔ
     ‎<select>‎ — را تیره می‌کشد، در حالی که رنگِ متنِ گزینه‌ها از ‎--ink‎ می‌آید که
     سرمه‌ایِ تیره است. فهرست باز می‌شود ولی چیزی خوانده نمی‌شود و کاربر
     «کشویی سفید/خالی» می‌بیند.
     روی همهٔ کشویی‌های سایت اثر دارد، نه یک صفحه. */
  color-scheme:light;
  /* ارتفاعِ خودِ نوار پایین (بدون ناحیهٔ امنِ گوشی). هرجا لازم شد
     ‎calc(var(--botnav-h) + env(safe-area-inset-bottom))‎ حساب می‌شود. */
  --botnav-h:62px;
  --shadow:0 10px 34px -12px rgba(30,41,90,.22);
  --shadow-sm:0 4px 18px -8px rgba(30,41,90,.16);
  --shadow-lift:0 18px 44px -14px rgba(61,71,87,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Vazirmatn','Shabnam',Tahoma,sans-serif;
  background:
    radial-gradient(1200px 500px at 100% -5%, rgba(var(--accent-rgb),.07), transparent 60%),
    radial-gradient(1000px 500px at -5% 0%, rgba(var(--primary-rgb),.06), transparent 55%),
    var(--bg);
  color:var(--ink); margin:0; min-height:100vh; font-size:14.5px; line-height:1.9;
  -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
/* ‎text-align‎ اینجا لازم است و نبودش ستون‌های عددی را به‌هم می‌ریخت: با
   ‎direction:ltr‎ مقدارِ پیش‌فرضِ ‎start‎ به «چپ» تبدیل می‌شود، در حالی که سرستون‌ها
   ‎text-align:right‎ دارند. نتیجه این بود که در هر ستونِ عددی، عنوان به یک لبه و
   عددها به لبهٔ مقابل می‌چسبیدند و لبهٔ راستِ خودِ عددها هم تا ۵۴ پیکسل با هم فرق
   داشت. با ‎right‎، رقم یکانِ همهٔ عددها روی یک خط می‌نشیند — همان چیزی که ستون
   مبلغ را قابل مقایسه می‌کند. */
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:plaintext;text-align:right}
::selection{background:rgba(var(--accent-rgb),.2)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ---------- Shell ---------- */
.sidebar{
  position:fixed; top:0; right:0; width:var(--sidebar-w); height:100vh;
  background:var(--sidebar-bg); color:#cbd5e1; z-index:1040;
  display:flex; flex-direction:column; box-shadow:-8px 0 40px -12px rgba(0,0,0,.35);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.sidebar::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 200px at 100% 0,rgba(var(--accent-rgb),.18),transparent 60%)}
.sidebar .brand{display:flex;align-items:center;gap:12px;padding:22px 20px 20px;border-bottom:1px solid rgba(255,255,255,.06);position:relative;z-index:1}
.sidebar .brand .logo{width:44px;height:44px;border-radius:14px;flex:none;background:#fff;object-fit:cover;box-shadow:0 8px 20px -4px rgba(var(--accent-rgb),.6)}
.sidebar .brand b{font-size:20px;font-weight:800;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;line-height:1.3}
.sidebar .brand span{font-size:11px;color:#8b95ad;display:block}
.sidebar .nav{flex:1;overflow-y:auto;padding:14px 12px;list-style:none;margin:0;position:relative;z-index:1}
.sidebar .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}
/* ‎#5b657d‎ روی سایدبار فقط ‎2.6:1‎ بود و در ۱۰ پیکسل عملاً دیده نمی‌شد */
.sidebar .nav .sec{font-size:10px;color:var(--sec-ink);font-weight:800;padding:16px 12px 7px;letter-spacing:1.2px}
.sidebar .nav a{display:flex;align-items:center;gap:13px;padding:12px 14px;margin:3px 0;border-radius:13px;color:#a3adc2;font-weight:600;font-size:14px;position:relative;transition:.2s;overflow:hidden}
.sidebar .nav a i{font-size:18px;width:22px;text-align:center;transition:.2s;z-index:1}
.sidebar .nav a span{z-index:1}
.sidebar .nav a:hover{background:rgba(255,255,255,.055);color:#e8ecf5;transform:translateX(-3px)}
.sidebar .nav a.active{background:linear-gradient(100deg,rgba(var(--primary-rgb),.42),rgba(var(--accent-rgb),.22));color:#fff;box-shadow:0 8px 22px -8px rgba(var(--primary-rgb),.7),inset 0 0 0 1px rgba(255,255,255,.06)}
.sidebar .nav a.active i{color:var(--accent-light);transform:scale(1.08)}
.sidebar .nav a.active::before{content:"";position:absolute;right:0;top:9px;bottom:9px;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--primary-light),var(--accent-light));box-shadow:0 0 12px rgba(var(--primary-light-rgb),.8)}

/* ---------- Header ---------- */
/* ‎viewport-fit=cover‎ در ‎_Layout‎ یعنی صفحه زیر نوار وضعیتِ گوشی هم کشیده می‌شود؛
   پس ارتفاعِ ثابت ‎64px‎ باعث می‌شد سربرگ زیر ساعت و آنتنِ اندروید برود. اینجا
   ارتفاع «‎۶۴ + ناحیهٔ امن‎» است و همان اندازه padding از بالا می‌گیرد، پس روی
   دسکتاپ (که ‎env()‎ صفر است) دقیقاً همان ۶۴ پیکسل قبلی می‌ماند. */
.topbar{position:sticky;top:0;z-index:1030;min-height:calc(64px + env(safe-area-inset-top));
  background:var(--header-grad);color:#fff;display:flex;align-items:center;gap:14px;
  padding:env(safe-area-inset-top) calc(22px + env(safe-area-inset-right)) 0 calc(22px + env(safe-area-inset-left));
  box-shadow:0 10px 30px -10px rgba(var(--primary-rgb),.5)}
.topbar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),transparent 40%);pointer-events:none}
.topbar .burger{background:rgba(255,255,255,.16);border:none;color:#fff;width:42px;height:42px;border-radius:12px;font-size:20px;cursor:pointer;display:none;transition:.15s}
.topbar .burger:active{transform:scale(.94)}
/* نسخهٔ سامانه در پای سایدبار */
.sidebar .side-ver{margin-top:auto;padding:12px 18px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--sec-ink);position:relative;z-index:1;flex-wrap:wrap}
.sidebar .side-ver i{font-size:13px;opacity:.8}
/* ‎#5c6780‎ روی سایدبار ‎2.7:1‎ بود؛ این مقدار ‎5:1‎ می‌دهد و هنوز از خطِ بالایش کم‌رنگ‌تر است */
.sidebar .side-ver small{color:#8b95ad;font-size:10.5px;margin-inline-start:auto}
/* عنوان هرگز نباید دو خطی شود: «صدور برگهٔ کارشناسی» روی ۳۹۰ پیکسل می‌شکست،
   سربرگ را بلند می‌کرد و به دکمه‌های کنارش می‌چسبید. ‎min-width:0‎ لازم است چون
   آیتمِ فلکس به‌طور پیش‌فرض کوچک‌تر از محتوایش نمی‌شود و ‎ellipsis‎ بی‌اثر می‌ماند. */
.topbar .ttl{font-weight:800;font-size:17.5px;flex:1 1 auto;min-width:0;z-index:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
/* جست‌وجوی سراسری ادمین در نوار بالا */
.topbar .tb-search{flex:1;max-width:400px;position:relative;z-index:1;display:flex;align-items:center}
.topbar .tb-search i{position:absolute;inset-inline-start:12px;font-size:15px;color:rgba(255,255,255,.75);pointer-events:none}
.topbar .tb-search input{width:100%;height:40px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.14);
  border-radius:12px;padding-inline:38px 14px;color:#fff;font-family:inherit;font-size:13px;outline:none;transition:.15s}
.topbar .tb-search input::placeholder{color:rgba(255,255,255,.7)}
.topbar .tb-search input:focus{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.45)}
@media(max-width:1100px){.topbar .tb-search{display:none}}
.topbar .user{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:5px 6px 5px 15px;z-index:1;backdrop-filter:blur(6px)}
.topbar .user .av{width:35px;height:35px;border-radius:50%;background:#fff;color:var(--primary);display:grid;place-items:center;font-weight:800;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.topbar .user b{font-size:13.5px;font-weight:700}
.topbar .user small{font-size:10.5px;opacity:.85;display:block;line-height:1}
/* دکمهٔ خروج سریع، گوشهٔ چپِ بالا */
.topbar .tb-logout{margin:0 0 0 2px;z-index:1}
.topbar .tb-logout button{background:#ef4444;border:1px solid rgba(255,255,255,.28);color:#fff;width:40px;height:40px;border-radius:12px;font-size:19px;cursor:pointer;display:grid;place-items:center;transition:.15s;backdrop-filter:blur(6px)}
.topbar .tb-logout button:hover{background:#dc2626;border-color:transparent}
.topbar .tb-logout button:active{transform:scale(.92)}

/* ---------- Main ---------- */
.main{margin-right:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.content{flex:1;padding:26px;animation:fadeUp .45s cubic-bezier(.2,.7,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.footer{padding:18px 26px;color:var(--ink-soft);font-size:12.5px;text-align:center}

/* ---------- Page header banner ---------- */
/* بنر عمداً از نوار بالا تیره‌تر است تا سلسله‌مراتب حفظ شود، ولی هم‌خانوادهٔ همان پوسته */
.page-head{position:relative;overflow:hidden;background:var(--banner-grad);color:#fff;border-radius:var(--radius);padding:22px 26px;margin-bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;box-shadow:0 16px 40px -16px rgba(30,41,90,.5)}
.page-head::before{content:"";position:absolute;left:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.09)}
.page-head::after{content:"";position:absolute;left:60px;bottom:-90px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06)}
.page-head h1{margin:0;font-size:21px;font-weight:800;display:flex;align-items:center;gap:11px;z-index:1}
.page-head .hbtn{background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:13px;padding:10px 17px;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;z-index:1;transition:.18s;backdrop-filter:blur(4px)}
.page-head .hbtn:hover{background:rgba(255,255,255,.34);transform:translateY(-2px)}

/* ---------- Cards ---------- */
.card2{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:.25s}
.card2 .hd{padding:16px 22px;border-bottom:1px solid var(--line);font-weight:800;display:flex;align-items:center;gap:9px;background:linear-gradient(180deg,#fafbfe,#fff)}
.card2 .hd i{color:var(--primary)}
.card2 .bd{padding:22px}

/* ---------- Stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}
.stat{border-radius:var(--radius);color:#fff;padding:22px;position:relative;overflow:hidden;box-shadow:0 14px 34px -14px rgba(0,0,0,.4);min-height:118px;transition:.28s cubic-bezier(.2,.7,.3,1)}
.stat:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.stat::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 45%);pointer-events:none}
.stat i.bg{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:62px;opacity:.2}
.stat .v{font-size:27px;font-weight:800;direction:ltr;text-align:right;position:relative;z-index:1}
.stat .v small{font-size:13px;font-weight:600;opacity:.85}
.stat .l{font-size:13.5px;font-weight:600;opacity:.96;margin-top:6px;position:relative;z-index:1}
/*
  کارت‌ها دو دسته‌اند و عمداً قاطی نمی‌شوند:

  تزئینی — عددی که رنگش پیامی ندارد (موجودی، تعداد، سهم). این‌ها از پوسته می‌آیند،
  پس در پنل ادمین زمردی و در بقیهٔ نقش‌ها نیلی می‌شوند و هیچ‌وقت با هدر ناهماهنگ نیستند.
  ‎.i‎ عمداً خاکستری خنثی است، نه تُنِ سومِ پوسته: سه تُنِ نزدیک‌به‌هم کنار هم
  «اشتباه رندر» به نظر می‌رسد، و یک کارت خنثی هیچ رنگِ رقیبی به صفحه اضافه نمی‌کند.

  معنادار — رنگ خودِ پیام است (سبز=انجام‌شده، کهربایی=در انتظار، سرخ=اشکال)؛
  این‌ها با پوسته عوض نمی‌شوند وگرنه معنایشان از بین می‌رود. فقط تیره‌تر شدند
  تا متن سفید رویشان خوانا باشد و شش گرادیانِ پرمایه با هم رقابت نکنند.
*/
/* p / t / i — شمارشِ خنثی، هم‌خانواده با پوسته */
.stat.p{background:var(--card-a)}
.stat.t{background:var(--card-b)}
.stat.i{background:var(--card-c)}
/* s / w / r — معنادار و مستقل از پوسته */
.stat.s{background:linear-gradient(135deg,#059669,#047857)}
.stat.w{background:linear-gradient(135deg,#d97706,#b45309)}
.stat.r{background:linear-gradient(135deg,#e11d48,#be123c)}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto}

/* ردیفِ قابل پیمایش — رفتارش در js/rowlink.js است و پیش‌تر داخل خودِ ویوِ
   «کارشناسان» تکرار شده بود. حلقهٔ focus فقط برای صفحه‌کلید (focus-visible)
   تا کلیکِ ماوس قاب نیندازد. */
/* ---------- انتخابگر تاریخ شمسی (js/jdate.js) ---------- */
/* روی body نشانده می‌شود نه کنارِ فیلد، تا کارت‌هایی که overflow دارند نبرندش. */
.jdp{position:absolute;z-index:120;background:#fff;border:1.5px solid var(--line);
     border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,42,.28);padding:10px;
     width:262px;direction:rtl;font-family:inherit}
.jdp-head{display:flex;gap:6px;margin-bottom:8px}
.jdp-head select{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:6px 8px;
                 font-family:inherit;font-size:12.5px;font-weight:700;background:#fbfcfe;color:var(--ink)}
.jdp-wk,.jdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.jdp-wk span{text-align:center;font-size:11px;font-weight:800;color:var(--ink-soft);padding:4px 0}
.jdp-grid button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:700;
                 color:var(--ink);padding:7px 0;border-radius:9px;cursor:pointer;transition:.13s}
.jdp-grid button:hover{background:#f1f5f9}
/* «امروز» فقط قاب می‌گیرد و «انتخاب‌شده» پُر می‌شود، تا از هم جدا باشند */
.jdp-grid button.now{box-shadow:inset 0 0 0 1.5px var(--primary-light)}
.jdp-grid button.on{background:var(--primary);color:#fff}
.jdp-foot{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.jdp-foot button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:6px 0;
                 font-family:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.jdp-foot button:hover{border-color:var(--primary-light);color:var(--primary)}

/* ---------- نوار صفحه‌بندی (Views/Shared/_Pager) ---------- */
.pager{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;
       padding:16px;border-top:1px solid var(--line)}
.pager a,.pager span.pg{min-width:34px;height:34px;display:inline-flex;align-items:center;
       justify-content:center;border:1.5px solid var(--line);border-radius:9px;
       font-weight:800;font-size:13px;color:var(--ink);text-decoration:none;
       font-variant-numeric:tabular-nums}
.pager a:hover{border-color:var(--primary-light);color:var(--primary)}
.pager span.pg.on{background:linear-gradient(120deg,var(--primary),var(--accent));
       border-color:transparent;color:#fff}
.pager span.pg.off{opacity:.45}
.pager .info{font-size:12.5px;color:var(--ink-soft);font-weight:700;margin-inline-start:6px}

/* ردیفِ «برچسب … مقدار» برای کارت‌های خلاصه (درآمد، مانده). عمداً جدول نیست:
   دو ستونِ ساده روی موبایل بهتر از یک جدولِ اسکرول‌شونده می‌نشیند. */
.kvrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
       padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.kvrow:last-of-type{border-bottom:none}
.kvrow>span{color:var(--ink-soft)}
/* مقدار به لبهٔ مقابلِ برچسب چسبیده و خودش دو تکه است: عدد و واحد.
   عدد در جعبه‌ای با عرضِ ثابت (‎ch‎ + ‎tabular-nums‎ یعنی همهٔ ارقام هم‌عرض) راست‌چین
   می‌شود، پس رقمِ یکانِ همهٔ ردیف‌ها روی یک خط می‌افتد و «تومان»ها هم زیر هم
   می‌نشینند. بدون جعبهٔ عرض‌ثابت، هر ردیف به اندازهٔ طولِ عددش جابه‌جا می‌شد. */
.kvrow>b{margin-inline-start:auto;display:flex;align-items:baseline;gap:5px}
.kvrow>b .n{direction:ltr;text-align:right;font-variant-numeric:tabular-nums;min-width:10ch}
.kvrow>b .u{font-size:12px;font-weight:700;color:var(--ink-soft)}

tr.row-link{cursor:pointer}
tr.row-link:focus{outline:none}
tr.row-link:focus-visible{outline:2px solid #0d9488;outline-offset:-2px;background:rgba(13,148,136,.07)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
table.tbl thead th{background:#f6f8fc;color:#475569;font-weight:800;padding:14px 15px;text-align:right;border-bottom:2px solid var(--line);white-space:nowrap;position:sticky;top:0}
table.tbl tbody td{padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:middle}
/* ردیفِ «جمع کل» در tfoot است و این قاعده فقط tbody را می‌گرفت، پس آن ردیف بدون
   بالشتک می‌ماند و عددهایش ۱۴ پیکسل با ستونِ بالای خودشان اختلاف داشتند — دقیقاً
   همان چیزی که «نامنظم» دیده می‌شد. */
table.tbl tfoot td{padding:13px 15px;vertical-align:middle}
table.tbl tbody tr{transition:.13s}
table.tbl tbody tr:hover{background:linear-gradient(90deg,rgba(var(--accent-rgb),.05),rgba(var(--primary-rgb),.03))}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl .empty{text-align:center;color:var(--ink-soft);padding:42px}
table.tbl .empty i{font-size:38px;display:block;margin-bottom:10px;color:#cbd5e1}

/* ---------- Badges ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:5px 12px;border-radius:20px}
.pill.ok{background:#dcfce7;color:#15803d}
.pill.wait{background:#fef3c7;color:#b45309}
.pill.no{background:#fee2e2;color:#b91c1c}
.pill.mut{background:#e2e8f0;color:#475569}
/* «واردشده از فهرست» — عمداً نه سبز است نه قرمز: نه تأییدشده است نه رد/تعلیق‌شده. */
.pill.inf{background:#dbeafe;color:#1d4ed8}

/* ---------- Buttons ---------- */
.btn2{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:12px;padding:11px 19px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.18s;text-decoration:none;position:relative}
.btn2:active{transform:scale(.97)}
.btn2.pri{background:linear-gradient(120deg,var(--primary),var(--accent));color:#fff;box-shadow:0 8px 20px -8px rgba(var(--primary-rgb),.7)}
.btn2.pri:hover{box-shadow:0 12px 26px -8px rgba(var(--primary-rgb),.85);transform:translateY(-2px)}
.btn2.grn{background:linear-gradient(120deg,#16a34a,#15803d);color:#fff;box-shadow:0 8px 20px -8px rgba(22,163,74,.6)}
.btn2.grn:hover{transform:translateY(-2px)}
.btn2.red{background:linear-gradient(120deg,#ef4444,#dc2626);color:#fff}
.btn2.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn2.ghost:hover{border-color:var(--primary-light);color:var(--primary)}
.btn2.sm{padding:7px 13px;font-size:12.5px;border-radius:10px}
.btn-ico{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:.15s}
.btn-ico:hover{transform:translateY(-2px)}
.btn-ico.e:hover{color:#16a34a;border-color:#86efac;background:#f0fdf4}
.btn-ico.d:hover{color:#dc2626;border-color:#fca5a5;background:#fef2f2}

/* ---------- جعبهٔ پیامکِ تکی کنارِ هر ردیف (‎_SendSmsOne‎) ---------- */
/* جعبه عمداً در جریانِ عادی می‌ماند و ‎position:absolute‎ نیست: جدول‌ها داخل
   ‎.tbl-wrap‎ با ‎overflow-x:auto‎ و ‎.card2‎ با ‎overflow:hidden‎ نشسته‌اند و هر دو
   یک جعبهٔ شناور را می‌بُرند. راه‌حلِ ‎:has()‎ هم روی مرورگر قدیمی بی‌صدا شکست
   می‌خورد. پس ردیف بلند می‌شود — که هزینه‌اش دیده‌شدن است، نه بریده‌شدن. */
.sms1{display:inline-block;vertical-align:top}
.sms1>summary{list-style:none}
.sms1>summary::-webkit-details-marker{display:none}
.sms1[open]>summary{border-color:var(--primary-light);color:var(--primary)}
.sms1>form{width:290px;max-width:78vw;padding:12px;margin-top:6px;border-radius:12px;
  background:var(--card);border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm);text-align:right;white-space:normal}
.sms1-to{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:12px;color:var(--ink-soft);margin-bottom:8px}
.sms1>form textarea{width:100%;font-size:12.5px;line-height:2;border-radius:10px;
  border:1.5px solid var(--line);padding:8px;resize:vertical}
.sms1-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;
  margin-top:8px;font-size:11.5px;color:var(--ink-soft)}
/* ستونِ عملیات ‎flex‎ است؛ بدون این، جعبهٔ ۲۹۰ پیکسلی بقیهٔ دکمه‌ها را از ردیف
   بیرون هل می‌داد. حالا زیرشان می‌نشیند. */
.sms1-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---------- Forms ---------- */
/* فاصله‌ها جمع‌تر شد: فرمِ صدور برگه پانزده فیلد دارد و با فاصلهٔ ۱۸ پیکسلی،
   کارشناس برای دیدن نیمهٔ دوم باید اسکرول می‌کرد. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.fld{display:flex;flex-direction:column;gap:5px}
/* ⚠️ صفتِ hidden باید همیشه برنده باشد.
   پیش‌فرضِ مرورگر برای [hidden] یک display:none با ویژگیِ پایین است، پس هر قاعدهٔ
   display صریح (مثل همین .fld بالا) خنثایش می‌کند. سه بار پشت سر هم همین دام
   گرفت: ستون اعتبار پلاک، خودِ قاب‌های پلاک، و فیلد منطقهٔ آزاد که با پلاک شخصی
   هم دیده می‌شد. یک بار اینجا بسته می‌شود تا در ویوِ بعدی از نو کشف نشود. */
[hidden]{display:none !important}
.fld.full{grid-column:1/-1}
.fld label{font-size:12.5px;font-weight:700;color:#334155}
.fld label .req{color:#dc2626}
/* کادرها کوتاه‌تر: ارتفاعِ ۴۶ پیکسلی برای یک فرمِ بلند زیادی بود و صفحه را
   کشیده و شلوغ نشان می‌داد. */
.fld input,.fld select,.fld textarea{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-family:inherit;font-size:13.5px;background:#fbfcfe;color:var(--ink);transition:.16s;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--primary-light);background:#fff;box-shadow:0 0 0 4px rgba(129,140,248,.16)}
/* گزینه‌ها رنگِ خودشان را صریح می‌گیرند و از ‎select‎ ارث نمی‌برند.
   ‎color-scheme‎ بالا ریشهٔ مشکل را می‌بندد؛ این خط کمربندِ دوم است برای
   مرورگرهایی (و وب‌ویوِ اندروید) که همچنان پس‌زمینهٔ فهرست را خودشان انتخاب
   می‌کنند. بدونِ آن، یک تمِ تیره دوباره متنِ تیره روی زمینهٔ تیره می‌دهد. */
select{color-scheme:light}
select option{background:#fff;color:#1e293b}
/* سطرِ انتخاب‌شده و سطرِ زیرِ نشانگر هم رنگِ صریح می‌گیرند.
   تا امروز فقط حالتِ عادیِ ‎option‎ رنگ داشت؛ سطرِ برجسته را سیستم‌عامل با رنگِ
   «هایلایتِ» خودش می‌کشید و در تمِ تیره، متن روی آن سطر گم می‌شد — همان نوارِ
   تیره‌ای که وسطِ فهرستِ بازشده دیده می‌شود.
   ⚠️ ‎getComputedStyle‎ این را لو نمی‌دهد: از دیدِ CSS همه‌چیز درست است و
   رنگ‌آمیزیِ آن سطر را مرورگر/سیستم انجام می‌دهد، نه صفحه. */
select option:checked,select option:hover{background:#eef2f7;color:#0f172a}
.fld .hint{font-size:11.5px;color:var(--ink-soft)}
.form-actions{display:flex;gap:11px;margin-top:24px}

/* ---------- Alerts ---------- */
.alert2{border-radius:13px;padding:14px 17px;margin-bottom:20px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;animation:fadeUp .4s}
.alert2.ok{background:linear-gradient(90deg,#dcfce7,#f0fdf4);color:#15803d;border:1px solid #86efac}
.alert2.err{background:linear-gradient(90deg,#fee2e2,#fef2f2);color:#b91c1c;border:1px solid #fca5a5}

/* ---------- Overlay ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);z-index:1039;opacity:0;visibility:hidden;transition:.3s}
.overlay.show{opacity:1;visibility:visible}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;background:linear-gradient(135deg,#171c23,#232b38 55%,#5a4a3e);overflow:hidden}
.auth-wrap::before,.auth-wrap::after{content:"";position:absolute;border-radius:50%;filter:blur(10px)}
/* صفحه‌های ورود/ثبت‌نام دوزبانه‌اند؛ پس مکان لکه‌های تزئینی منطقی است تا در انگلیسی قرینه شود */
.auth-wrap::before{width:360px;height:360px;background:radial-gradient(circle,rgba(124,58,237,.5),transparent 65%);top:-90px;inset-inline-start:-70px}
.auth-wrap::after{width:420px;height:420px;background:radial-gradient(circle,rgba(56,189,248,.35),transparent 65%);bottom:-120px;inset-inline-end:-100px}
.auth-card{position:relative;z-index:1;background:rgba(255,255,255,.98);border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);width:100%;max-width:420px;padding:36px 32px;text-align:center;animation:fadeUp .5s}
.auth-card .logo{width:68px;height:68px;border-radius:20px;margin:0 auto 16px;display:block;background:#fff;object-fit:cover;box-shadow:0 12px 28px -6px rgba(124,58,237,.6)}
.auth-card h2{margin:0 0 4px;font-size:23px;font-weight:800}
.auth-card p.sub{color:var(--ink-soft);font-size:13px;margin:0 0 24px}
/* چیدمان منطقی است، نه فیزیکی؛ وگرنه در انگلیسی برچسب‌ها به راستِ ورودی چپ‌به‌راست می‌چسبند */
.auth-card .fld{text-align:start;margin-bottom:15px}
.auth-card .btn2{width:100%;justify-content:center;height:52px;font-size:15px}
.auth-card .linkrow{margin-top:18px;font-size:13px;color:var(--ink-soft)}
.auth-card .linkrow a{color:var(--primary);font-weight:700}

/* ---------- Utility ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.muted{color:var(--ink-soft)}

/* ---------- Bottom navigation (موبایل) ---------- */
.botnav{display:none}

/* ---------- Responsive ---------- */
@media(max-width:992px){
  .sidebar{transform:translateX(100%)}
  .sidebar.show{transform:translateX(0)}
  .main{margin-right:0}
  .topbar .burger{display:grid;place-items:center}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  /* نوار پایین در بخشِ «نوار پایینِ موبایل» انتهای فایل تعریف شده است */
  /* فضای خالی زیر محتوا تا نوار پایین چیزی را نپوشاند */
  .main{padding-bottom:calc(var(--botnav-h) + env(safe-area-inset-bottom))}
  .footer{display:none}
}
@media(max-width:600px){
  .content{padding:14px}
  /* ---------- کاشی‌های آمار روی گوشی: دو ستونه و فشرده ----------
     پیش از این یک‌ستونه بود و هر کاشی ۱۱۸ پیکسل ارتفاع داشت؛ یعنی چهار عدد
     کلیدی، چهار بلوکِ بلند می‌شدند و کاربر باید تا پایین اسکرول می‌کرد تا به
     دکمهٔ «صدور برگه» برسد. داشبورد وقتی مدیریتی است که در «یک نگاه» دیده شود،
     پس همان چهار عدد در یک شبکهٔ ۲×۲ جمع می‌شوند و ارتفاعشان نصف. */
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .stat{padding:13px 14px;min-height:0;border-radius:14px;box-shadow:0 8px 20px -12px rgba(0,0,0,.45)}
  .stat .v{font-size:19px}
  .stat .v small{font-size:11px}
  .stat .l{font-size:11.5px;margin-top:3px;line-height:1.5}
  /* آیکنِ پس‌زمینه در عرضِ کم با خودِ عدد تداخل می‌کرد و خواندنش را سخت می‌کرد */
  .stat i.bg{font-size:38px;left:10px;opacity:.16}
  /* اثرِ بالاآمدن روی لمس معنا ندارد و فقط باعث پرشِ کاشی هنگام اسکرول می‌شود */
  .stat:hover{transform:none;box-shadow:0 8px 20px -12px rgba(0,0,0,.45)}
  .form-grid{grid-template-columns:1fr}
  .topbar .user b,.topbar .user small{display:none}
  .topbar .user{padding:5px}
  /* روی ۳۹۰ پیکسل، پنج عنصرِ سربرگ ۲۲۰ پیکسل از ۳۹۰ را می‌گرفتند و چیزی برای
     عنوان نمی‌ماند. دکمهٔ خروجِ سربرگ حذف می‌شود چون همان گزینه پایین کشوی
     کناری هم هست؛ بقیه فقط کوچک‌تر می‌شوند. */
  .topbar{gap:9px;padding-inline:calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-left))}
  .topbar .ttl{font-size:15.5px}
  .topbar .burger{width:38px;height:38px;font-size:18px;flex:none}
  /* روی موبایل فقط آیکن می‌ماند؛ نوار بالا جای کلمه ندارد */
  .topbar .tb-help{height:34px;padding:0 9px;font-size:12.5px}
  .topbar .tb-help span{display:none}
  .topbar .user{flex:none}
  .topbar .user .av{width:32px;height:32px;font-size:13px}
  /* خروج روی موبایل هم می‌ماند: نوار کناری آن‌جا بسته است، پس پنهان‌کردنش یعنی
     کاربر برای خروج باید اول منو را باز کند. مهم‌ترین کنشِ امنیتی نباید دو کلیک شود. */
  .page-head{padding:16px 18px}
  .page-head h1{font-size:18px}
  .card2 .bd{padding:16px}
  .form-actions{flex-direction:column}
  .form-actions .btn2{width:100%;justify-content:center}
}

/* ---------- جدول واکنش‌گرا: روی موبایل هر ردیف یک کارت می‌شود ---------- */
@media(max-width:720px){
  table.tbl{font-size:13.5px}
  table.tbl thead{display:none}
  table.tbl, table.tbl tbody{display:block;width:100%}
  table.tbl tr{
    display:block;background:#fff;border:1px solid var(--line);border-radius:14px;
    margin-bottom:12px;padding:6px 4px;box-shadow:var(--shadow-sm);
  }
  table.tbl td{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:10px 14px;border-bottom:1px dashed var(--line);text-align:left;
  }
  table.tbl tr td:last-child{border-bottom:none}
  table.tbl td::before{
    content:attr(data-label);font-weight:800;color:var(--ink-soft);font-size:12px;
    flex:none;text-align:right;
  }
  table.tbl td[data-label=""]::before,table.tbl td:not([data-label])::before{display:none}
  table.tbl td .actions,table.tbl td > div{flex-wrap:wrap;justify-content:flex-end}
  table.tbl td.empty{display:block;text-align:center}
  table.tbl td.empty::before{display:none}
  .tbl-wrap{overflow:visible}
}

/* ===================== پوستهٔ پنل ادمین — متمایز (اسلیت/زمردی) ===================== */
.admin-skin{
  --primary:#0d9488; --primary-dark:#0f766e; --primary-light:#5eead4;
  --header-grad:linear-gradient(120deg,#0f766e 0%,#0d9488 55%,#14b8a6 100%);
  --sidebar-bg:linear-gradient(185deg,#0c2b28 0%,#0a201d 45%,#06110f 100%);
  --bg:#eef4f3;
}
.admin-skin body,.admin-skin{background:var(--bg)}
.admin-skin .sidebar::after{background:radial-gradient(420px 200px at 100% 0,rgba(20,184,166,.20),transparent 60%)}
.admin-skin .sidebar .brand .logo{box-shadow:0 8px 20px -4px rgba(13,148,136,.6)}
.admin-skin .sidebar .brand b{background:linear-gradient(90deg,#5eead4,#99f6e4,#a7f3d0);-webkit-background-clip:text;background-clip:text;color:transparent}
.admin-skin .sidebar .nav a.active{background:linear-gradient(100deg,rgba(13,148,136,.42),rgba(20,184,166,.22));box-shadow:0 8px 22px -8px rgba(13,148,136,.7),inset 0 0 0 1px rgba(255,255,255,.06)}
.admin-skin .sidebar .nav a.active i{color:#5eead4}
.admin-skin .sidebar .nav a.active::before{background:linear-gradient(180deg,#2dd4bf,#5eead4);box-shadow:0 0 12px rgba(45,212,191,.8)}
.admin-skin .topbar{box-shadow:0 10px 30px -10px rgba(13,148,136,.5)}
.admin-skin .topbar .user .av{color:#0d9488}
.admin-skin .btn2.pri{background:linear-gradient(120deg,#0d9488,#14b8a6);box-shadow:0 8px 20px -8px rgba(13,148,136,.7)}
/* کارت‌های خنثی هم باید هم‌رنگ پوسته باشند. پیش‌تر فقط .stat.p فیروزه‌ای می‌شد و
   بقیه نیلی/خاکستری می‌ماندند، و همان باعث می‌شد داشبورد ادمین رنگین‌کمانی به‌نظر برسد. */
.admin-skin{
  --card-a:linear-gradient(135deg,#0f766e,#14b8a6);
  --card-b:linear-gradient(135deg,#115e59,#0f766e);
  --card-c:linear-gradient(135deg,#0d9488,#0f766e);
}
.admin-skin .card2 .hd i{color:#0d9488}
.admin-skin .page-head{background:linear-gradient(120deg,#134e4a,#0f766e 55%,#0d9488)}
.admin-skin .fld input:focus,.admin-skin .fld select:focus,.admin-skin .fld textarea:focus{border-color:#2dd4bf;box-shadow:0 0 0 4px rgba(20,184,166,.16)}
.admin-skin ::selection{background:rgba(13,148,136,.2)}

/* ---------- جستجوی فهرست‌ها ---------- */
.tbl-search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 16px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.tbl-search i{color:var(--ink-soft);font-size:17px}
.tbl-search input{flex:1;border:none;outline:none;background:none;font-family:inherit;font-size:14.5px;color:var(--ink);min-width:0}
.tbl-search input::placeholder{color:#94a3b8}
.tbl-search:focus-within{border-color:var(--primary-light);box-shadow:0 0 0 4px rgba(129,140,248,.14)}
.admin-skin .tbl-search:focus-within{border-color:#2dd4bf;box-shadow:0 0 0 4px rgba(20,184,166,.16)}
.tbl-search .cnt{font-size:12px;font-weight:800;color:var(--primary);white-space:nowrap}

/* ---------- سرفصل بخش‌های داشبورد ---------- */
/* داشبورد چند موضوع مستقل دارد (کارهای معطل، آمار، مالی، برترین‌ها). بدون سرفصل،
   همه یک دیوار یک‌دستِ کارت می‌شوند و چشم نمی‌فهمد کجا موضوع عوض شده. */
.dash-sec{display:flex;align-items:center;gap:12px;margin:28px 0 14px}
.dash-sec.first{margin-top:4px}
.dash-sec span{font-size:13px;font-weight:800;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.dash-sec span i{font-size:14px;color:var(--primary)}
.dash-sec::after{content:"";flex:1;height:1px;background:var(--line)}

/* تعداد ستون از روی تعداد کارت انتخاب می‌شود، نه auto-fit.
   auto-fit هر عرضی را پر می‌کند ولی تضمینی نمی‌دهد ردیف آخر پر شود: شش کارت
   روی پنج ستون یعنی یک کارتِ تنها و آویزان. سه ستون برای شش کارت قرینه است. */
.stats.cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.stats.cols3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.stats.cols3{grid-template-columns:1fr}}

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

   تصمیم طراحی: بدنهٔ فلز در همهٔ نقش‌ها یکسان و خنثی است (فولاد/گان‌متال) و
   فقط «رنگِ نقش» در قلم‌رنگِ گزینهٔ فعال باقی می‌ماند. فلزِ رنگی‌شده به ازای هر
   نقش، پنج پوستهٔ ناهمخوان می‌ساخت؛ این‌طور همهٔ پنل‌ها یک خانواده‌اند و نقش
   همچنان قابل تشخیص است.

   کنتراست: متن‌های منو روی تیره‌ترین و روشن‌ترین نقطهٔ همین فلز سنجیده شده‌اند
   تا زیر AA نیفتند — به همین دلیل رنگ متن‌ها روشن‌تر از نسخهٔ قبل است. */

:root{
  /* ورقِ فولادِ برس‌خورده — نوارها بازتاب نورند، نه تزئین */
  --metal-sheet:
    linear-gradient(184deg,
      #4a5364 0%, #3c4453 14%, #2f3644 30%,
      #363e4d 46%, #2a313d 62%, #232935 78%, #1b202a 100%);
  /* بافت برس‌خورده: خط‌های بسیار کم‌رنگ و نازک */
  --metal-brush:
    repeating-linear-gradient(94deg,
      rgba(255,255,255,.030) 0px, rgba(255,255,255,.030) 1px,
      rgba(0,0,0,.022) 1px,     rgba(0,0,0,.022) 3px);
  /* گزینهٔ فعال: فلزِ صیقلی‌تر و روشن‌تر از بدنه */
  --metal-active:
    linear-gradient(100deg, rgba(255,255,255,.20), rgba(255,255,255,.07) 55%, rgba(255,255,255,.13));
  --metal-edge-top:rgba(255,255,255,.16);
  --metal-edge-bottom:rgba(0,0,0,.45);
  --metal-ink:#dbe2ec;        /* متن عادی منو */
  --metal-ink-dim:#9aa6b8;    /* عنوان بخش‌ها */
}

.sidebar{background:var(--metal-sheet)}
/* بافت برس روی کل ورق؛ pointer-events ندارد تا کلیک‌ها رد شوند */
.sidebar::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--metal-brush);opacity:.55;
}
/* لبهٔ روشنِ بالا و سایهٔ لبهٔ داخلی — حسِ ضخامتِ ورق */
.sidebar{box-shadow:-8px 0 40px -12px rgba(0,0,0,.55),
                    inset 0 1px 0 var(--metal-edge-top),
                    inset 0 -1px 0 var(--metal-edge-bottom)}

.sidebar .nav a{color:var(--metal-ink)}
.sidebar .nav .sec{color:var(--metal-ink-dim)}
.sidebar .nav a:hover{background:rgba(255,255,255,.07);color:#fff}

/* گزینهٔ فعال: صفحهٔ صیقلی + نوارِ رنگِ نقش. رنگِ نقش فقط همین‌جا می‌ماند. */
.sidebar .nav a.active{
  background:var(--metal-active);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             inset 0 -1px 0 rgba(0,0,0,.35),
             0 6px 18px -10px rgba(0,0,0,.7);
}
.sidebar .nav a.active i{color:#fff}
.sidebar .nav a.active::before{
  background:linear-gradient(180deg,var(--primary-light),var(--primary));
  box-shadow:0 0 10px rgba(var(--primary-light-rgb),.75);
}

/* برند و پاورقی نسخه روی همین ورق */
.sidebar .brand{border-bottom-color:rgba(255,255,255,.10)}
.sidebar .side-ver{border-top-color:rgba(255,255,255,.10);color:var(--metal-ink-dim)}
.sidebar .side-ver small{color:#8d99ab}

/* پوستهٔ ادمین: همان فلز، فقط ته‌رنگِ سبزِ بسیار ملایم تا با هدر فیروزه‌ای بخواند */
.admin-skin{
  --metal-sheet:
    linear-gradient(184deg,
      #40544f 0%, #35473f 14%, #293832 30%,
      #2f403a 46%, #24322d 62%, #1d2825 78%, #161f1c 100%);
}

/* ---------- فشرده‌سازی برای گوشی ---------- */
/* روی گوشی کارت‌های آمار یک‌ستونه می‌شدند و هر کدام ۱۱۸ پیکسل ارتفاع کف داشتند؛
   چهار کارت یعنی حدود ۷۲۰ پیکسل فقط آمار، پیش از آنکه کاربر به محتوای صفحه برسد.
   نتیجه‌اش صفحه‌ای بود که فقط اسکرول می‌خورد و هیچ‌چیز کنار هم دیده نمی‌شد.
   دو ستون روی ۳۹۰ پیکسل جا می‌شود و همان چهار کارت را در دو ردیف نشان می‌دهد. */
@media(max-width:620px){
  .stats,.stats.cols3{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
  .stat{padding:14px;min-height:94px;border-radius:15px;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
  .stat .v{font-size:19.5px}
  .stat .v small{font-size:11px}
  .stat .l{font-size:11.5px;margin-top:3px;line-height:1.5}
  /* نقشِ تصویرِ پس‌زمینه تزئین است؛ در ابعاد کوچک فقط شلوغی می‌سازد */
  .stat i.bg{font-size:40px;opacity:.15;left:10px}
  /* سرفصل‌های داشبورد هم فشرده‌تر */
  .dash-sec{margin:20px 0 10px}
  .dash-sec span{font-size:12px}
}

/* ردیف‌های منو روی گوشی بلندتر از لازم بودند و فهرست را بی‌جهت دراز می‌کردند */
@media(max-width:900px){
  .sidebar .nav a{padding:10px 13px;margin:2px 0;font-size:13.5px;border-radius:11px}
  .sidebar .nav a i{font-size:17px;width:20px}
  .sidebar .nav .sec{padding:13px 12px 5px;font-size:9.5px}
  .sidebar .brand{padding:16px 18px 14px}
  .sidebar .brand .logo{width:38px;height:38px;border-radius:12px}
  .sidebar .brand b{font-size:17px}
}

/* ==================================================================
   منوی روشن — بازتعریفِ همان توکن‌های متالیک
   ==================================================================
   پرداخت فلزیِ تیره پسندیده نشد. چون منو روی توکن ساخته شده بود، فقط پالت
   عوض می‌شود و ساختار (لبه‌ها، حالت فعال، منوی پایین موبایل) دست‌نخورده می‌ماند.

   چرا روشن: نسخهٔ تیره دو بار امتحان شد و هر بار «ناخوشایند» بود. ضمناً این پنل
   روی گوشی و در نور روزِ کارگاه استفاده می‌شود، و متن تیره روی زمینهٔ روشن آنجا
   خواناتر از عکسش است.

   کنتراست سنجیده شده: متن ‎#334155‎ روی ‎#f7f9fc‎ حدود ‎9:1‎ و سرفصل ‎#64748b‎
   حدود ‎4.8:1‎ — هر دو بالای آستانهٔ AA. رنگ‌های قبلی برای زمینهٔ تیره انتخاب شده
   بودند و روی روشن عملاً ناخوانا می‌شدند. */
:root{
  --metal-sheet:linear-gradient(180deg,#ffffff 0%,#f7f9fc 55%,#f1f4f9 100%);
  --metal-brush:none;
  /* پرکردنِ کامل، نه ته‌رنگ. گرافیتیِ ‎۱۳٪‎ روی سفید خاکستریِ کدر می‌شد و
     «انتخاب‌شده» خوانده نمی‌شد؛ در نمونهٔ رندرشده بیشتر شبیه لکه بود تا حالت فعال. */
  --metal-active:linear-gradient(100deg,var(--primary-dark),var(--primary));
  --metal-edge-top:rgba(255,255,255,.9);
  --metal-edge-bottom:rgba(15,23,42,.06);
  --metal-ink:#334155;
  --metal-ink-dim:#64748b;
}
.admin-skin{
  --metal-sheet:linear-gradient(180deg,#ffffff 0%,#f5faf8 55%,#eef6f3 100%);
}

/* سایه و لبه روی زمینهٔ روشن باید ملایم باشد، وگرنه کثیف دیده می‌شود */
.sidebar{
  box-shadow:-1px 0 0 rgba(15,23,42,.07), -10px 0 30px -22px rgba(15,23,42,.25);
  border-inline-start:0;
}
.sidebar::after{background:none}          /* هالهٔ رنگیِ زمینهٔ تیره اینجا معنا ندارد */
.sidebar .brand{border-bottom-color:rgba(15,23,42,.08)}
/* نام برند روی زمینهٔ روشن با گرادیانِ روشن نامرئی می‌شد */
.sidebar .brand b{background:none;-webkit-text-fill-color:currentColor;color:#a85f2e}
.sidebar .brand span{color:#8a94a6}
.sidebar .brand .logo{box-shadow:0 4px 14px -6px rgba(15,23,42,.35)}

/* آرشیوبندی باید دیده شود: سرفصل پررنگ‌تر + خط جداکننده تا مرز گروه‌ها معلوم باشد */
.sidebar .nav .sec{
  color:var(--metal-ink-dim);font-size:10.5px;letter-spacing:.6px;
  display:flex;align-items:center;gap:9px;padding:18px 12px 8px;
}
.sidebar .nav .sec::after{content:"";flex:1;height:1px;background:rgba(15,23,42,.09)}
.sidebar .nav a:hover{background:rgba(15,23,42,.05);color:#0f172a}
/* ‎line-height:1.9‎ از body ارث می‌رسید و ردیف‌ها را کش می‌داد؛ فهرستِ کشیده همان
   چیزی است که «بی‌نظم» دیده می‌شود، چون مرزِ گروه‌ها در فاصلهٔ زیاد گم می‌شود. */
.sidebar .nav a{line-height:1.5}
.sidebar .nav a.active{
  color:#fff;
  box-shadow:0 6px 18px -8px rgba(var(--primary-rgb),.55);
}
.sidebar .nav a.active i{color:var(--accent-light)}
.sidebar .side-ver{border-top-color:rgba(15,23,42,.08)}
.sidebar .side-ver small{color:#94a3b8}

/* پوستهٔ ادمین با گزینشگرِ ‎.admin-skin .sidebar…‎ نوشته شده و از قواعد روشنِ بالا
   اولویت بیشتری دارد؛ پس همان چند قاعده که زمینهٔ تیره را فرض می‌کردند باید
   با همان وزن دوباره نوشته شوند، وگرنه در پنل ادمین متنِ فیروزهٔ روشن روی
   سایدبارِ سفید می‌نشیند و عملاً ناخواناست. */
.admin-skin .sidebar::after{background:none}
.admin-skin .sidebar .brand b{
  background:none;-webkit-text-fill-color:currentColor;color:#0f766e;
}
.admin-skin .sidebar .nav a.active{
  background:linear-gradient(100deg,#0f766e,#14b8a6);
  color:#fff;box-shadow:0 6px 18px -8px rgba(13,148,136,.55);
}
.admin-skin .sidebar .nav a.active i{color:#ccfbf1}
.admin-skin .sidebar .nav a.active::before{background:#ccfbf1;box-shadow:none}
/* هالهٔ نوارِ فعال برای زمینهٔ تیره ساخته شده بود؛ روی روشن فقط لکه می‌اندازد */
.sidebar .nav a.active::before{background:var(--accent-light);box-shadow:none}

/* ==================================================================
   منوی کشویی و رنگ‌بندی گروه‌ها
   ==================================================================
   سفیدِ یکدست نه گروه‌ها را از هم جدا می‌کرد و نه چیزی به کاربر می‌گفت. حالا
   زمینه کرم است و هر گروه رنگ خودش را دارد؛ رنگ از معنای گروه می‌آید، پس
   «مالی» در پنل ادمین و اتحادیه یک رنگ است.

   چرا سبز/کهربایی/قرمز اینجا با رنگ‌های وضعیت اشتباه نمی‌شوند: رنگِ وضعیت همیشه
   روی یک تراشهٔ کوچک کنار داده می‌نشیند، ولی این‌ها فقط سرفصل گروه و نوار کناری
   ردیف‌اند — دو جای متفاوت که هیچ‌وقت کنار هم دیده نمی‌شوند. */
:root{
  --metal-sheet:linear-gradient(180deg,#fdfaf4 0%,#f7f1e6 55%,#f2ebdc 100%);
  --metal-ink:#3f3a33;
  --metal-ink-dim:#8a7f70;
}
.admin-skin{ --metal-sheet:linear-gradient(180deg,#fdfbf5 0%,#f4f2e6 55%,#edefe2 100%) }
.sidebar{box-shadow:-1px 0 0 rgba(80,60,30,.10), -10px 0 30px -22px rgba(80,60,30,.30)}
.sidebar .brand{border-bottom-color:rgba(120,95,60,.16)}
.sidebar .side-ver{border-top-color:rgba(120,95,60,.16)}

/* گروه */
.sidebar .nav .grp{margin:6px 0 2px;border-radius:14px;background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.10);overflow:hidden}
.sidebar .nav .grp-h{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;
  background:none;border:0;font-family:inherit;font-weight:800;font-size:12.5px;
  color:var(--g-ink);cursor:pointer;text-align:start;line-height:1.5;
  border-inline-start:4px solid var(--g-bar)}
.sidebar .nav .grp-h .gi{font-size:15px;width:20px;text-align:center;color:var(--g-bar)}
/* شمارندهٔ گروه حذف شد: فقط تعدادِ آیتم‌های همان گروه را می‌گفت و چون شبیه نشانِ
   هشدار بود، هر بار بی‌دلیل نگاه را می‌گرفت. ‎margin-inline-start:auto‎ که فلش را
   به لبه می‌چسباند روی همان شمارنده بود، پس به خودِ فلش منتقل شد. */
.sidebar .nav .grp-h .chev{margin-inline-start:auto;font-size:11px;transition:transform .2s;color:var(--g-ink);opacity:.65}
.sidebar .nav .grp-h[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.sidebar .nav .grp-h:hover{background:var(--g-soft)}
.sidebar .nav .grp-b{list-style:none;margin:0;padding:2px 6px 7px}
.sidebar .nav .grp-b a{font-size:13.5px;padding:9px 12px;margin:1px 0;border-radius:10px}
.sidebar .nav .grp-b a:hover{background:var(--g-soft);color:var(--g-ink)}
/* ردیف فعال رنگِ گروه خودش را می‌گیرد، نه رنگ سراسری */
.sidebar .nav .grp-b a.active{background:var(--g-bar);color:#fff;box-shadow:0 5px 14px -7px var(--g-bar)}
.sidebar .nav .grp-b a.active i{color:#fff}
.sidebar .nav .grp-b a.active::before{display:none}

/* ردیف‌های بی‌گروه (داشبورد، صدور برگه) — بالای فهرست و کمی برجسته‌تر */
.sidebar .nav a.top{font-weight:800;background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1px rgba(120,95,60,.10);margin:3px 0}
.sidebar .nav a.top.active{background:linear-gradient(100deg,#6b4f2a,#8a6a3a);color:#fff;box-shadow:0 6px 16px -8px rgba(107,79,42,.6)}
.sidebar .nav a.top.active i{color:#f0cba9}
.sidebar .nav .nav-out{margin-top:8px;padding-top:6px;border-top:1px solid rgba(120,95,60,.16)}

/* پالت گروه‌ها: نوار/آیکن، متن، و ته‌رنگِ پس‌زمینه */
.t-green {--g-bar:#3f7d4e; --g-ink:#2f5f3b; --g-soft:rgba(63,125,78,.12)}
.t-red   {--g-bar:#b34a3c; --g-ink:#8d3a2f; --g-soft:rgba(179,74,60,.12)}
.t-amber {--g-bar:#c08a2e; --g-ink:#8f6720; --g-soft:rgba(192,138,46,.14)}
.t-copper{--g-bar:#c2703c; --g-ink:#96552c; --g-soft:rgba(194,112,60,.13)}
.t-brown {--g-bar:#7a5c3e; --g-ink:#5e472f; --g-soft:rgba(122,92,62,.12)}
.t-slate {--g-bar:#5b6675; --g-ink:#414b58; --g-soft:rgba(91,102,117,.12)}
/* گروهِ «نمایندگی» — در پنلِ کاربرِ دونقشه باید از کارِ خودش بصری جدا باشد، وگرنه
   صاحب یک مرکز دکمهٔ «تعلیق مرکز» را با کارهای خودِ مرکزش اشتباه می‌گیرد. */
.t-indigo{--g-bar:#5b5bd6; --g-ink:#4038a8; --g-soft:rgba(91,91,214,.13)}

@media(max-width:900px){
  .sidebar .nav .grp-h{padding:10px 11px;font-size:12px}
  .sidebar .nav .grp-b a{font-size:13px;padding:8px 11px}
}

/* ==================================================================
   کرمِ تیره‌تر + سایه‌روشن + مسی و نقره‌ای
   ==================================================================
   کرمِ قبلی تقریباً سفید بود و کارت‌های سفیدِ روی آن دیده نمی‌شدند. حدود ۲۰٪
   تیره‌تر شد تا مرزِ منو با محتوا واقعاً پیدا باشد و کارت‌های روشنِ داخلش
   برجسته شوند. متن ‎#3f3a33‎ روی تیره‌ترین نقطه (‎#e0d3ba‎) هنوز ‎7.4:1‎ است. */
:root{
  --metal-sheet:linear-gradient(180deg,#f0e9db 0%,#e8ddc8 55%,#e0d3ba 100%);
  --silver:#c9ccd1; --silver-lo:#a8adb5; --silver-hi:#f2f4f6;
  --copper:#c2703c; --copper-lo:#96552c; --copper-hi:#e8b489;
}
.admin-skin{ --metal-sheet:linear-gradient(180deg,#eeead9 0%,#e4e2cd 55%,#d9dcc6 100%) }

/* لبهٔ نقره‌ای سایدبار: یک خط روشن و یک خط تیره، همان چیزی که به فلز حجم می‌دهد */
.sidebar{
  box-shadow:-1px 0 0 var(--silver), -2px 0 0 rgba(255,255,255,.5),
             -12px 0 34px -22px rgba(80,60,30,.45);
}
.sidebar .brand{border-bottom-color:rgba(120,95,60,.22)}
.sidebar .side-ver{border-top-color:rgba(120,95,60,.22)}

/* کارتِ گروه: گرادیان روشن‌به‌تیره + خط سفید بالا = سایه‌روشن */
.sidebar .nav .grp{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.46));
  box-shadow:inset 0 0 0 1px rgba(150,120,80,.16),
             inset 0 1px 0 rgba(255,255,255,.95),
             0 2px 6px -4px rgba(90,70,40,.35);
}
.sidebar .nav .grp-h{
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
}
.sidebar .nav .grp-h:hover{
  background:linear-gradient(180deg,var(--g-soft),rgba(255,255,255,0));
}
/* نوارِ رنگیِ کنارِ سرفصل هم سایه‌روشن می‌گیرد تا تخت نباشد */
.sidebar .nav .grp-h{border-inline-start-color:transparent;position:relative}
.sidebar .nav .grp-h::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--g-bar) 72%,#fff),var(--g-bar));
}
/* ردیف فعال: لبهٔ روشنِ بالا + سایهٔ پایین، به‌جای رنگِ تخت */
.sidebar .nav .grp-b a.active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--g-bar) 82%,#fff),var(--g-bar));
  box-shadow:0 6px 14px -7px var(--g-bar), inset 0 1px 0 rgba(255,255,255,.28);
}
/* ردیف‌های بی‌گروه: نقره‌ای براق */
.sidebar .nav a.top{
  background:linear-gradient(180deg,var(--silver-hi),#e3e6ea);
  box-shadow:inset 0 0 0 1px var(--silver), inset 0 1px 0 #fff,
             0 2px 6px -4px rgba(60,70,85,.4);
}
.sidebar .nav a.top.active{
  background:linear-gradient(180deg,#8a6a3a,#5e4526);
  color:#fff;
  box-shadow:0 7px 16px -8px rgba(94,69,38,.75), inset 0 1px 0 rgba(255,255,255,.25);
}
.sidebar .nav a.top.active i{color:var(--copper-hi)}
.sidebar .nav .nav-out{border-top-color:rgba(120,95,60,.22)}

/* گروهِ خنثی نقره‌ای می‌شود، نه خاکستریِ بی‌روح */
.t-slate{--g-bar:#8d949e; --g-ink:#4a515b; --g-soft:rgba(141,148,158,.14)}

/* پشتیبانِ color-mix.
   WebViewِ اپ اندروید روی دستگاه‌های قدیمی‌تر (کروم زیر ۱۱۱) color-mix را
   نمی‌شناسد. در CSS یک مقدارِ نامعتبر کلِ همان اعلان را دور می‌اندازد — یعنی
   ردیف فعال هیچ پس‌زمینه‌ای نمی‌گرفت و متنِ سفیدش روی کرم نامرئی می‌شد.
   پس اول رنگِ تخت اعلام می‌شود و بعد نسخهٔ گرادیانی؛ مرورگر جدید دومی را
   برمی‌دارد و قدیمی روی اولی می‌ماند. */
.sidebar .nav .grp-b a.active{background:var(--g-bar)}
.sidebar .nav .grp-b a.active{
  background:linear-gradient(180deg,color-mix(in srgb,var(--g-bar) 82%,#fff),var(--g-bar));
}
.sidebar .nav .grp-h::before{background:var(--g-bar)}
.sidebar .nav .grp-h::before{
  background:linear-gradient(180deg,color-mix(in srgb,var(--g-bar) 72%,#fff),var(--g-bar));
}

/* ==================================================================
   نوار پایینِ موبایل — بازطراحی
   ==================================================================
   نسخهٔ قبلی سه ایراد داشت که روی گوشی به‌چشم می‌آمد:

   ۱) دو نقطهٔ شکستِ متفاوت. خودِ نوار در ‎≤992‎ ظاهر می‌شد ولی رنگ و بافتش در
      ‎≤900‎ عوض می‌شد؛ یعنی بین ۹۰۱ تا ۹۹۲ پیکسل یک نوارِ سفیدِ بی‌ربط با بقیهٔ
      پوسته دیده می‌شد. حالا همه‌چیز در یک ‎@media‎ جمع شده است.

   ۲) گزینهٔ فعال نامرئی بود. قاعدهٔ ‎.botnav a.active{color:#fff}‎ برای دورانی
      نوشته شده بود که ورقِ فلز تیره بود؛ بعد از تغییر ورق به کرم، متنِ سفید روی
      کرم عملاً محو می‌شد و فقط یک خطِ ۳ پیکسلیِ بی‌جا بالای گزینه می‌ماند.
      حالا گزینهٔ فعال یک «قرصِ» گرافیتی با متنِ سفید و آیکنِ مسی است — همان
      زبانی که ردیف فعالِ کشوی کناری دارد.

   ۳) چیدمانِ ناهموار. ‎flex:1‎ روی برچسب‌های با طول متفاوت، فاصله‌ها را ناهمگون
      نشان می‌داد. ‎grid-auto-columns:1fr‎ ستون‌ها را دقیقاً هم‌اندازه می‌کند و
      به تعداد گزینه‌ها هم کار ندارد (نقش «نماینده» چهار خانه دارد، بقیه پنج).

   ناحیهٔ امن: با ‎viewport-fit=cover‎ خطِ خانهٔ اندروید/آیفون روی نوار می‌افتاد؛
   ‎env(safe-area-inset-bottom)‎ به padding اضافه می‌شود نه به ارتفاعِ خانه‌ها،
   پس دکمه‌ها همان اندازه می‌مانند و فقط نوار بلندتر می‌شود. */
@media(max-width:992px){
  .botnav{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;gap:4px;
    position:fixed;bottom:0;left:0;right:0;z-index:1035;
    min-height:calc(var(--botnav-h) + env(safe-area-inset-bottom));
    padding:5px calc(8px + env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    background:var(--metal-sheet);
    box-shadow:0 -1px 0 var(--silver),0 -10px 26px -16px rgba(80,60,30,.55),
               inset 0 1px 0 rgba(255,255,255,.85);
    border-top:0;
  }
  .botnav a,.botnav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;height:52px;border-radius:14px;padding:0 3px;
    font-family:inherit;font-size:11px;font-weight:700;line-height:1.15;
    color:var(--metal-ink);background:none;border:0;cursor:pointer;text-decoration:none;
    transition:background .16s,color .16s,box-shadow .16s;
  }
  /* آیکن در یک خانهٔ هم‌ارتفاع می‌نشیند تا برچسب‌ها هم‌تراز بمانند، حتی وقتی
     یک آیکن بلندتر از بقیه است (‎bi-plus-circle‎ در برابر ‎bi-shop‎). */
  .botnav a i,.botnav button i{font-size:20px;line-height:1;height:22px;display:grid;place-items:center}
  /* برچسب هرگز دو خطی نمی‌شود؛ اگر جا نبود کوتاه می‌شود */
  .botnav a span,.botnav button span{
    display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .botnav a:active,.botnav button:active{background:rgba(120,95,60,.10)}
  /* رنگِ تخت اول اعلام می‌شود تا مرورگرِ قدیمیِ اپ هم پس‌زمینه بگیرد؛
     وگرنه متنِ سفیدِ گزینهٔ فعال روی کرم نامرئی می‌شود. */
  .botnav a.active{background:var(--primary-dark)}
  .botnav a.active{
    background:linear-gradient(180deg,#4b5567,#2b3340);
    color:#fff;
    box-shadow:0 7px 16px -9px rgba(35,43,56,.95),inset 0 1px 0 rgba(255,255,255,.22);
  }
  .botnav a.active i{color:var(--accent-light)}
  .admin-skin .botnav a.active{background:#0f766e}
  .admin-skin .botnav a.active{
    background:linear-gradient(180deg,#14b8a6,#0f766e);
    color:#fff;box-shadow:0 7px 16px -9px rgba(13,148,136,.85),inset 0 1px 0 rgba(255,255,255,.25);
  }
  .admin-skin .botnav a.active i{color:#ccfbf1}
  /* گوشی‌های باریک (‎≤360‎): برچسب‌ها جا نمی‌شوند، پس فقط کمی کوچک‌تر می‌شوند
     — حذفشان نمی‌کنیم چون آیکنِ تنها در این پنل قابل حدس نیست. */
  @media(max-width:360px){
    .botnav{gap:2px;padding-inline:4px}
    .botnav a,.botnav button{font-size:10px}
    .botnav a i,.botnav button i{font-size:18.5px}
  }
}

/* ---------- دکمهٔ بازگشت و ساعت در نوار بالای پنل ---------- */
.topbar .tb-back{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);color:#fff;
  width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer;flex:none;
  display:grid;place-items:center;transition:.15s;z-index:1;backdrop-filter:blur(6px);
}
.topbar .tb-back:hover{background:rgba(255,255,255,.28)}
.topbar .tb-back:active{transform:scale(.92)}

.topbar .tb-clock{
  display:flex;flex-direction:column;align-items:center;line-height:1.25;
  color:#fff;flex:none;z-index:1;padding:0 4px;
}
.topbar .tb-clock b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.topbar .tb-clock small{font-size:10.5px;opacity:.85;white-space:nowrap}

@media(max-width:900px){
  /* روی گوشی عنوان صفحه جا را می‌گیرد، ولی تاریخ هم می‌ماند — کارشناس هنگام صدور
     برگه به هر دو نگاه می‌کند. فقط کوچک‌تر و در دو سطر جمع می‌شوند. */
  .topbar .tb-clock{flex:none;line-height:1.25}
  .topbar .tb-clock small{font-size:9.5px}
  .topbar .tb-clock b{font-size:13.5px}
  .topbar .tb-back{width:36px;height:36px;font-size:16px}
  .topbar .tb-logout button{width:36px;height:36px;font-size:17px}
}
@media(max-width:420px){
  /* در تنگ‌ترین حالت، عنوان اول کوتاه می‌شود نه اینکه دکمه‌ها بپرند */
  .topbar .ttl{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* ساعت و تاریخ اینجا حذف می‌شدند و روی گوشیِ ۳۹۰ پیکسلی — یعنی بیشترِ کاربران —
     اصلاً دیده نمی‌شدند. کوچک‌تر می‌شوند، نه ناپدید. */
  .topbar .tb-clock b{font-size:12px}
  .topbar .tb-clock small{font-size:9px}
}

/* ── قاب پلاک ایرانی (پارشال _Plate) ─────────────────────────────────────
   دوقلوی همان چیزی است که روی گواهی چاپ می‌شود؛ آنجا CSS درجاست چون آن صفحه
   به PDF تبدیل می‌شود و نباید به فایل بیرونی وابسته باشد. اگر یکی را تغییر
   دادید، دیگری را هم ببینید وگرنه پلاکِ پنل و پلاکِ برگه دو شکل می‌شوند. */
.plate{display:inline-flex;align-items:stretch;border:1.5px solid #15489e;border-radius:5px;overflow:hidden;background:#fff;font-weight:800;font-size:13px;direction:ltr;vertical-align:middle;line-height:1.15;white-space:nowrap}
.plate .pg{padding:2px 7px;display:grid;place-items:center;color:#111}
.plate .p-ir{background:#15489e;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 3px;gap:1px}
.plate .p-flag{width:9px;height:6px;border:.4px solid #fff;background:linear-gradient(#239f40 0 33.3%,#fff 33.3% 66.6%,#da0000 66.6% 100%)}
.plate .p-irt{font-size:4.4px;font-weight:700;line-height:1.05;text-align:center;letter-spacing:.2px}
.plate .p-rg{border-left:1px solid #15489e;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 5px;min-width:26px;color:#15489e}
.plate .p-rgt{font-size:5.5px;font-weight:700;line-height:1;border-bottom:.5px solid #15489e;padding-bottom:.8px;margin-bottom:.8px}
.plate .p-rgn{font-size:11px;font-weight:900;line-height:1}
.plate-raw{font-weight:800;letter-spacing:.3px}

/* ── چاپِ صفحه‌های پنل ────────────────────────────────────────────────────
   صفحه‌های پنل با سایدبار و نوار بالا چیده شده‌اند. روی کاغذ هیچ‌کدام معنا
   ندارند و اگر بمانند، محتوا در ستونی باریک وسطِ برگه چاپ می‌شود و بقیهٔ کاغذ
   هدر می‌رود — همان چیزی که کاربر آن را «چاپ نمی‌دهد» می‌بیند.

   اینجا و نه در تک‌تکِ صفحه‌ها: قاعده یکی است و رونوشتش در ده صفحه یعنی روزی
   نُه‌تایشان عقب می‌مانند.

   قرارداد: ‎.no-print‎ روی چیزی که نباید چاپ شود، و ‎.print-only‎ روی سربرگِ
   کاغذ که فقط موقع چاپ دیده می‌شود. */
.print-only{display:none}

@media print{
  @page{size:A4;margin:12mm}

  .sidebar,.topbar,.botnav,.ovl,.no-print,.burger,.fab,.idle-lock{display:none!important}
  body,.main,.content,.wrap{margin:0!important;padding:0!important;background:#fff!important}

  .print-only{display:block}

  /* کارت و ردیف نباید وسطشان به صفحهٔ بعد بشکنند. */
  .card2,.stat,.fi-card,tr{break-inside:avoid;page-break-inside:avoid}
  .card2{box-shadow:none!important;border:1px solid #999!important}

  /* جدول باید کامل چاپ شود، نه اینکه داخل قابِ اسکرول بماند. */
  .tbl-wrap{overflow:visible!important;max-height:none!important}
  .tbl{font-size:10.5px!important}
  .tbl thead{display:table-header-group}   /* سرستون روی هر صفحه تکرار شود */

  /* پیوندها روی کاغذ آبی و زیرخط‌دار بی‌معنا هستند. */
  a{text-decoration:none!important;color:inherit!important}
}