/* ==========================================================================
   صفحه ورود
   --------------------------------------------------------------------------
   جدا از app.css نگه داشته شده. صفحه ورود تنها جایی است که کاربر
   ناشناس می‌بیند و تنها صفحه‌ای که پوسته پورتال را ندارد؛ سبک‌هایش
   هم نباید در باقی سامانه بار شوند.

   قواعد قدیمی .login-* در app.css دست‌نخورده می‌مانند و بی‌اثرند —
   نمای تازه با پیشوند .lg نوشته شده. اگر روزی خواستید برگردید، فقط
   کافی است نمای قبلی را بازگردانید.
   ========================================================================== */

body.lg {
  background: var(--concrete);
  min-height: 100dvh;
}

.lg-wrap {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}

/* ========================================================== ستون هویت */
.lg-art {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s-8);
}

/* شبکه نقشه اجرایی */
.lg-art__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(248,246,242,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,246,242,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 20%, transparent 100%);
}

/*
| هاله فیروزه‌ای پشت نشان.
|
| کارش این است که چشم را به مرکز ببرد. بدون آن، نشان روی زمینه
| تیره یکدست شناور می‌ماند و ترکیب مسطح می‌شود.
*/
.lg-art__glow {
  position: absolute;
  inset-inline-start: 50%;
  top: 42%;
  width: 460px;
  height: 460px;
  transform: translate(50%, -50%);
  background: radial-gradient(circle, rgba(24,179,183,.16), transparent 62%);
  pointer-events: none;
}

.lg-art__center {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-inline: auto;
  max-width: 42ch;
}

.lg-art__mark {
  width: 180px;
  margin: 0 auto var(--s-6);
  color: var(--paper);        /* بخش خاکستری نشان از currentColor می‌آید */
}
.lg-art__mark svg,
.lg-art__mark .logo__mark { width: 100%; height: auto; color: var(--paper); }

.lg-art__name {
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;          /* هرگز مثبت — اتصال حروف فارسی را می‌شکند */
}

.lg-art__en {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .22em;      /* لاتین است؛ اینجا فاصله‌گذاری مجاز و مفید */
  color: rgba(248,246,242,.42);
  margin-top: var(--s-2);
}

/* نوار سه‌رنگ برند */
.lg-art__rule {
  display: block;
  width: 128px;
  height: 3px;
  margin: var(--s-6) auto;
  border-radius: 2px;
  background: linear-gradient(
    to left,
    #18B3B7 0 33.3%,
    #DFAE38 33.3% 66.6%,
    rgba(248,246,242,.35) 66.6% 100%
  );
}

.lg-art__claim {
  font-size: var(--t-sm);
  line-height: 2;
  color: rgba(248,246,242,.6);
}

.lg-art__foot {
  position: absolute;
  inset-inline: var(--s-8);
  bottom: var(--s-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-2xs);
  color: rgba(248,246,242,.32);
  z-index: 2;
}
.lg-art__foot .ref { color: rgba(248,246,242,.32); }

/* ========================================================== ستون ورود */
.lg-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-5);
  padding-block-end: calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
}

.lg-card {
  width: 100%;
  max-width: 380px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-6);
  box-shadow: 0 1px 2px rgba(20,24,28,.04), 0 12px 32px rgba(20,24,28,.06);
}

/*
| بلوک نشان از کارت حذف شد — ستون کناری همان را در اندازه بزرگ نشان
| می‌دهد و روی موبایل هم به نوار بالای صفحه تبدیل می‌شود. تکرارش در
| کارت، دو بار گفتن یک حرف بود.
*/
.lg-card h1 { margin-top: var(--s-2); }
/*
| رنگ نشان صریح گذاشته می‌شود.
|
| app.css قاعده‌ای دارد که .logo__mark را روی رنگ کاغذ می‌گذارد،
| چون در نوار کناری تیره می‌نشیند. آن قاعده اینجا هم اثر می‌کند و
| نشان را روی کارت سفید نامرئی می‌کند — پس باید بازنویسی شود.
*/




.lg-card h1 {
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: var(--s-1);
}
.lg-card__sub {
  color: var(--ink-faint);
  font-size: var(--t-xs);
  margin-bottom: var(--s-6);
  line-height: 1.9;
}

/* ---------------------------------------------------- رمز و چشم */
.lg-pass { position: relative; }
.lg-pass input { padding-inline-start: 44px; }

