/* -----------------------------------------------------------------------
   DocuDomain — split-screen auth pages (login / signup / forgot password)
   -----------------------------------------------------------------------
   Layout:
     - Desktop (lg+): 50/50 split. Brand panel on the left holds the animated
       network illustration + wordmark + tagline. Form panel on the right
       holds the actual auth form, vertically centered.
     - Mobile (<lg): single-column. Brand panel collapses to a thin top
       strip with the wordmark only; form fills the rest of the viewport.

   Drop the global navbar/footer on auth pages — the split shell IS the
   chrome. We add a small "Back to home" link top-right of the form panel
   so users aren't stranded.
   ----------------------------------------------------------------------- */

.auth-split {
  /* No navbar/footer/promo banner on auth pages — fill the viewport. */
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: #0f172a; /* slate-900 fallback if the form-panel bg fails */
  overflow: hidden;
}

@media (min-width: 992px) {
  .auth-split {
    grid-template-columns: 1fr 1fr;
  }
}

/* -----------------------------------------------------------------------
   Brand panel — left side at desktop, hidden at mobile (replaced by
   the slim top header that lives in .auth-mobile-header below).
   ----------------------------------------------------------------------- */

.auth-brand-panel {
  display: none;
  position: relative;
  overflow: hidden;
  color: #e2e8f0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.22), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(37, 99, 235, 0.18), transparent 55%),
    linear-gradient(155deg, #0b1322 0%, #0f1d3a 45%, #0a1830 100%);
  /* DocuDomain blue (#2563eb) over deep navy keeps the brand identity
     without copying Cloud Voice's pitch-black look. */
}

@media (min-width: 992px) {
  .auth-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
  }
}

