/**
 * Auth Pages - Dark Mode
 * Shared dark mode styles for all authentication pages.
 */

/* Body background */
html.dark body {
  background: linear-gradient(135deg, #1a1a2e, #16213e 50%, #0f0f23);
}

/* Card glass effect */
html.dark .login-card,
html.dark .setup-card,
html.dark .change-password-card {
  background: rgba(26, 26, 46, 0.75);
  border-color: rgba(52, 178, 157, 0.2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 16px 48px rgba(0,0,0,0.4);
}

html.dark .login-card::before,
html.dark .setup-card::before,
html.dark .change-password-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 60%);
}

/* Text */
html.dark .title-primary,
html.dark .title-secondary,
html.dark .login-card h1,
html.dark .login-card h2,
html.dark .setup-card h1,
html.dark .setup-card h2,
html.dark .change-password-card h1,
html.dark .change-password-card h2,
html.dark .setup-title,
html.dark .page-title {
  color: #cedbe6;
}

html.dark .subtitle,
html.dark .login-card p,
html.dark .setup-card p,
html.dark .change-password-card p,
html.dark .setup-subtitle,
html.dark .page-subtitle,
html.dark .login-subtitle {
  color: #9ca3af;
}

/* Form inputs */
html.dark .form-input {
  background: rgba(55, 53, 69, 0.8);
  border-color: rgba(52, 178, 157, 0.2);
  color: #cedbe6;
}

html.dark .form-input:focus {
  background: rgba(55, 53, 69, 0.95);
  border-color: #34B29D;
  box-shadow: 0 0 0 3px rgba(52, 178, 157, 0.2);
}

html.dark .form-input::placeholder {
  color: rgba(206, 219, 230, 0.4);
}

/* Labels */
html.dark .form-label,
html.dark .login-card label,
html.dark .setup-card label,
html.dark .change-password-card label {
  color: rgba(206, 219, 230, 0.7);
}

/* Links */
html.dark .login-card a,
html.dark .setup-card a,
html.dark .change-password-card a {
  color: #34B29D;
}

/* Buttons - keep gradient buttons as-is, just fix secondary */
html.dark .btn-secondary,
html.dark .link-text {
  color: #cedbe6;
}

/* Error/flash messages */
html.dark .flash-error,
html.dark .error-message {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

html.dark .flash-success,
html.dark .success-message {
  background: rgba(52, 178, 157, 0.15);
  border-color: rgba(52, 178, 157, 0.3);
  color: #34B29D;
}

/* Logo dim in dark mode */
html.dark .logo-img {
  opacity: 0.8;
}

/* OTP/Code inputs */
html.dark .otp-input,
html.dark .secret-code {
  background: rgba(55, 53, 69, 0.8);
  border-color: rgba(52, 178, 157, 0.2);
  color: #cedbe6;
}

/* Warning & Notice messages */
html.dark .warning-banner,
html.dark .warning-box {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

html.dark .notice-message {
  background: rgba(38, 131, 198, 0.15);
  border-color: rgba(38, 131, 198, 0.3);
  color: #60a5fa;
}

/* Steps section */
html.dark .steps {
  background: rgba(55, 53, 69, 0.6);
}

html.dark .steps li {
  color: #cedbe6;
}

/* Password requirements */
html.dark .requirement {
  color: #9ca3af;
}

html.dark .requirement.met {
  color: #34B29D;
}