/* ============================================================
   آراپشتیبان — صفحهٔ احراز هویت (لاگین مشتری و کارشناس)
   همان ساختارِ دوستونهٔ وسط‌چین، مدرن‌شده و سیال (clamp) تا روی
   ۱۰۲۴×۷۶۸ و هر سایزی خودکار جا شود. موبایل: کارتِ گلاسِ تک‌ستونه.
   وابسته به tokens.css.
   ============================================================ */

/* پس‌زمینهٔ تیرهٔ برند */
body.auth-screen {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #0f172a;
  color: #fff;
}
/* صفحه ورود هدر ندارد. تا ۰۸-۲۴ اینجا یک قاعده
   `body.auth-screen .navbar-custom { display: none }` بود، یعنی نوار رندر
   می‌شد و بعد مخفی. حالا login.html بلاک `chrome` را خالی بازنویسی می‌کند و
   نوار اصلاً ساخته نمی‌شود، پس آن قاعده حذف شد. */
/* بدونِ هدر، کلِ ویوپورت مالِ main-content است؛ اگر صفحه کوتاه بود همین ناحیه اسکرول می‌شود */
body.auth-screen .main-content {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ============ بک‌گراندِ پویا (برند، کاملاً CSS — بدونِ تصویر/جاوااسکریپت) ============
   جایگزینِ تصویرِ استاتیکِ قبلی. سه هالهٔ محوِ رنگِ برند (آبیِ primary/primary-2 +
   ایندیگوی توکنِ info برای عمق) با driftِ کند و فقط transform (سبک روی GPU) +
   یک شبکهٔ خطیِ خیلی کم‌رنگ برای حسِ تکنولوژیک. fixed و پشتِ محتوا؛ مستقل از
   اسکرولِ احتمالیِ main-content روی صفحه‌های کوتاه. */
.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-main, .auth-footer { position: relative; z-index: 1; }

.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  mix-blend-mode: screen;
  will-change: transform;
}
.auth-orb-a {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -12%; inset-inline-end: -8%;
  background: radial-gradient(circle, rgba(59, 130, 246, .55), transparent 70%);
  animation: auth-drift-a 26s ease-in-out infinite alternate;
}
.auth-orb-b {
  width: 38vw; height: 38vw; max-width: 520px; max-height: 520px;
  bottom: -14%; inset-inline-start: -6%;
  background: radial-gradient(circle, rgba(37, 99, 235, .5), transparent 70%);
  animation: auth-drift-b 32s ease-in-out infinite alternate;
}
.auth-orb-c {
  width: 30vw; height: 30vw; max-width: 420px; max-height: 420px;
  top: 38%; inset-inline-start: 32%;
  background: radial-gradient(circle, rgba(67, 56, 202, .45), transparent 70%);
  animation: auth-drift-c 22s ease-in-out infinite alternate;
}
@keyframes auth-drift-a { from { transform: translate(0, 0) scale(1); }   to { transform: translate(-6%, 8%) scale(1.12); } }
@keyframes auth-drift-b { from { transform: translate(0, 0) scale(1); }   to { transform: translate(8%, -6%) scale(1.08); } }
@keyframes auth-drift-c { from { transform: translate(0, 0) scale(.95); } to { transform: translate(-5%, -8%) scale(1.05); } }

/* شبکهٔ خطیِ ظریف پشتِ هاله‌ها — پنِ کندِ مورب، محوشونده از مرکز به لبه با mask */
.auth-grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(148, 163, 184, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: auth-grid-pan 60s linear infinite;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}
@keyframes auth-grid-pan { from { transform: translate(0, 0); } to { transform: translate(42px, 42px); } }

/* برچسبِ کوچکِ بالا («سامانه هوشمند پشتیبانی») — هم‌رنگِ خودِ لوگو، بالای تیترِ اصلی.
   #30a8d8 رنگِ غالبِ نمونه‌برداری‌شده از logo.png است (نه توکنِ آبیِ رابط)، تا متن و
   لوگو یک خانواده دیده شوند. کنتراست روی کارتِ #1e293b برابر ۵.۴:۱ (WCAG AA ✓). */
