/* ═══════════════════════════════════════════════════════
   Future Staff — Login Page v2: White + Blue + 3D Globe
   ═══════════════════════════════════════════════════════ */

/* ── Kill all Clawith layout ──────────────────────── */
.atlas-page .atlas-frame-top,
.atlas-login-hero,
.atlas-screen-split { display: none !important; }
.atlas-screen-form {
  width: 100% !important; max-width: 100% !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; min-height: 100dvh !important;
  padding: 0 !important; background: #fff !important;
}
.atlas-login-form-wrapper {
  max-width: 100% !important; width: 100% !important; padding: 0 !important;
}

/* ── Root Container ───────────────────────────────── */
#fs-login-root {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; background: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Left: Globe Panel ────────────────────────────── */
#fs-globe-panel {
  flex: 0 0 55%;
  position: relative;
  background: linear-gradient(135deg, #F0F7FF 0%, #E8F1FD 40%, #DBEAFE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Subtle dot grid background */
#fs-globe-panel::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, #BFDBFE 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.4;
}

/* Globe canvas */
#globe-canvas {
  position: relative;
  z-index: 1;
  width: 480px;
  height: 480px;
}

/* Floating particles */
.fs-particle {
  position: absolute;
  border-radius: 50%;
  background: #3B82F6;
  opacity: 0.15;
  animation: fs-float 6s ease-in-out infinite;
}
.fs-particle:nth-child(2) { width: 8px; height: 8px; top: 20%; left: 15%; animation-delay: -1s; animation-duration: 7s; }
.fs-particle:nth-child(3) { width: 6px; height: 6px; top: 70%; left: 25%; animation-delay: -3s; animation-duration: 5s; }
.fs-particle:nth-child(4) { width: 10px; height: 10px; top: 30%; left: 80%; animation-delay: -2s; animation-duration: 8s; }
.fs-particle:nth-child(5) { width: 5px; height: 5px; top: 80%; left: 70%; animation-delay: -4s; animation-duration: 6s; }

@keyframes fs-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.1); }
}

/* Brand in form panel (above login form) */
#fs-form-brand {
  margin-bottom: 36px;
}

#fs-form-brand .fs-logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

#fs-form-brand .fs-logo-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
  letter-spacing: 0.05em;
}

#fs-form-brand .fs-brand-name {
  font-size: 22px; font-weight: 700; color: #0F172A;
  letter-spacing: -0.02em;
}

#fs-form-brand .fs-brand-tagline {
  font-size: 14px; color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* Remove old globe-panel brand */
#fs-globe-brand { display: none !important; }

/* ── Right: Form Panel ────────────────────────────── */
#fs-form-panel {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
  background: #fff;
  position: relative;
}

#fs-form-inner {
  width: 100%;
  max-width: 400px;
}

/* Form title area */
#fs-form-inner h2 {
  font-size: 26px; font-weight: 700;
  color: #0F172A; margin: 0 0 6px;
  letter-spacing: -0.01em;
}

#fs-form-inner .fs-form-desc {
  font-size: 14px; color: #64748B;
  margin: 0 0 32px;
}

/* ── Style overrides for React form elements ──────── */

/* Inputs: clean bottom-border style */
.atlas-page .atlas-input,
.atlas-page input[type="text"],
.atlas-page input[type="email"],
.atlas-page input[type="password"],
.atlas-page input[type="tel"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1.5px solid #E2E8F0 !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  color: #0F172A !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  transition: border-color 0.2s !important;
}

.atlas-page .atlas-input:focus,
.atlas-page input:focus {
  border-bottom-color: #2563EB !important;
  box-shadow: 0 1px 0 0 #2563EB !important;
  outline: none !important;
}

.atlas-page .atlas-input::placeholder,
.atlas-page input::placeholder {
  color: #94A3B8 !important;
}

/* Labels */
.atlas-page .atlas-label {
  color: #475569 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Submit button — override ALL Atlas states */
.atlas-page .atlas-btn-primary,
.atlas-page .atlas-btn-primary:hover,
.atlas-page .atlas-btn-primary:active,
.atlas-page .atlas-btn-primary:focus,
.atlas-page button[type="submit"],
.atlas-page button[type="submit"]:hover,
.atlas-page button[type="submit"]:active {
  background: linear-gradient(135deg, #2563EB, #3B82F6) !important;
  background-color: #2563EB !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  height: 48px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

.atlas-page .atlas-btn-primary:hover,
.atlas-page button[type="submit"]:hover {
  background: linear-gradient(135deg, #1D4ED8, #2563EB) !important;
  background-color: #1D4ED8 !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.atlas-page .atlas-btn-primary:active,
.atlas-page button[type="submit"]:active {
  background: linear-gradient(135deg, #1E40AF, #1D4ED8) !important;
  background-color: #1E40AF !important;
  transform: translateY(0);
}

/* Ghost buttons (register, forgot password) */
.atlas-page .atlas-btn-ghost {
  color: #2563EB !important;
  border: 1px solid #DBEAFE !important;
  background: transparent !important;
  border-radius: 10px !important;
}

.atlas-page .atlas-btn-ghost:hover {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
}

/* Social login buttons */
.atlas-page .atlas-social-btn {
  border: 1px solid #E2E8F0 !important;
  background: #fff !important;
  color: #334155 !important;
  border-radius: 10px !important;
}

.atlas-page .atlas-social-btn:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
}

/* Divider */
.atlas-page .atlas-divider {
  border-color: #E2E8F0 !important;
}

.atlas-page .atlas-divider-text {
  color: #94A3B8 !important;
  background: #fff !important;
  font-size: 12px !important;
}

/* Links */
.atlas-page a, .atlas-page .atlas-link {
  color: #2563EB !important;
}

.atlas-page a:hover, .atlas-page .atlas-link:hover {
  color: #1D4ED8 !important;
}

/* Error messages */
.atlas-page .atlas-error,
.atlas-page [class*="error"] {
  color: #DC2626 !important;
}

/* Password visibility toggle */
.atlas-page .atlas-input-group-btn {
  color: #94A3B8 !important;
}

/* ── Spinner ──────────────────────────────────────── */
.login-spinner {
  border-color: #DBEAFE !important;
  border-top-color: #2563EB !important;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  #fs-globe-panel { flex: 0 0 45%; }
  #fs-form-panel { flex: 0 0 55%; }
  #globe-canvas { width: 320px; height: 320px; }
}

@media (max-width: 768px) {
  #fs-login-root { flex-direction: column; }
  #fs-globe-panel {
    flex: 0 0 auto;
    height: 240px;
    padding: 0;
  }
  #globe-canvas { width: 200px; height: 200px; }
  #fs-form-panel { flex: 1; padding: 32px 24px; }
  #fs-form-brand { margin-bottom: 24px; }
  #fs-form-brand .fs-brand-name { font-size: 20px; }
  #fs-form-brand .fs-brand-tagline { display: none; }
  .fs-particle { display: none; }
}