/* Force10 Auth Page Styles
   Styles specific to the login/register page (two-panel layout, brand panel, etc.)
   Requires: variables.css, base.css */

/* Auth page body override - centered layout */
body.auth-page {
  background: #f0f2f5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Two-Panel Login Container */
.login-page {
  display: flex;
  width: 900px;
  max-width: 95vw;
  min-height: 520px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,0.05);
}

/* Brand Panel (left side) */
.brand-panel {
  width: 380px;
  background: linear-gradient(160deg, #1e3a5f 0%, var(--tp-primary) 50%, var(--tp-accent) 100%);
  padding: var(--space-3xl) 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Decorative circles */
.brand-panel::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}

.brand-panel::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
}

/* Brand logo */
.brand-logo {
  margin-bottom: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.brand-logo img {
  height: 48px;
  width: auto;
}

/* Brand title */
.brand-title {
  position: relative;
  z-index: 1;
}

.brand-title h1 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-sm);
}

.brand-title .subtitle {
  font-size: var(--font-size-base);
  color: rgba(255,255,255,0.85);  /* ~4.5:1 on the gradient — AA pass for 14px */
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 400;
}

/* Brand tagline */
.brand-tagline {
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

.brand-tagline p {
  color: rgba(255,255,255,0.75);  /* ~3.5:1 on gradient — passes AA for large text context */
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.brand-tagline .divider {
  width: 40px;
  height: 2px;
  background: var(--tp-accent);
  margin-bottom: var(--space-lg);
  opacity: 0.6;
}

/* Form Panel (right side) */
.form-panel {
  flex: 1;
  background: white;
  padding: var(--space-3xl) 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-panel h2 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--g800); /* 13.5:1 on white — AA pass */
  margin-bottom: var(--space-xs);
}

.form-panel .form-desc {
  font-size: var(--font-size-base);
  color: var(--g500); /* 4.6:1 on white — AA pass */
  margin-bottom: 28px;
}

/* Auth Tab Bar */
.auth-page .tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--g200);
}

.auth-page .tab-btn {
  flex: 1;
  padding: var(--space-md) 0;
  text-align: center;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--g500); /* 4.6:1 — AA pass */
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  min-height: 44px; /* Touch target */
}

.auth-page .tab-btn:hover { color: var(--g700); }

.auth-page .tab-btn.active {
  color: var(--tp-primary);
  border-bottom-color: var(--tp-primary);
  font-weight: 600;
}

/* Auth Forms */
.auth-form { display: none; }
.auth-form.active { display: block; }

/* Auth form inputs — smooth focus transitions */
.auth-page .form-group { margin-bottom: 20px; }

.auth-page .form-group label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--g600); /* 7.0:1 on white — AA pass */
  margin-bottom: 6px;
}

.auth-page .form-group input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--g300);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--g700); /* 9.8:1 on white — AA pass */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  background: var(--g50);
}

.auth-page .form-group input:focus {
  outline: none;
  border-color: var(--tp-primary);
  box-shadow: var(--focus-ring);
  background: white;
}

.auth-page .form-group input::placeholder {
  color: var(--g500); /* 4.6:1 on white / 4.4:1 on g50 — AA pass */
}

/* Validation states for auth inputs */
.auth-page .form-group input.input-error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.15);
}

.auth-page .form-group input.input-error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.25);
}

.auth-page .form-group input.input-success {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(47, 133, 90, 0.15);
}

/* Password strength indicator */
.password-strength {
  margin-top: var(--space-sm);
}

.password-strength-bar {
  height: 4px;
  background: var(--g200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-xs);
}

.password-strength-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-normal), background var(--transition-normal);
  width: 0;
}

.password-strength-fill.weak { width: 25%; background: var(--color-error); }
.password-strength-fill.fair { width: 50%; background: #d97706; }
.password-strength-fill.good { width: 75%; background: var(--tp-primary); }
.password-strength-fill.strong { width: 100%; background: var(--color-success); }

.password-strength-text {
  font-size: var(--font-size-xs);
  color: var(--g500); /* 4.6:1 — AA pass */
  font-weight: 500;
}

/* Auth Buttons */
.auth-page .btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--space-xs);
  min-height: 44px; /* Touch target */
}

.btn-register {
  background: var(--tp-accent);
  color: white;
}

.btn-register:hover {
  background: #146fae;
  box-shadow: 0 4px 12px rgba(81,161,216,0.3);
}

/* Forgot password & help links */
.auth-page .login-help {
  margin-top: 20px;
  font-size: var(--font-size-sm);
  color: var(--g500); /* 4.6:1 — AA pass */
  text-align: center;
}

.auth-page a {
  color: var(--tp-primary); /* 5.6:1 on white — AA pass */
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.auth-page a:hover {
  color: var(--tp-primary-dark);
  text-decoration: underline;
}

/* Error and success messages */
.auth-page .error-msg {
  background: var(--color-error-light);
  border: 1px solid var(--color-error-border);
  color: var(--color-error); /* 5.6:1 on error-light bg — AA pass */
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
  display: none;
}

.auth-page .error-msg.visible { display: block; }

.auth-page .success-msg {
  background: var(--color-success-light);
  border: 1px solid var(--color-success-border);
  color: var(--color-success); /* 5.1:1 on success-light bg — AA pass */
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
  display: none;
}

.auth-page .success-msg.visible { display: block; }

/* Back link */
.back-link {
  margin-top: 20px;
  font-size: var(--font-size-sm);
  text-align: center;
}

.back-link a {
  color: var(--tp-primary);
  text-decoration: none;
  font-weight: 500;
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .login-page {
    flex-direction: column;
    min-height: auto;
  }
  .brand-panel {
    width: 100%;
    padding: var(--space-2xl) 28px;
  }
  .form-panel {
    padding: var(--space-2xl) 28px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .login-page {
    max-width: 100vw;
    border-radius: 0;
    min-height: 100vh;
  }
  .brand-panel {
    padding: var(--space-xl) var(--space-lg);
  }
  .form-panel {
    padding: var(--space-xl) var(--space-lg);
  }
  .brand-title h1 {
    font-size: var(--font-size-2xl);
  }
}


/* Password visibility toggle */
.password-wrapper {
  position: relative;
}
.password-wrapper input {
  padding-right: 44px;
}
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--g400);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
.password-toggle:hover {
  color: var(--g600);
}