.auth-eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: #30a8d8;
  text-shadow: 0 0 18px rgba(48, 168, 216, .35);
}

@media (prefers-reduced-motion: reduce) {
  .auth-orb, .auth-grid { animation: none; }
}

/* پوستهٔ ستونی: بدنه رشد می‌کند و کارت را وسط نگه می‌دارد، فوتر همیشه پایینِ جریان */
.auth-shell { min-height: 100%; display: flex; flex-direction: column; }
.auth-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vh, 2rem) 1rem;
}
.auth-footer { flex: 0 0 auto; text-align: center; padding: .9rem 1rem 1.2rem; }
.auth-footer .rights { font-weight: 700; font-size: .78rem; color: #cbd5e1; }
.auth-footer .copy { direction: ltr; opacity: .5; font-size: .68rem; margin-top: .2rem; }

/* کارت — ارتفاع سیال با clamp (رفع عدم‌تطبیق روی ۱۰۲۴×۷۶۸) */
.auth-card {
  width: 100%;
  max-width: 1220px;
  min-height: 480px;          /* ثابت و جمع‌وجور → پنلِ اسلایدر لنداسکیپ می‌ماند (برشِ کمینه، بدون فضای خالی) */
  background-color: #1e293b;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: auth-in .45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes auth-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }

/* ستون فرم */
.auth-form-col { padding: clamp(1.5rem, 4vh, 2.6rem) clamp(1.4rem, 2.5vw, 2.4rem); }

/* دسکتاپ/تبلت: عرضِ فرم ثابت (مثلِ حالتِ قبل) و اسلایدر بقیهٔ عرض را می‌گیرد
   → اسلایدر پهن می‌ماند بدون اینکه ستونِ فرم بی‌جهت پهن شود. */
@media (min-width: 769px) {
  .auth-form-col { flex: 0 0 350px; width: 350px; max-width: 350px; }
  .auth-slider   { flex: 1 1 auto; width: auto; max-width: none; }
}

.auth-brand-logo {
  width: clamp(84px, 12vh, 108px); height: clamp(84px, 12vh, 108px);
  background: transparent;                 /* بدونِ بک‌گراند سفید (خواستهٔ کاربر) */
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
/* هالهٔ نرمِ آبی پشتِ لوگوی شفاف تا روی زمینهٔ تیره بدرخشد (مینیمال، بدون کادر) */
.auth-brand-logo::after {
  content: ''; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.40), transparent 68%);
  filter: blur(10px);
}
.auth-brand-logo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(59,130,246,.45));
}
.auth-title {
  font-size: clamp(1.3rem, 2.9vh, 1.65rem);
  font-weight: 900;
  letter-spacing: .3px;
  background: linear-gradient(180deg, #ffffff 0%, #cfe0ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 2px 14px rgba(59,130,246,.25);
}

/* ورودی‌های مدرنِ یک‌پارچه (بازطراحیِ ظاهرِ input-group بوت‌استرپ، بدون تغییر ساختار) */
.auth-screen .input-group {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.auth-screen .input-group:focus-within {
  border-color: var(--primary-2);
  background: rgba(59,130,246,.06);
  box-shadow: 0 0 0 4px var(--primary-ring);
}
.auth-screen .input-group-text {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-faint) !important;
}
.auth-screen .input-group .form-control {
  background: transparent !important;
  border: 0 !important;
  color: #e8eef7 !important;
  box-shadow: none !important;
  padding: .72rem .4rem;
}
.auth-screen .input-group .btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-faint) !important;
}
.auth-screen .input-group .btn:hover { color: var(--text-muted) !important; }
.auth-screen input::placeholder { color: var(--text-faint) !important; }

