/* Shared Chatz Connect brand accents + motion for the standalone auth pages
   (Login, 2FA, Forgot/Reset Password, Setup). Each page still keeps its own
   self-contained :root token block for layout-specific colors, matching the
   existing per-page CSS convention - this file only centralises the brand
   hues (sampled from wwwroot/uploads/branding/logo_global.png) and the
   handful of components/animations shared across all of them, so a future
   palette tweak only has to happen in one place. */

:root {
    --auth-blue:            #0071BC;
    --auth-blue-rgb:        0, 113, 188;
    --auth-blue-glow:       #3FA9F5;
    --auth-blue-glow-rgb:   63, 169, 245;
    --auth-red:             #ED1C24;
    --auth-red-rgb:         237, 28, 36;
    --auth-red-glow:        #FF5A61;
    --auth-red-glow-rgb:    255, 90, 97;
}

/* -- Brand logo (fades/scales in once, then breathes with a soft blue glow) -- */
.auth-brand-logo {
    display: block;
    margin: 0 auto 16px;
    max-width: 190px;
    width: 58%;
    height: auto;
    animation: authLogoIn .7s cubic-bezier(.2,.8,.2,1) both,
               authLogoGlow 3.2s ease-in-out .7s infinite;
}
@keyframes authLogoIn {
    from { opacity: 0; transform: translateY(-10px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes authLogoGlow {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(var(--auth-blue-glow-rgb), .35)); }
    50%      { filter: drop-shadow(0 0 24px rgba(var(--auth-blue-glow-rgb), .55)); }
}

/* -- "Live/secure connection" status pill - a small pulsing red dot borrowed
      from the logo's own accent, standing in for a genuine loading cue and a
      literal nod to the "Connect" half of the brand name. -- */
.auth-status-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px 5px 10px;
    margin: 0 auto 4px;
    border-radius: 999px;
    background: rgba(var(--auth-blue-rgb), .14);
    border: 1px solid rgba(var(--auth-blue-rgb), .3);
    font-size: 12px; font-weight: 600; letter-spacing: .02em;
    color: rgba(255,255,255,.8);
}
.auth-status-pill .dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--auth-red);
    animation: authPulseDot 2s ease-out infinite;
}
@keyframes authPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(var(--auth-red-rgb), .55); }
    70%  { box-shadow: 0 0 0 8px rgba(var(--auth-red-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--auth-red-rgb), 0); }
}

/* -- Loading state for the button/link that submits an auth form - swapped in
      by wwwroot/js/auth-loading.js the instant the form is submitted, so
      there's visible feedback for the whole round trip instead of a dead
      click. -- */
.auth-submit.is-loading {
    pointer-events: none;
    opacity: .85;
    cursor: progress;
    animation: authSubmitPulse 1.4s ease-in-out infinite;
}
.auth-submit .btn-spinner {
    display: inline-block;
    width: 15px; height: 15px;
    margin-right: 8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    vertical-align: -3px;
    animation: authSpin .7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }
@keyframes authSubmitPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--auth-blue-rgb), .38); }
    50%      { box-shadow: 0 0 0 7px rgba(var(--auth-red-rgb), 0); }
}

/* -- Staggered entrance for a form's fields - wwwroot/js/auth-loading.js adds
      .auth-field-in to each direct child of a data-auth-loading form (skipping
      hidden inputs) with an incrementing animation-delay, so the card feels
      like it's assembling itself rather than appearing all at once. Purely
      additive: a field never depends on this class to be visible, so a JS
      failure just skips the entrance animation instead of hiding anything. -- */
.auth-field-in {
    animation: authFieldIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes authFieldIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -- Ambient breathing backdrop - a soft blue/red glow drifting behind every
      auth page's own background, tying the two-colour brand scheme into the
      page itself rather than just the card/button. Fixed + negative z-index so
      it sits behind all page content regardless of each page's own stacking
      order, and escapes any body { overflow: hidden } clipping. -- */
body {
    position: relative;
}
body::before {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(700px 500px at 20% 25%, rgba(var(--auth-blue-glow-rgb), .18), transparent 60%),
        radial-gradient(700px 500px at 80% 75%, rgba(var(--auth-red-glow-rgb), .15), transparent 60%);
    animation: authBgBreathe 18s ease-in-out infinite alternate;
}
@keyframes authBgBreathe {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(3%, -3%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-field-in { animation: none; }
    .auth-submit.is-loading { animation: none; }
    body::before { animation: none; }
}

/* -- Small floating "signing you in" status window - shown over a
      data-auth-progress form the instant it's submitted. There's no real
      server-side progress to report over a plain form POST, so the three
      steps are a timed, simulated sequence rather than genuine telemetry -
      it exists purely so the wait doesn't feel dead. Whether the login
      actually succeeds or fails, the current page is about to be replaced
      by a full navigation either way (the dashboard, or a fresh copy of this
      same page with an error), so there's no risk of this getting stuck
      mid-sequence - the timers simply stop existing when the page unloads.
      Requires the host element (.login-card etc.) to be position:relative,
      which every auth card already is. -- */
.auth-progress-overlay {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 16, 22, .74);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.auth-progress-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}
.auth-progress-window {
    width: min(260px, 84%);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 20px 50px rgba(0,0,0,.4);
    display: flex; flex-direction: column; gap: 15px;
    animation: authProgressIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes authProgressIn {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-progress-step {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,.42);
    transition: color .3s ease;
}
.auth-progress-step .step-indicator {
    position: relative;
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    transition: border-color .3s ease, background .3s ease;
}
.auth-progress-step .step-check {
    font-size: 11px; color: #fff; opacity: 0;
    transition: opacity .2s ease;
}
.auth-progress-step .step-spin {
    position: absolute; inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--auth-blue-glow);
    opacity: 0;
}
.auth-progress-step.is-active { color: #fff; }
.auth-progress-step.is-active .step-spin {
    opacity: 1;
    animation: authSpin .7s linear infinite;
}
.auth-progress-step.is-done { color: rgba(255,255,255,.8); }
.auth-progress-step.is-done .step-indicator {
    background: linear-gradient(135deg, var(--auth-blue), var(--auth-red));
    border-color: transparent;
}
.auth-progress-step.is-done .step-check { opacity: 1; }
.auth-progress-step.is-done .step-spin { opacity: 0; animation: none; }

@media (prefers-reduced-motion: reduce) {
    .auth-progress-window { animation: none; }
    .auth-progress-step .step-spin { animation: none; }
}