/**
 * BASECAMP AUTH SHELL — Vanta Background + Standalone Cards
 * =============================================================
 * 
 * Used by: Login, Install Wizard, MFA, Forgot/Reset Password
 * Features:
 * - Fullscreen WebGL Vanta.js background (fixed, no scroll jitter)
 * - Standalone card liquid glass effect
 * - Bottom branding (nuwai Logo + Basecamp Version)
 * - Reduced motion fallback
 * 
 * @requires tokens.css (for base tokens)
 */

/* ============================================================================
   BACKGROUND LAYER (Vanta WebGL Canvas)
   ============================================================================ */

#auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0c2a3d; /* Saturated cyan fallback while Vanta loads */
}

/* Solid Blue Overlay — 62% Deckkraft */
.auth-sky-tint {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgb(0 41 82 / 62%);
}

/* ============================================================================
   VIGNETTE + DEPTH LAYER
   ============================================================================ */

.auth-vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Soft light spots for depth */
    radial-gradient(1200px 800px at 60% 35%, rgba(255, 255, 255, 0.04), transparent 60%),
    radial-gradient(900px 700px at 30% 65%, rgba(255, 255, 255, 0.03), transparent 55%);
}

/* ============================================================================
   CENTER SHELL (for install wizard)
   ============================================================================ */

.auth-shell {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
}

/* ============================================================================
   BOTTOM BRANDING (nuwai Logo left, Basecamp Version right)
   ============================================================================ */

/* nuwai Logo — Bottom Left */
.auth-branding {
  position: fixed;
  bottom: var(--space-6, 1.5rem);
  left: var(--space-6, 1.5rem);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.auth-branding:hover {
  opacity: 0.75;
}

.auth-branding-logo {
  height: 20px;
  width: auto;
}

/* Basecamp Version — Bottom Right */
.auth-version {
  position: fixed;
  bottom: var(--space-6, 1.5rem);
  right: var(--space-6, 1.5rem);
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 200ms ease;
}

.auth-version:hover {
  opacity: 0.75;
}

.auth-version-name {
  font-family: 'Manrope', var(--font-sans, sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-version-number {
  font-family: 'Manrope', var(--font-sans, sans-serif);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

/* ============================================================================
   STANDALONE PAGE OVERRIDES (for Login, MFA, Forgot/Reset Password)
   ============================================================================ */

body.auth-body {
  background: transparent;
  min-height: 100vh;
}

body.auth-body .standalone-page {
  background: transparent;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
  position: relative;
  z-index: 3;
}

body.auth-body .standalone-card {
  position: relative;
  padding: 20px 40px 24px;
  min-width: 420px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-radius: var(--radius-2xl, 1.25rem);
}

body.auth-body .standalone-card--narrow {
  padding: 20px 36px 24px;
  min-width: 380px;
}

/* Brand zentriert unter dem Language Switch */
body.auth-body .standalone-brand {
  margin-top: 72px;
  margin-bottom: 72px;
  text-align: center;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
}

body.auth-body .standalone-brand-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Logo Icon entfernt - nur Firmenname bleibt */
body.auth-body .standalone-logo {
  display: none;
}

body.auth-body .standalone-title,
body.auth-body .standalone-subtitle {
  color: rgba(255, 255, 255, 0.9);
}

body.auth-body .standalone-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

/* Language Switch Positioning */
body.auth-body .lang-switch {
  position: absolute;
  top: var(--space-5, 1.25rem);
  right: var(--space-5, 1.25rem);
}

body.auth-body .lang-btn {
  color: rgba(255, 255, 255, 0.4);
}

body.auth-body .lang-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

body.auth-body .lang-btn.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

/* Form Label Override */
body.auth-body .form-label {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

/* Input Override (for legacy .input class usage) */
body.auth-body .input {
  color: #1e3a5f;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

body.auth-body .input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

body.auth-body .input:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

body.auth-body .input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Error Alert Override */
body.auth-body .alert-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Button Overrides */
body.auth-body .btn-primary {
  box-shadow: 
    0 4px 12px rgba(79, 70, 229, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.auth-body .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 
    0 6px 20px rgba(79, 70, 229, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Button NICHT 100% Breite — wie im System */
body.auth-body .btn-block,
body.auth-body .btn-primary.btn-block,
body.auth-body form .btn-block {
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

/* Mehr Abstand zwischen Passwort-Feld und Button */
body.auth-body .standalone-card .form-group + .form-group {
  margin-bottom: 56px !important;
}

body.auth-body form .form-group:last-of-type {
  margin-bottom: 56px !important;
}

/* Auth Header (Title + Subtitle) */
body.auth-body .auth-header {
  text-align: center;
  margin-bottom: var(--space-5, 1.25rem);
}

body.auth-body .auth-title {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: var(--space-2, 0.5rem);
}

body.auth-body .auth-subtitle {
  font-size: var(--text-sm, 0.875rem);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

/* Auth Links (Passwort vergessen, etc.) */
body.auth-body .auth-links {
  text-align: center;
  margin-top: var(--space-5, 1.25rem);
  padding-top: var(--space-2, 0.5rem);
}

body.auth-body .auth-link {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: #60a5fa;
  text-decoration: none;
  transition: color 150ms ease;
}

body.auth-body .auth-link:hover {
  color: #1e40af;
}

/* ============================================================================
   BACKDROP-FILTER FALLBACK (Safari / older browsers)
   ============================================================================ */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.auth-body .standalone-card {
    background: rgba(20, 20, 28, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* ============================================================================
   REDUCED MOTION: Calm, static alternative
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .auth-vignette {
    background:
      radial-gradient(1100px 700px at 55% 40%, rgba(255, 255, 255, 0.03), transparent 60%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
  }
  
  /* Static fallback background when Vanta is disabled */
  #auth-bg {
    background: 
      radial-gradient(ellipse 120% 80% at 50% 30%, rgba(45, 55, 72, 0.6) 0%, transparent 60%),
      radial-gradient(ellipse 80% 60% at 80% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
      radial-gradient(ellipse 60% 50% at 20% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 45%),
      linear-gradient(180deg, #0a0a0f 0%, #1a1a2e 100%);
  }
  
  body.auth-body .btn-primary {
    transition: none;
  }
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 640px) {
  .auth-shell,
  body.auth-body .standalone-page {
    padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
    align-items: flex-start;
    padding-top: var(--space-12, 3rem);
  }
  
  body.auth-body .standalone-card {
    padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
    border-radius: var(--radius-2xl, 1.25rem);
    min-width: auto;
    width: 94vw;
  }
  
  .auth-branding {
    bottom: var(--space-4, 1rem);
    left: var(--space-4, 1rem);
  }
  
  .auth-branding-logo {
    height: 16px;
  }
  
  .auth-version {
    bottom: var(--space-4, 1rem);
    right: var(--space-4, 1rem);
  }
  
  .auth-version-name {
    font-size: var(--text-xs, 0.75rem);
  }
  
  .auth-version-number {
    font-size: 0.65rem;
  }
}