.auth-brand-wordmark {
  position: relative;
  z-index: 2;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.auth-brand-wordmark:hover {
  color: #ffffff;
  text-decoration: none;
}

.auth-brand-wordmark-mark {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.auth-brand-tagline {
  position: relative;
  z-index: 2;
  max-width: 28rem;
}

.auth-brand-tagline h2 {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 0.5rem;
  line-height: 1.15;
}

.auth-brand-tagline p {
  font-size: 1rem;
  color: rgba(226, 232, 240, 0.78);
  margin-bottom: 0;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------
   Network illustration — full-bleed inside the brand panel, sits behind
   the wordmark/tagline. The SVG is responsive; we cap its size so it
   doesn't look like a wall of dots on ultra-wide monitors.
   ----------------------------------------------------------------------- */

.auth-brand-illustration {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.auth-brand-illustration svg {
  width: min(95%, 600px);
  height: auto;
  opacity: 0.95;
}

/* Orbital path lines: subtle blue, semi-transparent. Each <path> in the
   markup carries pathLength="1" so its dash space is normalized to one
   unit. That lets us use stroke-dasharray:1 + stroke-dashoffset 1→0→-1
   and get the SAME visible "tracing" animation regardless of the path's
   actual geometric length. (The previous fixed dasharray of 1200 would
   silently fall off-screen on paths shorter than that, leaving them
   appearing static.) */
.auth-net-path {
  fill: none;
  stroke: rgba(96, 165, 250, 0.40);
  stroke-width: 1.25;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: auth-net-trace 18s ease-in-out infinite;
}

.auth-net-path-2 { animation-delay: -3s; stroke: rgba(147, 197, 253, 0.32); }
.auth-net-path-3 { animation-delay: -6s; stroke: rgba(59, 130, 246, 0.36); }
.auth-net-path-4 { animation-delay: -9s; stroke: rgba(96, 165, 250, 0.28); }
.auth-net-path-5 { animation-delay: -12s; stroke: rgba(125, 211, 252, 0.34); }

@keyframes auth-net-trace {
  0%   { stroke-dashoffset: 1;  opacity: 0; }
  20%  {                        opacity: 1; }
  60%  { stroke-dashoffset: 0;  opacity: 1; }
  80%  {                        opacity: 0.6; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

/* Dots breathe via a strong opacity pulse, plus the SVG `r` geometry
   property for browsers that honor SVG 2's CSS-animatable geometry
   attributes (Chrome 51+, Firefox 52+, Safari 14.5+). On older browsers
   the `r` change is inert but the dramatic opacity range (0.25 → 1)
   carries the breathing effect on its own.
   We deliberately avoid CSS `transform: scale()` on <circle> elements:
   that path requires transform-box:fill-box + transform-origin:center,
   which silently breaks on older Safari and leaves the dots jumping to
   (0,0) instead of scaling in place. */
.auth-net-dot {
  fill: #60a5fa;
  animation: auth-net-breathe-sm 4s ease-in-out infinite;
}

.auth-net-dot-glow {
  fill: #93c5fd;
  filter: drop-shadow(0 0 4px rgba(147, 197, 253, 0.85));
  animation: auth-net-breathe-lg 4s ease-in-out infinite;
}

@keyframes auth-net-breathe-sm {
  0%, 100% { opacity: 0.25; r: 2.5; }
  50%      { opacity: 1;    r: 4.5; }
}

@keyframes auth-net-breathe-lg {
  0%, 100% { opacity: 0.35; r: 3.5; }
  50%      { opacity: 1;    r: 6;   }
}

/* Stagger dot animations so the dots don't all pulse in unison. We use
   :nth-child of the SVG <g> parent (NOT :nth-of-type, which counts by
   element type — every dot is a <circle>, so :nth-of-type collapses
   both .auth-net-dot and .auth-net-dot-glow into a single position
   sequence and the stagger scrambles unpredictably across the two
   classes). The five 5n+k selectors are mutually exclusive, so every
   circle gets exactly one delay — no late-rule overrides. */
.auth-brand-illustration g > :nth-child(5n+1) { animation-delay:  0s;   }
.auth-brand-illustration g > :nth-child(5n+2) { animation-delay: -0.8s; }
.auth-brand-illustration g > :nth-child(5n+3) { animation-delay: -1.6s; }
.auth-brand-illustration g > :nth-child(5n+4) { animation-delay: -2.4s; }
.auth-brand-illustration g > :nth-child(5n+5) { animation-delay: -3.2s; }

/* -----------------------------------------------------------------------
   Form panel — right side. White background, vertically centered form
   capped at a comfortable max-width.
   ----------------------------------------------------------------------- */

.auth-form-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: #ffffff;
  overflow-y: auto;
  /* Account for mobile browser UI chrome (Safari address bar). */
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 992px) {
  .auth-form-panel {
    padding: 3rem;
  }
}

.auth-form-inner {
  width: 100%;
  max-width: 26rem;
  /* Subtle fade-in + lift on first render so the page feels alive. */
  animation: auth-form-rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes auth-form-rise {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0);    }
}

.auth-form-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.auth-form-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #1e293b;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-form-brand-mark:hover { color: #1e293b; text-decoration: none; }

.auth-form-brand-mark-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.95rem;
}

.auth-form-back {
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: none;
}

.auth-form-back:hover { color: #2563eb; }

.auth-form-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin-bottom: 0.35rem;
}

.auth-form-subtitle {
  font-size: 0.95rem;
  color: #64748b;
  margin-bottom: 2rem;
}

/* Slightly larger inputs for a more inviting feel + smooth focus ring. */
.auth-form-panel .form-control {
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.auth-form-panel .form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.auth-form-panel .form-label {
  font-weight: 500;
  font-size: 0.9rem;
  color: #334155;
}

.auth-form-panel .btn-primary {
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
}

.auth-form-panel .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.32);
}

.auth-form-panel .btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.auth-form-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #64748b;
}

.auth-form-footer a {
  color: #2563eb;
  font-weight: 500;
  text-decoration: none;
}

.auth-form-footer a:hover { text-decoration: underline; }

/* The "Forgot password?" link sits inline-end under the password field. */
.auth-form-forgot {
  font-size: 0.85rem;
  color: #64748b;
  text-decoration: none;
}

.auth-form-forgot:hover { color: #2563eb; }

/* Footer mini-links (Terms / Privacy / Support) at the very bottom of the
   form panel — replaces the missing site footer so legal links stay
   reachable. */
.auth-form-legal {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
  font-size: 0.75rem;
  color: #94a3b8;
}

.auth-form-legal a {
  color: #94a3b8;
  text-decoration: none;
}

.auth-form-legal a:hover { color: #2563eb; }

/* -----------------------------------------------------------------------
   Mobile header — at <lg we hide the brand panel entirely and replace it
   with a small inline header above the form. Keeps the auth surfaces
   useable on phones without scrolling past a big illustration.
   ----------------------------------------------------------------------- */

.auth-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto 2rem;
  padding-top: 0.5rem;
}

@media (min-width: 992px) {
  .auth-mobile-header { display: none; }
}

/* -----------------------------------------------------------------------
   Reduced-motion: kill the breathing/tracing animations for users who
   asked for less motion in their OS settings. Form fade-in is fine —
   it's a one-shot, not a perpetual loop.
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .auth-net-path,
  .auth-net-dot,
  .auth-net-dot-glow {
    animation: none !important;
  }
  .auth-net-path {
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
  .auth-net-dot,
  .auth-net-dot-glow {
    opacity: 0.9;
  }
  .auth-form-inner {
    animation: none !important;
  }
  /* Kill the Bootstrap spinner rotation too. Bootstrap 5.3 only swaps
     the speed variable under reduced-motion, it doesn't actually stop
     the rotation — we have to do that ourselves. Target the actual
     .spinner-border element inside the loading button (the original
     .btn-loading::after rule targeted a non-existent pseudo-element). */
  .btn-loading .spinner-border,
  .auth-btn-spinner.spinner-border {
    animation: none !important;
  }
}

/* -----------------------------------------------------------------------
   Loading button — applied by /public/js/auth.js after a form submit.
   The spinner uses Bootstrap's .spinner-border which is already loaded
   on every auth page; we just gate visibility on the class so the
   spinner is hidden in the static rendered HTML and only appears once
   JS adds .btn-loading on submit.
   ----------------------------------------------------------------------- */

.btn-loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn-loading .auth-btn-spinner {
  display: inline-block;
}

.auth-btn-spinner {
  display: none;
}