/**
 * Auth Pages Text Visibility Fix
 * Ensures all text is visible on login and auth pages
 */

/* Fix Login Button Text */
.auth-container button[type="submit"],
.auth-container .btn-primary,
.auth-container button {
  color: white !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Fix "Ingelogd blijven" checkbox text */
.auth-container .checkbox-container label,
.auth-container label[for="remember"],
.auth-container label {
  color: #f0f0f0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Input Labels */
.auth-container label:not(.checkbox-container label) {
  color: #e0e0e0 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

/* Links Text */
.auth-container a {
  color: #39d353 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.auth-container a:hover {
  color: #2fb844 !important;
}

/* Form Title */
.auth-container h2,
.auth-container .form-title {
  color: white !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Paragraph Text */
.auth-container p {
  color: #b0b0b0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Input Placeholder Text */
.auth-container input::placeholder {
  color: #666 !important;
  opacity: 0.8 !important;
}

/* Error Messages */
.auth-container .error,
.auth-container .alert-danger {
  color: #f44336 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Success Messages */
.auth-container .success,
.auth-container .alert-success {
  color: #39d353 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Flash Messages */
.flash-messages li {
  color: #39d353 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Footer Text */
.footer,
.footer p {
  color: #888 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-links a {
  color: #888 !important;
  opacity: 1 !important;
}

.footer-links a:hover {
  color: #39d353 !important;
}

/* Ensure form elements have proper contrast */
.auth-container input[type="text"],
.auth-container input[type="email"],
.auth-container input[type="password"],
.auth-container input[type="tel"] {
  background: #1a1a1a !important;
  color: #f0f0f0 !important;
  border: 2px solid #333 !important;
}

.auth-container input:focus {
  background: #222 !important;
  color: white !important;
  border-color: #39d353 !important;
}

/* Fix specific "Ingelogd blijven" text */
.auth-container input[type="checkbox"] + label,
.auth-container .checkbox-container label {
  position: relative !important;
  padding-left: 0 !important;
  color: #f0f0f0 !important;
  font-weight: normal !important;
}

/* Ensure all text elements are visible */
.auth-container * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide only what should be hidden */
.auth-container .hidden,
.auth-container [hidden] {
  display: none !important;
}

/* Specific fix for login form */
.auth-container form label[for="username"],
.auth-container form label[for="password"],
.auth-container form label[for="email"] {
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  color: #b0b0b0 !important;
  margin-bottom: 0.5rem;
}

/* Login button specific */
button:contains("Login"),
button:contains("Inloggen"),
.auth-container button[type="submit"] {
  position: relative !important;
  z-index: 1 !important;
  color: white !important;
  font-weight: 600 !important;
}

/* 2FA Code Input */
#otp_code {
  color: white !important;
  text-align: center !important;
}

/* Override any conflicting styles */
.auth-container .card {
  color: #f0f0f0 !important;
}

.auth-container .card * {
  color: inherit !important;
}

.auth-container .card label {
  color: #e0e0e0 !important;
}

.auth-container .card button {
  color: white !important;
}