/* ===================================
   Library Discovery System - Auth Page Enhancements
   Aesthetic polish for Register/Login pages: layout, card, inputs, strength bar
   =================================== */

/* Page wrapper with subtle gradient background */
.auth-wrapper {
  background:
    radial-gradient(1000px 500px at 10% -10%, rgba(255, 255, 255, 0.15), transparent 60%),
    linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
  min-height: calc(100vh - 56px);
  padding: var(--spacing-2xl) 0;
}

/* Elevated, rounded card */
.auth-card {
  background-color: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow-lg);
}
.auth-card .card-body {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

/* Header: icon, title, subtext */
.auth-header i {
  font-size: 3rem;
  color: var(--primary);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}
.auth-header h2 {
  letter-spacing: 0.02em;
}
.auth-header p {
  color: var(--gray-600);
  margin-top: var(--spacing-xs);
}

/* Labels and inputs */
.auth-card .form-label i {
  color: var(--primary);
}
.form-control,
.form-select {
  border-radius: var(--radius-lg);
}
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

/* Password toggler styling */
.input-group .btn.btn-outline-secondary {
  border-color: var(--gray-300);
  color: var(--gray-700);
}
.input-group .btn.btn-outline-secondary:hover {
  background-color: var(--gray-50);
  color: var(--gray-900);
}

/* Strength bar */
.progress {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-full);
}
.progress .progress-bar {
  border-radius: var(--radius-full);
  transition: width 0.2s ease-in-out;
}
#passwordStrength.bg-danger { background-image: linear-gradient(90deg, #ef4444, #dc2626); }
#passwordStrength.bg-warning { background-image: linear-gradient(90deg, #f59e0b, #d97706); }
#passwordStrength.bg-info { background-image: linear-gradient(90deg, var(--info-light), var(--info)); }
#passwordStrength.bg-success { background-image: linear-gradient(90deg, var(--success-light), var(--success)); }

/* Divider and CTA */
hr.my-4 {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.12), transparent);
}
.btn-primary.btn-lg {
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}
.btn-primary.btn-lg:hover {
  transform: translateY(-1px);
}

/* Footer link accent within auth section */
.auth-wrapper a.text-decoration-none {
  color: var(--primary);
}

/* Responsive tweaks */
@media (max-width: 576px) {
  .auth-card { border-radius: var(--radius-lg); }
  .auth-header i { font-size: 2.5rem; }
}