/* Login page — keep the password-toggle icon container visually flush with
   the input in all states (default, focus, is-invalid, browser autofill,
   dark mode).

   Root cause: .input-group-text has its own background (var(--tblr-bg-forms))
   which does not track the adjacent input's background when the browser paints
   -webkit-autofill (yellow overlay) or when the input is marked .is-invalid.

   Tabler already sets `.input-group-flat .input-group-text { background:
   var(--tblr-bg-forms) }`, which matches the input's default background.
   That's fine for the default state. We only need to patch the cases where the
   input's *visible* background diverges from --tblr-bg-forms: browser autofill
   (see below) and validation errors (just border). */

/* Neutralize Chrome/Safari autofill yellow on the password/email inputs:
   use the standard form background via an inset box-shadow (the only way
   to override -webkit-autofill's internal background-color). */
.card-body .form-control:-webkit-autofill,
.card-body .form-control:-webkit-autofill:hover,
.card-body .form-control:-webkit-autofill:focus,
.card-body .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--tblr-bg-forms) inset !important;
    box-shadow: 0 0 0 1000px var(--tblr-bg-forms) inset !important;
    -webkit-text-fill-color: var(--tblr-body-color);
    caret-color: var(--tblr-body-color);
    transition: background-color 9999s ease-in-out 0s;
}

/* When the input is .is-invalid, Tabler only recolors the border.
   Ensure the icon container border matches, so the right edge does not
   appear detached from the invalid input. */
.input-group-flat:has(> .form-control.is-invalid) > .input-group-text {
    border-color: var(--tblr-form-invalid-border-color);
}