/* =====================================================
   LeadFlow – Login Page Styles
   ===================================================== */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg);
  position: relative;
  overflow: hidden;
  padding: 20px;
}

/* ── Animated Background Orbs ─────────────────────── */
.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -40px) scale(1.05); }
  66%       { transform: translate(-20px, 20px) scale(0.97); }
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  animation: float ease-in-out infinite;
}
.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #6366f1, transparent 70%);
  top: -100px;
  left: -100px;
  animation-duration: 12s;
}
.orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #8b5cf6, transparent 70%);
  bottom: -80px;
  right: -80px;
  animation-duration: 15s;
  animation-delay: -4s;
}
.orb-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #3b82f6, transparent 70%);
  top: 50%;
  left: 60%;
  animation-duration: 10s;
  animation-delay: -7s;
}

/* ── Login Wrapper ─────────────────────────────────── */
.login-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ── Brand ─────────────────────────────────────────── */
.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-icon {
  display: flex;
  filter: drop-shadow(0 0 24px rgba(99,102,241,0.5));
}
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #a5b4fc, #e879f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.brand-tagline {
  font-size: 13px;
  color: var(--clr-text-3);
  margin-top: 3px;
}

/* ── Login Card ─────────────────────────────────────── */
.login-card {
  width: 100%;
  padding: 36px;
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.login-card-header {
  margin-bottom: 28px;
  text-align: center;
}
.login-card-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 4px;
}
.login-card-header p {
  font-size: 13.5px;
  color: var(--clr-text-3);
}

/* ── Login Form ─────────────────────────────────────── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.login-form .form-group {
  margin-bottom: 0;
}

/* Submit button animation */
#loginBtn {
  margin-top: 10px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
}

/* ── Footer ─────────────────────────────────────────── */
.login-footer {
  font-size: 12.5px;
  color: var(--clr-text-3);
  text-align: center;
  margin-top: 20px;
}
.copyright {
  font-size: 12px;
  color: var(--clr-text-3);
  opacity: 0.6;
  text-align: center;
}

/* ── Dashboard CSS ──────────────────────────────────── */