/* Auth Login Scoped Styles (Bootstrap 4 compatible) */

/* Layout background */
body.login-page {
  background: linear-gradient(135deg, #f6f9ff 0%, #eef5ff 50%, #eaf2ff 100%);
  min-height: 100vh;
  overflow-x: hidden; /* prevent horizontal scrollbar */
}

/* Center wrapper spacing */
.auth-login {
  padding-top: 48px;
  padding-bottom: 48px;
  position: relative;
  overflow: hidden;
  /* Neutralize Bootstrap .row negative margins to avoid horizontal scroll */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Floating decorative background */
.floating-elements { 
  position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0;
}
.floating-circle { 
  position: absolute; border-radius: 50%; opacity: .55; filter: blur(6px);
  background: radial-gradient(circle at 30% 30%, rgba(0,184,169,0.28), rgba(0,184,169,0.12) 55%, rgba(0,184,169,0.0) 70%);
  animation: floatY 12s ease-in-out infinite, floatX 18s ease-in-out infinite;
}
.floating-circle.small { width: 120px; height: 120px; }
.floating-circle.medium { width: 220px; height: 220px; }
.floating-circle.large { width: 360px; height: 360px; }
/* Positions */
.circle1 { top: -40px; left: -30px; animation-delay: 0s, -3s; }
.circle2 { top: 20%; right: -60px; animation-delay: -1s, -6s; }
.circle3 { bottom: -120px; left: 10%; animation-delay: -2s, -9s; }
.circle4 { bottom: 20%; right: 15%; animation-delay: -3s, -12s; }
.circle5 { top: 55%; left: -80px; animation-delay: -4s, -15s; }

/* Card */
.auth-card {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 30px rgba(17, 38, 146, 0.08);
  animation: fadeUp 480ms ease-out both;
  position: relative; z-index: 2;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Card body */
.auth-card .card-body {
  position: relative;
}

/* Brand logo */
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.auth-brand img {
  width: 56px;
  height: 56px;
}

/* Divider + chips */
.auth-sep { height: 1px; width: 84%; margin: 8px auto 6px; opacity: .5;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,184,169,.6) 15%, rgba(0,157,144,.7) 85%, rgba(0,0,0,0) 100%);
}
.feature-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.feature-chips .chip { 
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: #006d65; background: rgba(0,184,169,0.08); border: 1px solid rgba(0,184,169,0.25);
}

/* Inputs */
.input-group .input-group-text {
  background-color: #f3f6fb;
  border-color: #e6ecf5;
  color: #236a63; /* deep teal */
}
.form-control {
  border-color: #e6ecf5;
  background-color: #fff;
}
.form-control:focus {
  border-color: #00b8a9;
  box-shadow: 0 0 0 0.2rem rgba(0, 184, 169, 0.18);
}

/* Toggle password */
.password-toggle {
  border: 0;
  background: transparent;
  color: #41516b;
  padding: 0 10px;
  cursor: pointer;
}
.password-toggle:focus { outline: none; }
.password-toggle i { pointer-events: none; }

/* Buttons */
.auth-card .btn-primary {
  background-color: #00b8a9;
  border-color: #00b8a9;
}
.auth-card .btn-primary.btn-block {
  box-shadow: 0 6px 16px rgba(0, 184, 169, 0.28);
}
.auth-card .btn-primary:hover,
.auth-card .btn-primary:focus {
  background-color: #09a697;
  border-color: #09a697;
  transform: translateY(-1px);
}

/* Links */
.btn-link { color: #009d90; }
.btn-link:hover { color: #007f75; text-decoration: none; }

/* Validation */
.invalid-feedback { display: block; }

/* Accessibility focus */
.auth-card a:focus-visible,
.auth-card button:focus-visible,
.auth-card input:focus-visible {
  outline: 3px solid rgba(0, 184, 169, 0.6);
  outline-offset: 2px;
}

/* Small helpers */
.text-muted.small { color: #718096 !important; }

/* Responsive */
@media (max-width: 576px) {
  .auth-card .card-body { padding: 22px; }
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-card .crm-logo { animation: floatIn 420ms ease-out both 80ms; }
@keyframes floatY { from { transform: translateY(0); } 50% { transform: translateY(-12px); } to { transform: translateY(0); } }
@keyframes floatX { from { margin-left: 0; } 50% { margin-left: 6px; } to { margin-left: 0; } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .floating-circle { animation: none; }
  .auth-card { animation: none; }
  .auth-card .crm-logo { animation: none; }
}