/*
  گام W11.1 — قیف ثبت‌نام چندمرحله‌ای (`src/views/register-wizard.ejs`).

  این فایل روی `pages/login.css` سوار می‌شود و آن را بازنویسی نمی‌کند: فیلد، دکمه،
  آیکن و پیام خطا همان‌های صفحهٔ ورود‌اند تا دو صفحهٔ احراز هویت یک زبان بصری
  داشته باشند؛ اینجا فقط چیزهایی می‌آید که مخصوصِ ویزارد است (نوار پیشرفت، پنلِ
  مرحله، ردیفِ دکمه‌های قبلی/بعدی).

  چرا نسخهٔ مستقل از `website/assets/css/components/wizard-progress.css`:
  آن فایل با توکن‌های `--sp-*`/`--color-*` سایت نوشته شده و این صفحه در لایهٔ ERP
  است که پل توکن (`--dv-*`) دارد؛ همچنین در نصب محلی مسیر `website/partials` روی
  view-path نیست و این صفحه باید در هر دو حالت یکسان کار کند.

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

/* ---------- نوار پیشرفت ---------- */

.login-page .rw-progress {
  display: flex;
  flex-direction: column;
  gap: var(--dv-sp-3, 0.75rem);
  margin-bottom: var(--dv-sp-5, 1.25rem);
}

.login-page .rw-progress-count {
  margin: 0;
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-text-muted, #4d5b59);
}

