/* ================================================
   login.css — BarangayConnect
   Login-specific credential entry layout and branding overlays.

   WHAT IS IN HERE:
   · Centered single-column layout rules for authentication
   · Form header details and descriptive input container bounds
   · Visual feedback states on inputs focus and button submits

   WHAT IS NOT IN HERE:
   · Multistep registration columns        → register.css
   · Shared authentication utility styles  → auth.css
   · Interactive role cards selection      → auth.css
================================================ */
/* ================================================
   login.css — BarangayConnect
   Login page only. Import AFTER main.css.
   Replaces auth.css on index.html.

   SECTIONS:
     1. Layout
     2. Left panel
     3. Stats card
     4. Testimonial carousel
     5. Right panel
     6. Form overrides
     7. Responsive
================================================ */


/* ================================================
   1. LAYOUT
================================================ */

.login-page {
  display: flex;
  min-height: 100vh;
}


/* ================================================
   2. LEFT PANEL
================================================ */

.auth-left {
  width: 46%;
  min-height: 100vh;
  padding: var(--space-xl) var(--space-2xl);
  background: var(--green-dark);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Decorative blobs — matches register left panel */
.auth-left::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--overlay-white-05);
  top: -80px;
  right: -60px;
  pointer-events: none;
}

.auth-left::after {
  content: '';
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: var(--overlay-white-04);
  bottom: -120px;
  left: -100px;
  pointer-events: none;
}

/* Children above blobs */
.auth-left > * { position: relative; z-index: 1; }

/* Logo — matches reg-logo exactly */
.auth-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  text-decoration: none;
  z-index: 2;
}

.auth-logo__img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.auth-logo__text {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-lg);
  color: var(--white);
  letter-spacing: -0.3px;
}

/* Badge pill — matches reg-badge exactly */
.auth-left__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 6px 14px;
  background: var(--overlay-white-12);
  border: 1px solid var(--overlay-white-20);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-base-sm);
  color: var(--white);
  z-index: 2;
  margin-bottom: var(--space-lg);
}

.auth-left__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.22);
  animation: badge-pulse 2.2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,0.22); }
  50%       { box-shadow: 0 0 0 6px rgba(74,222,128,0.08); }
}

/* Hero fills remaining space */
.auth-left__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-left__heading {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-md);
}

/* Orange highlight span inside heading */
.auth-left__heading .highlight {
  color: var(--orange);
}

.auth-left__subtext {
  max-width: 360px;
  font-size: var(--text-base);
  color: var(--overlay-white-70);
  line-height: var(--lh-loose);
}


/* ================================================
   3. STATS CARD
   Semi-transparent white card with icon+number+label
================================================ */

.auth-stats-card {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--overlay-white-12);
  border-radius: var(--radius-lg);
  padding: var(--space-md) 0;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  border-right: 1px solid var(--overlay-white-10);
}

.auth-stat-item:last-child { border-right: none; }

.auth-stat-item__icon {
  color: var(--orange);
  margin-bottom: 2px;
}

.auth-stat-item__icon [data-lucide] {
  width: 16px;
  height: 16px;
}

.auth-stat-item__number {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-xl);
  color: var(--white);
  line-height: var(--lh-none);
  letter-spacing: -0.5px;
}

.auth-stat-item__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--overlay-white-55);
  text-align: center;
  white-space: nowrap;
}


/* ================================================
   4. TESTIMONIAL CAROUSEL
================================================ */

.auth-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.auth-carousel__track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.auth-carousel__slide {
  min-width: 100%;
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--overlay-white-12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.auth-carousel__stars {
  display: flex;
  gap: 3px;
}

.auth-carousel__stars span {
  color: var(--orange);
  font-size: var(--text-base);
}

.auth-carousel__quote {
  font-size: var(--text-base-sm);
  color: var(--overlay-white-70);
  line-height: var(--lh-relaxed);
  font-style: italic;
}

.auth-carousel__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.auth-carousel__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--overlay-white-20);
  background: var(--green-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--white);
  flex-shrink: 0;
}

.auth-carousel__author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.auth-carousel__author-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-base-sm);
  color: var(--white);
}

.auth-carousel__author-role {
  font-size: var(--text-xs);
  color: var(--overlay-white-55);
}

/* Dot indicators */
.auth-carousel__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: var(--space-sm);
}

.auth-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--overlay-white-25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), width var(--transition);
}

.auth-carousel__dot.is-active {
  width: 18px;
  border-radius: var(--radius-full);
  background: var(--orange);
}


/* ================================================
   5. RIGHT PANEL
================================================ */

.auth-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Inner column — mirrors reg-right__inner */
.auth-right__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

/* "Already registered?" row — top right, mirrors reg-signin */
.auth-register-link {
  align-self: flex-end;
  font-size: var(--text-base-sm);
  color: var(--gray-500);
  margin-bottom: var(--space-2xl);
}

.auth-register-link a {
  color: var(--orange);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.auth-register-link a:hover { text-decoration: underline; }

/* Page title — sits outside the card, mirrors reg-title */
.auth-form__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-3xl);
  color: var(--text-dark);
  letter-spacing: -0.5px;
  margin-bottom: var(--space-xl);
  align-self: flex-start;
}

/* White card wrapping the form — mirrors register-card */
.auth-form-wrapper {
  width: 100%;
  padding: var(--space-xl) var(--space-2xl);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.auth-form__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-4xl);
  color: var(--text-dark);
  letter-spacing: -0.5px;
  margin-bottom: -8px;
}

.auth-form__subtitle {
  font-size: var(--text-base-sm);
  color: var(--gray-500);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-sm);
}


/* ================================================
   6. FORM OVERRIDES
================================================ */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Forgot password row */
.form-forgot {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}

.form-forgot .form-link {
  font-size: var(--text-base-sm);
}

/* btn--green and btn--outline are in buttons.css — no overrides needed here */

/* Divider with "or" text */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--gray-400);
  font-size: var(--text-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-100);
}

/* btn--outline handles the register redirect button */

/* Security notice at bottom */
.auth-security-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-100);
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: var(--lh-relaxed);
}

.auth-security-notice [data-lucide] {
  width: 15px;
  height: 15px;
  color: var(--green-dark);
  flex-shrink: 0;
}

/* Switch link below form */
.auth-switch {
  text-align: center;
  font-size: var(--text-base-sm);
  color: var(--gray-500);
  margin-top: -4px;
}


/* ================================================
   7. RESPONSIVE
================================================ */

@media (max-width: 900px) {
  .login-page { flex-direction: column; min-height: 100svh; }

  .auth-left {
    width: 100%;
    min-height: unset;
    flex: unset;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
  }

  .auth-stats-card,
  .auth-carousel { display: none; }

  .auth-left__hero { flex: none; }

  .auth-left__heading { font-size: 1.6rem; margin-bottom: var(--space-sm); }

  .auth-right__inner { padding: var(--space-xl) var(--space-md); }

  .auth-register-link { margin-bottom: var(--space-lg); }
}

@media (max-width: 520px) {
  .auth-form-wrapper { padding: var(--space-lg) var(--space-md); }
}