/*
 * Devise authentication pages styles
 * Uses shared CSS custom properties from application.css
 */

/* Page background */
.auth-page {
  background-color: var(--qadra-bg-secondary);
}

/* Form inputs */
.auth-input {
  background: var(--qadra-bg-primary);
  border: 1px solid var(--qadra-border-primary);
  color: var(--qadra-text-primary);
  transition: all 0.2s ease;
}

.auth-input:focus {
  border-color: #35E885;
  box-shadow: 0 0 0 3px rgba(53, 232, 133, 0.1);
  outline: none;
}

.auth-input::placeholder {
  color: var(--qadra-text-faint);
}

/* Form labels */
.auth-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--qadra-text-primary);
  margin-bottom: 0.5rem;
}

/* Form field wrapper */
.auth-field {
  margin-bottom: 1.25rem;
}

.auth-field:last-of-type {
  margin-bottom: 0;
}

/* Primary button */
.auth-button {
  background: #35E885;
  color: #fff;
  font-weight: 600;
  transition: all 0.2s ease;
}

/* Button wrapper */
.auth-actions {
  margin-top: 2rem;
}

.auth-button:hover {
  background: #2BC972;
}

/* Links */
.auth-link {
  color: #35E885;
  font-weight: 500;
  transition: all 0.2s ease;
}

.auth-link:hover {
  color: #2BC972;
  text-decoration: underline;
}

/* Card */
.auth-card {
  background: var(--qadra-bg-primary);
  border: 1px solid var(--qadra-border-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  border-radius: 4px;
}

/* Error/alert styling */
.auth-alert {
  background: var(--qadra-error-bg-subtle);
  border: 1px solid var(--qadra-error-border);
  color: var(--qadra-error-icon);
}

.auth-notice {
  background: var(--qadra-success-bg);
  border: 1px solid var(--qadra-success-bg-hover);
  color: var(--qadra-success-icon);
}

/* Dark mode overrides for Tailwind utility classes in Devise views */
.dark .auth-page .text-gray-900 { color: var(--qadra-text-primary); }
.dark .auth-page .text-gray-600 { color: var(--qadra-text-tertiary); }
.dark .auth-page .text-gray-500 { color: var(--qadra-text-muted); }
.dark .auth-page .hover\:text-gray-900:hover { color: var(--qadra-text-primary); }