/* ============================================================
   مرحبا لجستیک — هویت بصری
   ------------------------------------------------------------
   فقط چیزهای مربوط به نشان و نام برند. عمداً از panel.css جداست
   تا ارتقای بعدیِ پنل این فایل را دست‌نخورده بگذارد.
   رنگ‌های نشان با متغیر تعریف شده‌اند، پس در تم روشن هم درست می‌ماند.
   ============================================================ */

:root{
  --mh-cab-1:#33E3C6;   /* فیروزه‌ای کشنده */
  --mh-cab-2:#0FA2DE;   /* آبی شاسی و واحد سرمایش */
  --mh-box-1:#F2F9FF;   /* بالای بدنهٔ کانتینر */
  --mh-box-2:#C7DEF1;   /* پایین بدنه */
  --mh-groove:#8DB2CE;  /* شیارهای بدنه */
  --mh-glass:#F2F9FF;   /* شیشهٔ کابین */
  --mh-tyre:#0A1524;    /* لاستیک */
}
:root[data-theme=light]{
  --mh-box-1:#EDF5FC;
  --mh-box-2:#D3E4F4;
  --mh-groove:#9CBBD4;
  --mh-tyre:#16283D;
}

.mh-mark{display:block;overflow:visible}

/* ── نشان کنار نام، در نوار کناری و سربرگ صفحه‌های مستقل ──
   کلاس .logo پنل یک مربع با گرادیان و گلیف است؛ وقتی نشان SVG داخلش
   می‌نشیند آن پس‌زمینه اضافه است و نشان را خفه می‌کند. */
.logo.mh{
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  width:42px;height:42px;
  padding:0;
  display:grid;place-items:center;
  filter:drop-shadow(0 3px 8px color-mix(in srgb, var(--mh-cab-2) 34%, transparent));
}
.logo.mh .mh-mark{width:100%;height:100%}

/* ── نشان بزرگ صفحهٔ ورود و صفحهٔ ریشه ── */
.login-mark.mh{
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  width:96px;height:96px;
  margin-inline:auto;
  display:grid;place-items:center;
  filter:drop-shadow(0 8px 22px color-mix(in srgb, var(--mh-cab-2) 40%, transparent));
  animation:mhRoll .7s cubic-bezier(.2,.8,.25,1) both;
}
.login-mark.mh .mh-mark{width:100%;height:100%}

@keyframes mhRoll{
  from{opacity:0;transform:translateX(14px) scale(.94)}
  to{opacity:1;transform:none}
}
[dir=ltr] .login-mark.mh{animation-name:mhRollLtr}
@keyframes mhRollLtr{
  from{opacity:0;transform:translateX(-14px) scale(.94)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.login-mark.mh{animation:none}}

/* ── نام برند در سربرگ صفحه‌های مستقل (ورود، پرتال، رهگیری) ── */
.mh-word{display:grid;line-height:1.35;min-width:0}
.mh-word b{
  font-size:15px;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(100deg, var(--mh-cab-1), var(--mh-cab-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.mh-word span{font-size:10.5px;color:var(--tx-3, #7189a6)}

/* عنوان صفحهٔ ورود — همان گرادیان، اندازهٔ بزرگ‌تر */
.login-card h1.mh-title{
  background:linear-gradient(100deg, var(--mh-cab-1), var(--mh-cab-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.015em;
}

/* ── نشان چاپی (گواهی زنجیرهٔ سرد، فاکتور، برچسب QR) ──
   در چاپ گرادیان متن کار نمی‌کند، پس رنگ توپر می‌شود. */
@media print{
  .mh-word b, .login-card h1.mh-title{
    -webkit-text-fill-color:currentColor;color:#0B3B57;background:none;
  }
  .logo.mh, .login-mark.mh{filter:none}
}

/* ── نشان تصویری (نسخهٔ ۲) ──
   <picture> به‌طور پیش‌فرض inline است؛ باید مثل خود نشان رفتار کند تا
   width/height صددرصدِ ظرف‌های .logo و .login-mark درست بنشیند. */
.mh-pic{display:block;width:100%;height:100%;line-height:0}
.mh-pic .mh-mark{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}