.lg-pass__eye {
  position: absolute;
  inset-inline-start: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  border-radius: var(--radius);
}
.lg-pass__eye:hover { color: var(--ink-soft); background: var(--concrete); }
.lg-pass__eye svg   { width: 19px; height: 19px; }
.lg-pass__eye.is-on { color: var(--oxide); }

.lg-submit {
  width: 100%;
  margin-top: var(--s-5);
  padding-block: 12px;
  font-size: var(--t-sm);
  font-weight: 700;
}

/* ---------------------------------------------------------- پاورقی */
.lg-card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--t-2xs);
}
.lg-card__foot a { color: var(--blueprint); }
.lg-card__foot a:hover { color: var(--oxide); }

.lg-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
}

.lg-legal {
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  text-align: center;
  max-width: 380px;
}

/* ============================================================ رسپانسیو */
@media screen and (max-width: 1000px) {
  .lg-wrap { grid-template-columns: 1fr; }

  /*
  | ستون هویت پنهان نمی‌شود بلکه به یک نوار کوتاه بالای صفحه تبدیل
  | می‌شود.
  |
  | حذف کاملش — که پیش‌تر بود — کاربر موبایل را با یک فرم بی‌هویت
  | تنها می‌گذارد؛ در سامانه‌ای که اکثر کاربرانش با گوشی وارد
  | می‌شوند، همان نوار کوتاه تنها جایی است که برند دیده می‌شود.
  */
  .lg-art {
    padding: var(--s-6) var(--s-5) var(--s-5);
    justify-content: flex-start;
  }
  .lg-art__glow  { display: none; }
  .lg-art__foot  { display: none; }
  .lg-art__claim { display: none; }
  .lg-art__rule  { margin: var(--s-4) auto 0; width: 96px; }

  .lg-art__mark  { width: 150px; margin-bottom: var(--s-4); }
  .lg-art__name  { font-size: var(--t-lg); }

  .lg-form { padding-top: var(--s-6); }
}

@media screen and (max-width: 480px) {
  .lg-card { padding: var(--s-6) var(--s-5); border-radius: var(--radius); }
  .lg-art__mark { width: 128px; }
}

/* نمایشگر بسیار کوتاه — مثل گوشی در حالت افقی */
@media screen and (max-height: 620px) and (min-width: 1000px) {
  .lg-art__mark  { width: 168px; }
  .lg-art__claim { display: none; }
}


/* ==========================================================================
   نشان شرکت — تصویر رسمی، نه بازترسیم
   --------------------------------------------------------------------------
   نشان حالا <img> است. پس اندازه‌دهی عوض می‌شود: پیش از این عرض و
   ارتفاع هر دو ثابت بودند؛ حالا فقط ارتفاع تعیین می‌شود و عرض خودش
   می‌آید تا نسبت اصلی (۱٫۵۴ به ۱) دست‌نخورده بماند.
   ========================================================================== */

.logo__mark {
  width: auto;
  height: 30px;
  display: block;
  object-fit: contain;
}

/* --------------------------------------------------------- سطح تیره

   بخش خاکستری نشان روی زمینه تیره تقریباً محو می‌شود — هم حرف D و
   هم ستون‌های ساختمان سمت چپ.

   راه‌حل بدیهی، روشن کردن آن خاکستری است. ولی آن یعنی ساختن لوگوی
   دوم، و لوگوی دوم یعنی هویت دوم.

   پس لوگو دست‌نخورده می‌ماند و زمینه‌اش عوض می‌شود: پلاکی روشن
   زیرش — همان کاری که در چاپ روی زمینه تیره انجام می‌شود.
   -------------------------------------------------------------------- */

.lg-art__mark {
  width: auto;
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-6);
}


/*
| پلاک نباید ارتفاع نشان را بخورد.
|
| سامانه روی همه عناصر box-sizing: border-box دارد، پس height شامل
| padding هم می‌شود — با ارتفاع ۳۰ و padding ۶، خودِ نشان ۱۸ پیکسل
| می‌ماند و خوانا نیست. content-box یعنی عدد ارتفاع مال خودِ تصویر
| است و پلاک از بیرون اضافه می‌شود.
*/
.lg-art__mark .logo__mark {
  box-sizing: content-box;
  height: 96px;
  padding: 16px 22px;
  background: var(--paper);
  border-radius: var(--radius-lg);
}



@media screen and (max-width: 1000px) {
  .lg-art__mark .logo__mark { height: 66px; padding: 12px 16px; }
}

@media screen and (max-width: 480px) {
  .lg-art__mark .logo__mark { height: 56px; padding: 10px 14px; }
}