/* ==========================================================================
   ورود و ثبت‌نام کلینیک — D9.2 / D9.3 / D9.5 / D4.4

   چهار تصمیم که شکل این فایل را توضیح می‌دهند:

   ۱) `:root` محلی حذف شد. این فایل بعد از `core/public.css` بار می‌شود و
      بازتعریف `--primary-color`/`--dental-teal`/`--dark-color` تمام پل توکن را
      بی‌اثر می‌کرد؛ رنگ اینجا فقط از `--dv-*` می‌آید. چرایی نگاشت روی
      پریمیتیوها (و نه نقش‌های `--color-*`) در سرِ `core/tokens-bridge.css` آمده.

   ۲) هر انتخابگر زیر `.login-page` قید شده است. صفحه‌های ورود/ثبت‌نام
      standalone هستند، ولی `layouts/main.ejs` همین فایل را برای `type=login`
      هم می‌آورد؛ بدون قید، `.form-control` و `.alert` به کل پنل سرریز می‌کرد.

   ۳) کارتِ شناور با سایهٔ درشت جای خود را به سطح آرام + مرز مویی داده است:
      ارتفاع بصری از مرز می‌آید نه از سایه، و هیچ گرادیانی نمانده.

   ۴) موقعیت‌ها منطقی‌اند (inset-inline-*) نه فیزیکی؛ صفحه RTL است ولی همین
      قالب در LTR هم بدون آینه‌کردنِ دستی درست می‌ماند.
   ========================================================================== */

