/* Login controls deliberately stay light even while the authenticated app uses
   ChemIQ's dark instrument theme. The global dark stylesheet sets every input
   to a dark surface with light text; that is correct inside the app, but the
   login card itself is intentionally white. Scope this override tightly to the
   auth card and include browser autofill states so typed/saved credentials stay
   readable in Chrome/Safari. */

.login-page .login-card,
.login-page .login-card input,
.login-page .login-card button {
  color-scheme: light;
}

.login-page .login-card input {
  background: #ffffff !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
  border-color: #dfe3e8 !important;
  opacity: 1 !important;
}

.login-page .login-card input::placeholder {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  opacity: 1 !important;
}

.login-page .login-card input:focus {
  border-color: #0f7a83 !important;
  box-shadow: 0 0 0 3px rgba(15, 122, 131, 0.14) !important;
}

.login-page .login-card input:-webkit-autofill,
.login-page .login-card input:-webkit-autofill:hover,
.login-page .login-card input:-webkit-autofill:focus,
.login-page .login-card input:-webkit-autofill:active {
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  border-color: #dfe3e8 !important;
  transition: background-color 99999s ease-out 0s;
}

.login-page .login-card input:disabled {
  background: #f8fafc !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  opacity: 1 !important;
}