.login-page .rw-progress-count strong {
  color: var(--dv-text, #1b2a28);
  font-weight: var(--dv-fw-bold, 700);
}

.login-page .rw-track {
  position: relative;
  height: 0.375rem;
  overflow: hidden;
  background: var(--dv-border-subtle, #eef2f1);
  border-radius: 999px;
}

.login-page .rw-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--dv-brand, #2a6055);
  border-radius: 999px;
  transition: width var(--dv-dur-slow, 320ms) ease-out;
}

.login-page .rw-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--dv-sp-2, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.login-page .rw-step {
  display: flex;
  align-items: center;
  gap: var(--dv-sp-2, 0.5rem);
  min-width: 0;
  font-size: var(--dv-fs-xs, 0.8125rem);
  color: var(--dv-text-muted, #4d5b59);
}

.login-page .rw-marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--dv-fs-2xs, 0.75rem);
  font-weight: var(--dv-fw-medium, 500);
  color: var(--dv-text-muted, #4d5b59);
  background: var(--dv-surface-sunken, #eef2f1);
  border: 1px solid var(--dv-border, #e2e8e7);
  border-radius: 999px;
}

/* برچسب در عرض کم بریده می‌شود تا نوار به خط دوم نریزد و چیدمان نپرد */
.login-page .rw-step-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.login-page .rw-step.is-done {
  color: var(--dv-text, #1b2a28);
}

.login-page .rw-step.is-done .rw-marker {
  color: var(--dv-text-inverse, #ffffff);
  background: var(--dv-brand, #2a6055);
  border-color: var(--dv-brand, #2a6055);
}

.login-page .rw-step.is-active {
  color: var(--dv-text, #1b2a28);
  font-weight: var(--dv-fw-medium, 500);
}

.login-page .rw-step.is-active .rw-marker {
  color: var(--dv-brand-ink, #142f2b);
  background: var(--dv-brand-subtle, #f2f8f6);
  border-color: var(--dv-brand, #2a6055);
}

/* ---------- پنل مرحله ---------- */

/*
  مرحلهٔ غیرفعال با `hidden` از جریان بیرون می‌رود، نه با `opacity`؛ فیلدِ نامرئیِ
  قابل‌فوکوس، ترتیب Tab را می‌شکند و صفحه‌خوان آن را می‌خواند.
*/
.login-page .rw-panel[hidden] {
  display: none;
}

.login-page .rw-panel-title {
  margin: 0 0 var(--dv-sp-1, 0.25rem);
  font-size: var(--dv-fs-lg, 1.125rem);
  font-weight: var(--dv-fw-bold, 700);
  color: var(--dv-text, #1b2a28);
}

.login-page .rw-panel-hint {
  margin: 0 0 var(--dv-sp-4, 1rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-text-muted, #4d5b59);
}

/* ---------- ردیف دکمه‌ها ---------- */

.login-page .rw-actions {
  display: flex;
  gap: var(--dv-sp-3, 0.75rem);
  align-items: center;
  margin-top: var(--dv-sp-5, 1.25rem);
}

/* دکمهٔ اصلی همان `btn-login` است؛ اینجا فقط اجازهٔ هم‌ردیف‌شدن می‌گیرد */
.login-page .rw-actions .btn-login {
  flex: 1;
  margin: 0;
}

/* «مرحلهٔ قبل» کنشِ فرعی است: قاب دارد و پُر نیست تا با کنشِ اصلی اشتباه نشود */
.login-page .btn-back {
  flex: none;
  padding: 0.625rem var(--dv-sp-4, 1rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  font-weight: var(--dv-fw-medium, 500);
  color: var(--dv-text-muted, #4d5b59);
  background: transparent;
  border: 1px solid var(--dv-border, #e2e8e7);
  border-radius: var(--dv-radius-md, 8px);
  cursor: pointer;
  transition: border-color var(--dv-dur-fast, 120ms) ease,
    color var(--dv-dur-fast, 120ms) ease;
}

.login-page .btn-back:hover,
.login-page .btn-back:focus-visible {
  color: var(--dv-text, #1b2a28);
  border-color: var(--dv-brand, #2a6055);
}

.login-page .btn-back:focus-visible {
  outline: none;
  box-shadow: var(--dv-focus-ring, 0 0 0 3px #bbd8d1);
}

.login-page .btn-back[hidden] {
  display: none;
}

/* ---------- زیرمرحلهٔ کد تأیید ---------- */

.login-page .rw-otp-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dv-sp-2, 0.5rem);
  align-items: baseline;
  margin: 0 0 var(--dv-sp-4, 1rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-text-muted, #4d5b59);
}

.login-page .rw-otp-note strong {
  color: var(--dv-text, #1b2a28);
  direction: ltr;
  unicode-bidi: isolate;
}

/* پیوندهای کنشیِ متنی (ویرایش شماره / ارسال مجدد) */
.login-page .rw-link {
  padding: 0;
  font-size: inherit;
  font-weight: var(--dv-fw-medium, 500);
  color: var(--dv-brand, #2a6055);
  background: none;
  border: 0;
  cursor: pointer;
}

.login-page .rw-link:hover:not(:disabled) {
  color: var(--dv-brand-hover, #204c44);
  text-decoration: underline;
}

/* شمارش معکوس نباید مثل پیوندِ فعال دیده شود */
.login-page .rw-link:disabled {
  color: var(--dv-text-subtle, #6b7a78);
  cursor: default;
}

/* کد تأیید عددِ لاتین است و باید تک‌تک ارقامش خوانا باشد */
.login-page #otpCode {
  font-family: var(--dv-font-num, inherit);
  letter-spacing: 0.35em;
  text-align: center;
}

/* ---------- موبایل ---------- */

@media (max-width: 640px) {
  /*
    در عرض کم، سه برچسب در یک ردیف به چند نویسه می‌رسند و بی‌معنا می‌شوند؛ پس
    فهرست به ردیفِ نشانه‌ها تبدیل می‌شود و نام مرحلهٔ جاری از خط «مرحلهٔ X از Y»
    خوانده می‌شود که همیشه دیده می‌شود.
  */
  .login-page .rw-step-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .login-page .rw-step {
    justify-content: center;
  }

  .login-page .rw-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-page .rw-fill {
    transition: none;
  }
}


/* ---------- تب انتخاب روش ورود ---------- */

/* دو روش ورود کنار هم؛ کاربر پیش از دیدن فرم مجبور به تصمیم نیست */
.login-page .rw-tabs {
  display: flex;
  gap: var(--dv-sp-2, 0.5rem);
  margin-bottom: var(--dv-sp-5, 1.25rem);
  padding: 0.25rem;
  background: var(--dv-surface-sunken, #eef2f1);
  border-radius: var(--dv-radius-md, 8px);
}

.login-page .rw-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dv-sp-2, 0.5rem);
  /* ۴۴ پیکسل حداقل هدف لمسی است؛ کمتر از آن روی موبایل خطای انتخاب می‌سازد */
  min-block-size: 2.75rem;
  padding: var(--dv-sp-2, 0.5rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  font-weight: var(--dv-fw-medium, 500);
  color: var(--dv-text-muted, #4d5b59);
  background: transparent;
  border: 0;
  border-radius: var(--dv-radius-sm, 6px);
  cursor: pointer;
}

.login-page .rw-tab[hidden] {
  display: none;
}

/* تب فعال هم پس‌زمینه دارد و هم وزن متن؛ رنگ تنها حاملِ معنا نیست */
.login-page .rw-tab.is-active {
  color: var(--dv-brand-ink, #142f2b);
  background: var(--dv-surface, #ffffff);
  font-weight: var(--dv-fw-bold, 700);
  box-shadow: 0 1px 2px var(--dv-shadow-ink, rgba(15, 23, 42, 0.08));
}

.login-page .rw-tab:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--dv-focus-ring, 0 0 0 3px #bbd8d1);
}

/* در عرض کم برچسب حذف می‌شود و آیکن می‌ماند تا تب‌ها به خط دوم نریزند */
@media (max-width: 400px) {
  .login-page .rw-tab > span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ---------- جریان‌ها ---------- */

/* جریان پنهان از جریان بیرون می‌رود تا فیلدش در ترتیب Tab نیفتد */
.login-page .rw-flow.d-none {
  display: none !important;
}

/* ---------- هدف لمسی پیوندهای متنی ---------- */

/* «ویرایش شماره» و «ارسال مجدد» روی موبایل کنار هم و کوچک بودند */
@media (max-width: 640px) {
  .login-page .rw-link {
    min-block-size: 2.25rem;
    padding-inline: var(--dv-sp-1, 0.25rem);
  }

  .login-page .rw-otp-note {
    gap: var(--dv-sp-3, 0.75rem);
  }
}

/* ---------- دکمهٔ پایان ---------- */

/* دکمهٔ «ادامه به انتخاب پلن» بیرون از ردیف کنش‌هاست، پس flex:1 نمی‌گیرد */
.login-page #rwPanelDone .btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  margin: 0;
}

/* ---------- کد تأیید ---------- */

/* letter-spacing انتهایی متن را از مرکز خارج می‌کند؛ تورفتگی معادل جبرانش می‌کند */
.login-page #otpCode {
  padding-inline-start: calc(var(--dv-sp-3, 0.75rem) + 0.35em);
}

/* ---------- کارت «شما وارد شده‌اید» ---------- */

/*
  کاربرِ واردشده به‌جای ریدایرکتِ خودکار دو انتخاب می‌بیند؛ پس این کارت جای کاملِ
  فرم را می‌گیرد و هر دو دکمه تمام‌عرض‌اند تا روی موبایل هم هدفِ لمسِ درستی باشند.
*/

.login-page .rw-session {
  display: flex;
  flex-direction: column;
  gap: var(--dv-sp-3, 0.75rem);
  text-align: center;
}

.login-page .rw-session-title {
  margin: 0;
  font-size: var(--dv-fs-lg, 1.125rem);
  font-weight: var(--dv-fw-bold, 700);
  color: var(--dv-text, #1b2a28);
}

.login-page .rw-session-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dv-sp-2, 0.5rem);
  margin: 0;
  padding: var(--dv-sp-3, 0.75rem);
  border: 1px solid var(--dv-border, #dbe4e2);
  border-radius: var(--dv-radius-md, 0.625rem);
  background: var(--dv-surface-muted, #f5f8f7);
  font-weight: var(--dv-fw-medium, 500);
  color: var(--dv-text, #1b2a28);
  word-break: break-word;
}

.login-page .rw-session-user i {
  color: var(--dv-primary, #0f766e);
}

.login-page .rw-session-hint {
  margin: 0;
  font-size: var(--dv-fs-sm, 0.875rem);
  line-height: 1.7;
  color: var(--dv-text-muted, #4d5b59);
}

.login-page .rw-session-continue {
  width: 100%;
  text-decoration: none;
}

/* دکمهٔ دوم عمداً کم‌رنگ‌تر است: مسیر اصلی «ادامه» است و «حساب دیگر» استثنا */
.login-page .rw-session-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--dv-sp-3, 0.75rem);
  border: 1px solid var(--dv-border, #dbe4e2);
  border-radius: var(--dv-radius-md, 0.625rem);
  background: transparent;
  color: var(--dv-text-muted, #4d5b59);
  font-size: var(--dv-fs-sm, 0.875rem);
  font-weight: var(--dv-fw-medium, 500);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.login-page .rw-session-switch:hover,
.login-page .rw-session-switch:focus-visible {
  border-color: var(--dv-primary, #0f766e);
  color: var(--dv-primary, #0f766e);
  background: var(--dv-surface-muted, #f5f8f7);
}

.login-page .rw-session-switch:focus-visible {
  outline: 2px solid var(--dv-primary, #0f766e);
  outline-offset: 2px;
}

/* ---------- صفحهٔ بی‌اسکرول ---------- */

/*
  ورود، ثبت‌نام و ساخت حساب باید در یک نگاه جا شوند: خودِ سند اسکرول نمی‌خورد،
  کارت به ارتفاع دیدگاه بسته می‌شود و اگر جا کم بیاید تنها ستون فرم درون خودش
  می‌لغزد. یاد dvh است نه vh، چون نوار آدرسِ موبایل ارتفاع را زنده تغییر می‌دهد و
  vh همیشه بلندتر از دیدگاهِ واقعی است؛ ارتفاع ثابتِ پیکسلی هم اینجا جواب نمی‌دهد.
*/
body.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

.login-page .login-container {
  min-height: 0;
  max-height: 100%;
}

/* تنها ناحیهٔ لغزانِ صفحه؛ min-height:0 تا فرزندِ فلکس کوچک‌تر از محتوا هم بشود */
.login-page .login-form {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
  /* در تک‌ستونی هر دو ستون flex:1 بودند و ارتفاع نصف‌نصف می‌شد؛ بلوک برند
     به اندازهٔ محتوای خود می‌ماند و باقیِ ارتفاع سهم فرم است */
  .login-page .login-image {
    flex: 0 0 auto;
  }
}

/* موبایلِ کوتاه یا صفحه‌کلیدِ باز: بلوکِ تزئینیِ برند جای خود را به فرم می‌دهد */
@media (max-width: 768px) and (max-height: 700px) {
  .login-page .login-image {
    display: none;
  }
}

/* ---------- فشرده‌سازی در ارتفاع کم ---------- */

/* لپ‌تاپ کم‌ارتفاع: گام‌های عمودی و بلندی فیلد کم می‌شود تا مرحلهٔ چهارفیلدیِ
   ساخت حساب بی‌لغزش جا شود */
@media (min-width: 769px) and (max-height: 820px) {
  .login-page .login-form {
    padding: var(--dv-sp-6, 1.5rem);
  }

  .login-page .login-form .subtitle {
    margin-bottom: var(--dv-sp-4, 1rem);
  }

  .login-page .form-group {
    margin-bottom: var(--dv-sp-3, 0.75rem);
  }

  .login-page .form-control {
    height: 38px;
  }

  .login-page .rw-progress {
    gap: var(--dv-sp-2, 0.5rem);
    margin-bottom: var(--dv-sp-4, 1rem);
  }

  .login-page .rw-panel-hint {
    margin-bottom: var(--dv-sp-3, 0.75rem);
  }

  .login-page .rw-actions {
    margin-top: var(--dv-sp-4, 1rem);
  }
}

/* بسیار کوتاه (پنجرهٔ نیمه یا موبایلِ افقی): تیتر و فاصله‌ها هم کوچک می‌شوند */
@media (max-height: 620px) {
  /* فهرست مزیت‌ها تزئینی است و در ارتفاع کم فقط جا می‌گیرد */
  .login-page .auth-perks {
    display: none;
  }

  body.login-page {
    padding: var(--dv-sp-3, 0.75rem);
  }

  .login-page .login-form h3 {
    margin-bottom: var(--dv-sp-1, 0.25rem);
    font-size: var(--dv-fs-lg, 1.125rem);
  }

  .login-page .login-form .subtitle {
    margin-bottom: var(--dv-sp-3, 0.75rem);
  }

  .login-page .form-group {
    margin-bottom: var(--dv-sp-2, 0.5rem);
  }

  .login-page .rw-progress {
    margin-bottom: var(--dv-sp-3, 0.75rem);
  }

  .login-page .rw-actions {
    margin-top: var(--dv-sp-3, 0.75rem);
  }
}

/* ---------- دکمهٔ کنش اصلی مرحله ---------- */

/*
  «دریافت کد تأیید» / «تأیید کد» / «ساخت حساب» یک دکمه‌اند (`#nextBtn`) و باید
  هم‌قدِ «مرحلهٔ قبل» بمانند: بلندیِ کمینهٔ مشترک ۴۴ پیکسل (هدف لمسی) و چیدمانِ
  فلکس، وگرنه آیکن و متن در ردیفِ دو دکمه ناهم‌تراز می‌نشستند. عرضِ کاملِ موبایل
  از `flex-direction: column-reverse` همین فایل می‌آید.
*/
.login-page .rw-actions .btn-login,
.login-page .rw-actions .btn-back,
.login-page #rwPanelDone .btn-login {
  display: inline-flex;
  gap: var(--dv-sp-1, 0.25rem);
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
}

/* حالت انتظار: متن دکمه عوض نمی‌شود، پس نشانِ دیداری از aria-busy می‌آید */
.login-page .rw-actions .btn-login[aria-busy='true'],
.login-page .rw-actions .btn-back[aria-busy='true'] {
  cursor: progress;
}

.login-page .rw-actions .btn-back:disabled {
  cursor: progress;
  opacity: 0.7;
}

/*
  `[hidden]` قاعدهٔ مرورگر است و هر `display`ِ نوشته‌شده در همین فایل بر آن غلبه
  می‌کند؛ پس ردیف دکمه‌ها و «مرحلهٔ قبل» صریحاً پنهان می‌شوند. بی این بند، در
  پنل پایانیِ ویزارد و بازیابی رمز، دکمهٔ «مرحلهٔ بعد» کنار دکمهٔ خروجی می‌ماند و
  کلیک‌شدنی ولی بی‌اثر است.
*/
.login-page .rw-actions[hidden],
.login-page .rw-actions .btn-back[hidden] {
  display: none;
}

/* ---------- بند پذیرش شرایط در گام حساب کاربری ---------- */

/* سبک عمومی `.form-check-label` در `core/public.css` با `!important` به رنگ اصلی گره خورده؛
   برای اینکه متن پذیرش در فرم خنثی بخواند نه «رنگ برند»، فقط روی همین شناسه با `!important`
   برمی‌گردیم — شناسه حاصز‌تر از `.form-check-label` است پس همان وزن `!important` را می‌برد */
.login-page .rw-consent {
  margin-top: var(--dv-sp-4, 1rem);
}

.login-page #acceptedTerms {
  width: 1.15em;
  height: 1.15em;
  margin-inline-end: var(--dv-sp-2, 0.5rem);
  margin-inline-start: 0;
  flex: none;
}

.login-page #acceptedTermsLabel {
  font-size: var(--dv-fs-sm, 0.875rem) !important;
  line-height: var(--dv-lh-tight, 1.45);
  color: var(--dv-text-muted, #4d5b59) !important;
}

/* پیوندهای اسناد حقوقی در متن پذیرش؛ برند با زیرخط، چون متن فرم خنثی می‌ماند */
.login-page #acceptedTermsLabel a {
  color: var(--dv-brand, #2a6055) !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.login-page #acceptedTermsLabel a:hover,
.login-page #acceptedTermsLabel a:focus-visible {
  color: var(--dv-brand-hover, #204c44) !important;
  text-decoration: underline;
}