body.login-page {
  display: flex;
  min-height: 100vh;
  padding: var(--dv-sp-6, 1.5rem);
  background: var(--dv-page, #f6f8f8);
  color: var(--dv-text, #232e2c);
  font-family: var(--dv-font-sans, Vazirmatn, 'Segoe UI', Tahoma, system-ui, sans-serif);
  line-height: var(--dv-lh-body, 1.8);
}

/* margin:auto جای align-items:center — کارتِ بلندِ ثبت‌نام با مرکزچینیِ فلکس
   از بالا بریده می‌شد و سرِ فرم دست‌نیافتنی بود */
.login-page .login-container {
  margin: auto;
  display: flex;
  width: 100%;
  max-width: 860px;
  overflow: hidden;
  background: var(--dv-surface, #ffffff);
  border: 1px solid var(--dv-border, #e2e8e7);
  border-radius: var(--dv-radius-xl, 12px);
}

.login-page .login-container.register-container {
  max-width: 980px;
}

/* ستون برند: تِینت روشنِ برند، نه بلوکِ اشباع — تنها عنصر پررنگِ صفحه دکمهٔ کنش است */
.login-page .login-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dv-sp-8, 2rem);
  background: var(--dv-brand-subtle, #f2f8f6);
  border-inline-end: 1px solid var(--dv-brand-border, #bbd8d1);
}

.login-page .login-image-content {
  text-align: center;
}

/* فرزند مستقیم: آیکن‌های فهرست مزیت‌ها را نمی‌گیرد، پس دیگر !important لازم نیست */
.login-page .login-image-content > i {
  display: block;
  margin-bottom: var(--dv-sp-4, 1rem);
  font-size: 2.75rem;
  color: var(--dv-brand, #2a6055);
}

/* نشان SVG برند در صفحهٔ ورود: هم‌اندازه و هم‌رنگِ آیکون قبلی تا چیدمان نشکند */
.login-page .login-image-content > .brand-logo {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto var(--dv-sp-4, 1rem);
  color: var(--dv-brand, #2a6055);
}

.login-page .login-image-content h2 {
  margin-bottom: var(--dv-sp-2, 0.5rem);
  font-size: var(--dv-fs-xl, 1.25rem);
  font-weight: var(--dv-fw-bold, 700);
  line-height: var(--dv-lh-heading, 1.5);
  color: var(--dv-brand-active, #1a3d37);
}

.login-page .login-image-content p {
  margin-bottom: 0;
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-text-muted, #4d5b59);
}

.login-page .auth-perks {
  list-style: none;
  margin: var(--dv-sp-6, 1.5rem) 0 0;
  padding: 0;
  text-align: start;
}

.login-page .auth-perks li {
  display: flex;
  align-items: center;
  gap: var(--dv-sp-2, 0.5rem);
  margin-bottom: var(--dv-sp-2, 0.5rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-text, #232e2c);
}

.login-page .auth-perks i {
  width: 1.2rem;
  font-size: var(--dv-fs-xs, 0.8125rem);
  color: var(--dv-brand, #2a6055);
}

/* ---------- ستون فرم ---------- */

.login-page .login-form {
  flex: 1;
  padding: var(--dv-sp-8, 2rem);
}

.login-page .login-form h3 {
  margin-bottom: var(--dv-sp-2, 0.5rem);
  font-size: var(--dv-fs-xl, 1.25rem);
  font-weight: var(--dv-fw-bold, 700);
  line-height: var(--dv-lh-heading, 1.5);
  color: var(--dv-text-strong, #121b1a);
}

.login-page .login-form .subtitle {
  margin-bottom: var(--dv-sp-6, 1.5rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-text-muted, #4d5b59);
}

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

.login-page .form-group label {
  display: block;
  margin-bottom: var(--dv-sp-1, 0.25rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  font-weight: var(--dv-fw-medium, 500);
  color: var(--dv-text, #232e2c);
}

.login-page .form-control {
  width: 100%;
  height: 42px;
  padding: var(--dv-sp-2, 0.5rem) var(--dv-sp-3, 0.75rem);
  font-size: var(--dv-fs-md, 0.9375rem);
  color: var(--dv-text, #232e2c);
  background: var(--dv-surface, #ffffff);
  border: 1px solid var(--dv-border-strong, #c9d2d1);
  border-radius: var(--dv-radius-md, 8px);
  transition: border-color var(--dv-dur-fast, 120ms) var(--dv-ease-out, ease-out),
    box-shadow var(--dv-dur-fast, 120ms) var(--dv-ease-out, ease-out);
}

.login-page .form-control::placeholder {
  color: var(--dv-icon-subtle, #6b7a78);
}

/* outline شفاف عمدی است: در حالت پرکنتراستِ ویندوز box-shadow حذف می‌شود و
   بی‌آن، فوکوس هیچ نشانه‌ای نمی‌داشت */
.login-page .form-control:focus {
  border-color: var(--dv-focus, #3b7a6c);
  box-shadow: var(--dv-focus-ring, 0 0 0 3px #bbd8d1);
  outline: 2px solid transparent;
  outline-offset: var(--dv-focus-ring-offset, 2px);
}

.login-page .form-control:disabled {
  background: var(--dv-surface-sunken, #eef2f1);
  color: var(--dv-text-muted, #4d5b59);
}

/* D9.5 — مرزِ ضخیم‌تر کنارِ رنگ می‌آید تا خطا در نمایشِ تک‌رنگ هم دیده شود */
.login-page .form-control[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--dv-danger, #a72f2f);
}

.login-page .form-control[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--dv-danger-border, #f3c9c9);
}

/* ---------- آیکن درون فیلد ---------- */

.login-page .input-icon {
  position: relative;
}

.login-page .input-icon > i {
  position: absolute;
  inset-inline-end: var(--dv-sp-3, 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-icon-subtle, #6b7a78);
  pointer-events: none;
}

.login-page .input-icon .form-control {
  padding-inline-end: 40px;
}

/* فیلدِ رمز دو نشانه دارد؛ بی این، متن زیرِ دکمهٔ چشم می‌رفت */
.login-page .input-icon.has-toggle .form-control {
  padding-inline-end: 68px;
}

.login-page .password-toggle {
  position: absolute;
  inset-inline-end: 38px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  background: none;
  border: 0;
  line-height: 1;
  color: var(--dv-icon-subtle, #6b7a78);
  cursor: pointer;
}

.login-page .password-toggle:hover {
  color: var(--dv-brand, #2a6055);
}

.login-page .password-toggle:focus-visible {
  border-radius: var(--dv-radius-sm, 6px);
  box-shadow: var(--dv-focus-ring, 0 0 0 3px #bbd8d1);
  outline: 2px solid transparent;
}

/* select با appearance:auto فلشِ بومی‌اش را سمتِ inline-end می‌گذارد و روی آیکن
   می‌افتاد؛ برای این فیلدها آیکن به inline-start می‌رود */
.login-page .input-icon.input-icon-select > i {
  inset-inline-start: var(--dv-sp-3, 0.75rem);
  inset-inline-end: auto;
}

.login-page .login-form select.form-control {
  appearance: auto;
  height: 42px;
  padding-inline-start: 38px;
  padding-inline-end: var(--dv-sp-6, 1.5rem);
}

/* ---------- D9.5: پیام خطای فیلد ---------- */

/* آیکن + متن با هم؛ رنگ هیچ‌وقت تنها حاملِ معنا نیست */
.login-page .field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--dv-sp-1, 0.25rem);
  margin: var(--dv-sp-1, 0.25rem) 0 0;
  font-size: var(--dv-fs-xs, 0.8125rem);
  line-height: var(--dv-lh-tight, 1.35);
  color: var(--dv-danger-ink, #862626);
}

.login-page .field-error[hidden] {
  display: none;
}

.login-page .field-error i {
  flex: none;
  margin-top: 0.2em;
}

/* ---------- پیام‌های سراسریِ فرم ---------- */

.login-page .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dv-sp-2, 0.5rem);
  margin-bottom: var(--dv-sp-4, 1rem);
  padding: var(--dv-sp-3, 0.75rem) var(--dv-sp-4, 1rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  border: 1px solid transparent;
  border-radius: var(--dv-radius-md, 8px);
}

.login-page .alert i {
  flex: none;
  margin-top: 0.2em;
}

.login-page .alert-danger {
  color: var(--dv-danger-ink, #862626);
  background: var(--dv-danger-surface, #fdf1f1);
  border-color: var(--dv-danger-border, #f3c9c9);
}

.login-page .alert-success {
  color: var(--dv-success-ink, #17603c);
  background: var(--dv-success-surface, #eef8f2);
  border-color: var(--dv-success-border, #bfe3ce);
}

.login-page .alert-warning {
  color: var(--dv-warn-ink, #3a2b0b);
  background: var(--dv-warn-surface, #fdf6e7);
  border-color: var(--dv-warn-border, #f2ddab);
}

.login-page .alert:focus-visible {
  outline: 2px solid var(--dv-focus, #3b7a6c);
  outline-offset: var(--dv-focus-ring-offset, 2px);
}

/* ---------- کنش اصلی ---------- */

/* تخت و تک‌رنگ: نه گرادیان، نه هالهٔ رنگی، نه بالاپریدن در hover */
.login-page .btn-login {
  display: block;
  width: 100%;
  margin-top: var(--dv-sp-2, 0.5rem);
  padding: var(--dv-sp-3, 0.75rem);
  font-size: var(--dv-fs-md, 0.9375rem);
  font-weight: var(--dv-fw-medium, 500);
  color: var(--dv-text-inverse, #ffffff);
  background: var(--dv-brand, #2a6055);
  border: 1px solid var(--dv-brand, #2a6055);
  border-radius: var(--dv-radius-md, 8px);
  transition: background-color var(--dv-dur-fast, 120ms) var(--dv-ease-out, ease-out);
}

.login-page .btn-login:hover,
.login-page .btn-login:focus {
  color: var(--dv-text-inverse, #ffffff);
  background: var(--dv-brand-hover, #204c44);
  border-color: var(--dv-brand-hover, #204c44);
}

.login-page .btn-login:active {
  background: var(--dv-brand-active, #1a3d37);
  border-color: var(--dv-brand-active, #1a3d37);
}

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

/* در حال ارسال: رنگ روشن‌تر ولی بی‌کاهشِ opacity — متنِ دکمه باید خوانا بماند */
.login-page .btn-login:disabled {
  background: var(--dv-brand-mid, #3b7a6c);
  border-color: var(--dv-brand-mid, #3b7a6c);
  opacity: 1;
  cursor: progress;
}

/* ---------- گام‌ها و پیوندها ---------- */

.login-page .auth-step-label {
  margin: var(--dv-sp-5, 1.25rem) 0 var(--dv-sp-3, 0.75rem);
  padding-bottom: var(--dv-sp-1, 0.25rem);
  font-size: var(--dv-fs-xs, 0.8125rem);
  font-weight: var(--dv-fw-bold, 700);
  letter-spacing: 0.02em;
  color: var(--dv-text-muted, #4d5b59);
  border-bottom: 1px solid var(--dv-border, #e2e8e7);
}

.login-page .auth-links {
  font-size: var(--dv-fs-sm, 0.875rem);
}

.login-page .auth-links a {
  color: var(--dv-brand, #2a6055);
  font-weight: var(--dv-fw-medium, 500);
  text-decoration: none;
}

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

/* ---------- تبلت: چینش تک‌ستونی ---------- */

@media (max-width: 768px) {
  .login-page .login-container {
    flex-direction: column;
  }

  .login-page .login-image {
    padding: var(--dv-sp-6, 1.5rem);
    border-inline-end: 0;
    border-block-end: 1px solid var(--dv-brand-border, #bbd8d1);
  }

  .login-page .login-image-content > i {
    margin-bottom: var(--dv-sp-3, 0.75rem);
    font-size: 2.25rem;
  }

  .login-page .login-image-content > .brand-logo {
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--dv-sp-3, 0.75rem);
  }

  .login-page .login-form {
    padding: var(--dv-sp-6, 1.5rem);
  }

  /* در تک‌ستونی، فهرست مزیت‌ها فرم را زیرِ خط افق می‌راند */
  .login-page .auth-perks {
    display: none;
  }
}

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

@media (max-width: 480px) {
  body.login-page {
    padding: var(--dv-sp-3, 0.75rem);
  }

  .login-page .login-container {
    border-radius: var(--dv-radius-lg, 10px);
  }

  .login-page .login-image {
    padding: var(--dv-sp-5, 1.25rem);
  }

  .login-page .login-form {
    padding: var(--dv-sp-5, 1.25rem) var(--dv-sp-4, 1rem);
  }

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

@media (prefers-reduced-motion: reduce) {
  .login-page .form-control,
  .login-page .btn-login {
    transition: none;
  }
}

/* ---------- P4.1..P4.6 — ویزارد ثبت‌نام پنج‌مرحله‌ای ---------- */
/* همهٔ گزینشگرها زیر `.login-page` می‌مانند چون `layouts/main.ejs` هم همین فایل را
   برای `type=login` می‌آورد و رهاکردنشان استایل صفحات دیگر را جابه‌جا می‌کرد */

.login-page .wizard-steps {
  display: flex;
  gap: var(--dv-sp-1, 0.25rem);
  margin-bottom: var(--dv-sp-5, 1.25rem);
  padding: 0;
  list-style: none;
}

.login-page .wizard-steps li {
  flex: 1;
  padding-top: var(--dv-sp-2, 0.5rem);
  font-size: var(--dv-fs-2xs, 0.75rem);
  text-align: center;
  color: var(--dv-text-muted, #4d5b59);
  /* نوار بالای هر گام؛ ضخامتش ثابت است تا جابه‌جایی چینش با تغییر گام رخ ندهد */
  border-top: 3px solid var(--dv-border, #e2e8e7);
}

.login-page .wizard-steps li[data-state="done"] {
  color: var(--dv-success-ink, #17603c);
  border-top-color: var(--dv-success, #1f7a4d);
}

.login-page .wizard-steps li[data-state="current"] {
  color: var(--dv-brand, #2a6055);
  font-weight: var(--dv-fw-bold, 700);
  border-top-color: var(--dv-brand, #2a6055);
}

/* پنل هر گام؛ پنهان‌سازی با hidden انجام می‌شود تا صفحه‌خوان محتوای غیرفعال را نخواند */
.login-page .wizard-pane[hidden] {
  display: none;
}

/* شمارشِ معکوسِ ارسال مجدد و شمارهٔ نمایش‌داده‌شده — ارقام فارسی، جهتِ متن راست‌به‌چپ */
.login-page .otp-hint {
  margin-bottom: var(--dv-sp-4, 1rem);
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-text-muted, #4d5b59);
}

.login-page .otp-hint strong {
  color: var(--dv-text-strong, #121b1a);
}

/* کادر کد تأیید: ارقام لاتینِ چسبیده وسط‌چین، جهت ltr تا ترتیب رقم‌ها جابه‌جا نشود */
.login-page input.otp-input {
  letter-spacing: 0.4em;
  text-align: center;
  direction: ltr;
  font-size: var(--dv-fs-xl, 1.25rem);
}

.login-page .btn-link-plain {
  padding: 0;
  background: none;
  border: 0;
  color: var(--dv-brand, #2a6055);
  font: inherit;
  font-size: var(--dv-fs-sm, 0.875rem);
  cursor: pointer;
  text-decoration: underline;
}

.login-page .btn-link-plain:disabled {
  color: var(--dv-text-muted, #4d5b59);
  cursor: default;
  text-decoration: none;
}

/* فهرست ماژول‌ها — چک‌باکس‌های بزرگ‌ترِ قابلِ لمس */
.login-page .module-list {
  display: grid;
  gap: var(--dv-sp-2, 0.5rem);
  margin-bottom: var(--dv-sp-4, 1rem);
  max-height: 240px;
  overflow-y: auto;
  padding-inline-end: var(--dv-sp-1, 0.25rem);
}

.login-page .module-item {
  display: flex;
  align-items: flex-start;
  gap: var(--dv-sp-2, 0.5rem);
  padding: var(--dv-sp-3, 0.75rem);
  border: 1px solid var(--dv-border, #e2e8e7);
  border-radius: var(--dv-radius-md, 8px);
  background: var(--dv-surface, #ffffff);
  cursor: pointer;
}

.login-page .module-item:hover {
  border-color: var(--dv-brand-border, #bbd8d1);
  background: var(--dv-brand-subtle, #f2f8f6);
}

.login-page .module-item input {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--dv-brand, #2a6055);
  flex: none;
}

.login-page .module-item .module-name {
  font-size: var(--dv-fs-sm, 0.875rem);
  color: var(--dv-text, #232e2c);
}

/* دکمهٔ «مرحلهٔ قبل» زیر دکمهٔ اصلی می‌نشیند و وزن بصری کمتری دارد */
.login-page .btn-back {
  display: block;
  width: 100%;
  margin-top: var(--dv-sp-2, 0.5rem);
  padding: var(--dv-sp-2, 0.5rem);
  background: none;
  border: 1px solid var(--dv-control-border, #6b7a78);
  border-radius: var(--dv-radius-md, 8px);
  color: var(--dv-text, #232e2c);
  font: inherit;
  font-size: var(--dv-fs-sm, 0.875rem);
  cursor: pointer;
}

.login-page .btn-back:hover {
  background: var(--dv-surface-sunken, #eef2f1);
}

.login-page .btn-back:focus-visible {
  outline: 2px solid var(--dv-focus, #3b7a6c);
  outline-offset: var(--dv-focus-ring-offset, 2px);
}