/* Authentication Form Input Styles */ /* These styles override the default .form-input class for authentication pages only */
.auth-page .form-input {
  /* Base styling */
  background-color: oklab(0.21 -0.00316127 -0.0338527 / 0.5) !important;
  border: 1px solid oklch(0.373 0.034 259.733) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  height: 48px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: oklch(0.928 0.006 264.531) !important;
  transition: all 0.2s ease-in-out !important;
} /* Placeholder styling */
.auth-page .form-input::placeholder {
  color: oklch(0.928 0.006 264.531) !important;
  opacity: 0.65 !important;
} /* Focus state */
.auth-page .form-input:focus {
  outline: none !important;
  border-color: oklch(0.451 0.04 259.733) !important;
  box-shadow: 0 0 0 3px oklab(0.21 -0.00316127 -0.0338527 / 0.15) !important;
  background-color: oklab(0.24 -0.00316127 -0.0338527 / 0.6) !important;
} /* Hover state */
.auth-page .form-input:hover:not(:focus) {
  border-color: oklch(0.41 0.037 259.733) !important;
  background-color: oklab(0.23 -0.00316127 -0.0338527 / 0.55) !important;
} /* Error state (when field has validation errors) */
.auth-page .form-input.field_with_errors,
.auth-page .form-input:invalid {
  border-color: oklch(0.627 0.257 29.234) !important;
  box-shadow: 0 0 0 3px oklch(0.627 0.257 29.234 / 0.1) !important;
} /* Label styling for better consistency */
.auth-page label {
  color: oklch(0.928 0.006 264.531 / 0.85) !important;
  font-weight: 500 !important;
}

/* Global dark mode text color for all form inputs */
.dark .form-input,
.dark .form-textarea,
.dark .form-select,
.dark .form-multiselect {
  color: var(--color-gray-100) !important;
}

/* Override text color for ALL form input elements in dark mode */
/* This ensures all inputs have light text, overriding Tailwind's text-gray-900 */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark input[type="month"],
.dark input[type="week"],
.dark textarea,
.dark select {
  color: rgb(243 244 246) !important; /* gray-100 - light text for dark mode */
}