/* Show/hide password toggle.
   Paired with Components/Shared/PasswordVisibilityToggle.razor and
   wwwroot/js/password-visibility.js.

   A `.pw-field` wraps exactly one password <input> plus the toggle <button>. The
   wrapper is positioned so the button can sit at the input's right edge, and the
   input gets extra right padding so typed text never slides under the icon. */

.pw-field {
    position: relative;
}

/* Reserve room for the eye button regardless of the input's own utility padding
   (e.g. Tailwind px-4, Bootstrap form-control, the register wizard's floating input). */
.pw-field > input {
    padding-right: 2.75rem !important;
}

.pw-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #93aec9; /* oyster/indigo-300 muted */
    cursor: pointer;
    z-index: 2;
    transition: color 150ms ease;
}

.pw-toggle-btn:hover,
.pw-toggle-btn:focus-visible {
    color: #25507c; /* brand blue */
    outline: none;
}

.pw-toggle-btn .material-icons {
    font-size: 1.25rem;
    line-height: 1;
}

/* Live password-requirement checklist (PasswordRequirements.razor + password-requirements.js).
   Each rule's check starts muted and turns green as the requirement is met while typing. The
   glyph is constant; only the color changes (toggled client-side via the .pw-met class), so a
   Blazor re-render never fights it. */
.pw-requirements .pw-req-icon {
    color: #B7B1A3; /* muted oyster: requirement not yet met */
    transition: color 0.15s ease;
}
.pw-requirements .pw-req.pw-met .pw-req-icon {
    color: #16A34A; /* green: requirement met */
}