/* ==================================================================
   Show / hide button injected into every password field
   by web/js/password-toggle.js.

   Direction-agnostic: `inset-inline-end` puts the eye on the right in
   LTR and on the left in the Arabic (RTL) interface.
   ================================================================== */

.pw-field {
    position: relative;
    display: block;
}

.pw-field > input {
    /* room for the button, so long passwords do not slide underneath it */
    padding-inline-end: 2.75rem;
}

/* Bootstrap's .is-invalid resets the end padding and paints its own warning
   icon exactly where the eye button sits — keep ours */
.pw-field > input.is-invalid,
.pw-field > input.is-valid {
    padding-inline-end: 2.75rem;
    background-image: none;
}

.pw-field__toggle {
    position: absolute;
    inset-inline-end: 0.25rem;
    top: 50%;
    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;

    padding: 0;
    border: 0;
    border-radius: 0.35rem;
    background: transparent;
    color: #6c757d;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pw-field__toggle:hover,
.pw-field__toggle:focus-visible {
    color: inherit;
    background-color: rgba(128, 128, 128, 0.15);
}

.pw-field__toggle:focus {
    outline: 0;
}

.pw-field__toggle:focus-visible {
    box-shadow: 0 0 0 0.15rem rgba(128, 128, 128, 0.35);
}

/* Bootstrap validates through `input.is-invalid ~ .invalid-feedback`; the
   wrapper breaks that sibling chain, so re-establish it from the wrapper.
   The :has() rule is the progressive-enhancement half — the class mirrored
   by the JS covers browsers without it. */
.pw-field.is-invalid ~ .invalid-feedback {
    display: block;
}

/* kept as a separate rule on purpose: a browser without :has() would throw
   away the whole selector list, taking the class-based rule above with it */
.pw-field:has(.is-invalid) ~ .invalid-feedback {
    display: block;
}

/* the browser's own reveal control would sit on top of ours */
.pw-field > input::-ms-reveal,
.pw-field > input::-ms-clear {
    display: none;
}