/* دکمهٔ ورود — گرادیانِ صیقلی */
.auth-submit {
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border: none; color: #fff;
  box-shadow: 0 8px 22px rgba(37,99,235,.35);
  transition: filter var(--t), transform var(--t-fast), box-shadow var(--t);
}
.auth-submit:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,99,235,.45); }
.auth-submit:active { transform: translateY(0); }

/* باکسِ بیرونیِ کد امنیتی — دقیقاً هم‌رنگِ فیلدهای کد شرکت/رمز عبور (input-group) */
.auth-cap-box {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
}
/* تصویر کپچا داخلِ باکس (پس‌زمینهٔ تیره‌اش از settings می‌آید) */
.auth-screen .captcha {
  border-radius: var(--r-sm); cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 8px; width: 100%; height: 54px; object-fit: contain; object-position: center;
  transition: border-color var(--t);
}
.auth-screen .captcha:hover { border-color: var(--primary-2); }
/* ورودیِ «کد داخل تصویر» هم هم‌رنگِ بقیه */
.auth-cap-box #id_captcha_1 {
  direction: ltr; text-align: center; letter-spacing: 5px; font-weight: bold; font-size: 1.2rem;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #e8eef7 !important;
}

/* اسلایدر تبلیغاتی — کلِ بنر همیشه دیده می‌شود (بدون بریدنِ متن).
   عکس‌ها لنداسکیپ‌اند (۲۴۴۰×۱۸۸۰) و پنل تقریباً هم‌نسبت است، پس فاصلهٔ خالی
   ناچیز است و با پس‌زمینهٔ تیره (هم‌رنگِ بنرهای تیره) نامرئی می‌شود. */
.auth-slider { background: #0b1220; }
.slider-image {
  width: 100%; height: 100%;
  object-fit: cover;          /* پرکردنِ کاملِ پنل، بدونِ فضای خالیِ بالا/پایین */
  object-position: center;
  position: absolute; top: 0; left: 0;
}

/* ============ موبایل/تبلت (همان الگوی گلاسِ خودت، دقیق‌شده) ============ */
@media (max-width: 768px) {
  /* رفعِ قفلِ اسکرول: html در base با overflow:hidden قفل بود؛ اینجا با !important
     باز می‌شود تا کلِ صفحه به‌طور طبیعی اسکرول شود (auth.css فقط روی لاگین لود می‌شود). */
  html { height: auto !important; overflow: visible !important; }
  body.auth-screen { height: auto !important; overflow: visible !important; display: block !important; }
  body.auth-screen .main-content { height: auto !important; min-height: 0 !important; overflow: visible !important; }

  .auth-shell { min-height: 0; }
  .auth-main { padding: 1.1rem .85rem; display: block; }

  /* باکسِ ورود داینامیک نسبت به صفحهٔ موبایل: تمام‌عرضِ امن + وسط، فشرده‌تر */
  .auth-card {
    min-height: auto;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    border-radius: 20px;
    background-color: rgba(30,41,59,.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
  }
  .auth-form-col { padding: 1.6rem 1.3rem !important; }
  /* فشرده‌سازیِ عمودی تا روی گوشیِ کوچک هم جمع‌وجور باشد */
  .auth-brand-logo { width: 74px !important; height: 74px !important; }
  .auth-form-col .mb-4 { margin-bottom: .9rem !important; }
  .auth-form-col .mb-3 { margin-bottom: .8rem !important; }
}
/* گوشیِ خیلی کوتاه: فاصله‌ها بازهم کمتر */
@media (max-width: 768px) and (max-height: 720px) {
  .auth-main { padding: .7rem .7rem 1.2rem; }
  .auth-brand-logo { width: 64px !important; height: 64px !important; }
  .auth-form-col .text-center.mb-4 { margin-bottom: .8rem !important; }
}

/* --- کمکی: جایگزینِ style="..."های ثابتِ فرمِ ورود (CSP: بدونِ inline attribute) --- */
.auth-ltr { text-align: right; direction: ltr; }
.auth-hint-xs { font-size: 0.65rem; }