/* Login autofill: generated from reviewed Login.vue; scoped to login form. */
#app .login-page .login-card .input-field {
  --login-input-surface: #237a46;
  width: 100%;
}

#app .login-page .login-card .input-field .el-input__wrapper {
  background: var(--login-input-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-lg);
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  padding: 0 var(--space-3);
}

#app .login-page .login-card .input-field .el-input__wrapper:hover {
  --login-input-surface: #27824c;
  border-color: rgba(74, 222, 128, 0.5) !important;
}

#app .login-page .login-card .input-field .el-input__wrapper.is-focus {
  --login-input-surface: #27824c;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}

#app .login-page .login-card .input-field .el-input__inner:-webkit-autofill,
#app .login-page .login-card .input-field .el-input__inner:-webkit-autofill:hover,
#app .login-page .login-card .input-field .el-input__inner:-webkit-autofill:focus,
#app .login-page .login-card .input-field .el-input__inner:-webkit-autofill:active,
#app .login-page .login-card .input-field .el-input__inner:autofill {
  /* Use the wrapper's opaque surface so browser autofill cannot show through. */
  -webkit-box-shadow: 0 0 0 1000px var(--login-input-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--login-input-surface) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  transition: none;
}