/* Eye toggle on password fields. password-reveal.js wraps each
   <input type="password"> in a positioned .rj-eye-field div and places
   the button inside the field's right edge, so the field keeps one
   border and the eye sits on top of it: the in-field pattern most web
   apps use. The input's right padding is what stops typed text from
   running under the icon.

   Colors come from --text-secondary and --text-primary, the variables
   base.html defines for both themes, so no [data-color-theme="dark"]
   block is needed here: the same rule resolves per theme. */

.rj-eye-field {
    position: relative;
    display: block;
}

.rj-eye-field > input {
    padding-right: 2.5rem;
}

.rj-eye-btn {
    position: absolute;
    top: 1px;
    right: 1px;
    height: calc(100% - 2px);
    width: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 0 0.375rem 0.375rem 0;
    background-color: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rj-eye-btn:hover,
.rj-eye-btn:focus-visible {
    color: var(--text-primary);
    background-color: transparent;
}

.rj-eye-btn .bi {
    font-size: 1.05rem;
    line-height: 1;
}

/* Bootstrap 5.3 paints its own validation icon in the field's right band
   (padding-right: calc(1.5em + 0.75rem)), so on a validated field the eye
   steps left of that band instead of sitting on top of the icon. */
.rj-eye-field > input.is-valid,
.rj-eye-field > input.is-invalid {
    padding-right: calc(2.5rem + 1.5em + 0.75rem);
}

.rj-eye-field > input.is-valid ~ .rj-eye-btn,
.rj-eye-field > input.is-invalid ~ .rj-eye-btn {
    right: calc(1.5em + 0.75rem);
}