/* =============================================================
 *  login.css — Standalone login page overrides.
 *
 *  Self-contained, no remote CDN. Layered on top of
 *  /static/css/vendor.css (Bootstrap 5.3 RTL + Vazirmatn).
 *
 *  Phase 11: refactored to lean entirely on Bootstrap 5.3
 *  design tokens (CSS custom properties exposed by
 *  `data-bs-theme="light"` and `data-bs-theme="dark"`).
 *  No more hardcoded slate hexes on the card or inputs,
 *  so light mode now renders a crisp white surface and
 *  dark mode inherits Bootstrap's deep neutral palette
 *  automatically.
 * ============================================================= */

body.login-page {
  min-height: 100vh;
  color: var(--bs-body-color);
}

/* ---- Page background (light mode) --------------------------
   Soft slate wash with an ultra-subtle primary radial glow
   in the top-left corner.  Mirrors the composition of the
   original dark gradient, but on a clean neutral surface. */
[data-bs-theme="light"] body.login-page {
  background:
    radial-gradient(at 18% 22%, rgba(99, 102, 241, 0.10) 0px, transparent 50%),
    radial-gradient(at 82% 78%, rgba(139, 92, 246, 0.08) 0px, transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* ---- Page background (dark mode) ---------------------------
   Deep neutral with a faint indigo/violet glow so the
   card pops without flattening contrast. */
[data-bs-theme="dark"] body.login-page {
  background:
    radial-gradient(at 18% 22%, rgba(139, 92, 246, 0.22) 0px, transparent 50%),
    radial-gradient(at 82% 78%, rgba(99, 102, 241, 0.18) 0px, transparent 50%),
    var(--bs-body-bg);
}

/* ---- Card surface ------------------------------------------
   Inherits Bootstrap's --bs-card-bg / --bs-border-color in
   both themes; the only constant is the modern, airy shadow
   and a soft translucent border for elevation. */
body.login-page .login-card {
  max-width: 26rem;
  width: 100%;
  background-color: var(--bs-card-bg, #ffffff);
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Dark-mode card needs a deeper shadow so the elevation
   still reads against a dark surface. */
[data-bs-theme="dark"] body.login-page .login-card {
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.45),
    0 8px 10px -6px rgba(0, 0, 0, 0.35);
}

/* ---- Brand icon --------------------------------------------
   Vibrant indigo/violet gradient — kept identical to the
   previous design so brand recognition is preserved. */
body.login-page .login-brand-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
}

/* ---- Form controls -----------------------------------------
   No more hardcoded slate.  We let Bootstrap drive the
   resting background / border / text via --bs-form-control-*
   tokens and only customize the focus ring to use the
   primary tint instead of the default blue glow. */
body.login-page .form-control {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

body.login-page .form-control:focus {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.20);
  color: var(--bs-body-color);
}

body.login-page .form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

body.login-page .form-floating > label {
  color: var(--bs-secondary-color);
}

body.login-page .form-floating > .form-control:focus ~ label,
body.login-page .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--bs-primary);
}

/* ---- Primary submit button ---------------------------------
   Modern indigo/violet gradient; identical to the prior
   version so the CTA still feels consistent. */
body.login-page .btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  color: #ffffff;
}

body.login-page .btn-primary:hover,
body.login-page .btn-primary:focus {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
}

body.login-page .btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.35);
}