/* Show/hide toggle for password inputs.
   Apply by wrapping <input type="password" class="pw-input"> in
   <div class="pw-wrap"> alongside a <button class="pw-toggle"
   data-target="<input-id>"> with two SVG icons (.icon-show + .icon-hide).
   The matching JS lives in /static/js/password-toggle.js. */

.pw-wrap {
    position: relative;
}

/* Reserve room on the right for the toggle button. The wrapper-based
   selector beats simple class rules like .login-input { padding: 0 12px }
   so page-specific input styles can't squeeze the button area. */
.pw-wrap > .pw-input {
    padding-right: 44px !important;
}

/* Hide Edge's native ::-ms-reveal eye on every type=password input.
   Without this, Edge shows its built-in reveal button next to fields
   that intentionally have no toggle (YubiKey OTP) or already have a
   custom toggle (our .pw-toggle, the admin set-password modal's own
   "Show" button) — visually confusing. Other browsers (Chrome,
   Firefox, Safari) don't render ::-ms-reveal so the rule is a no-op
   for them. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--cs-text-secondary, #5F6B7A);
    padding: 0;
}

.pw-toggle:hover {
    color: var(--cs-text-heading, #000716);
    background: rgba(9, 114, 211, 0.08);
}

.pw-toggle:focus-visible {
    outline: 2px solid var(--cs-border-input-focus, #0972D3);
    outline-offset: 1px;
}

.pw-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

.pw-toggle .icon-hide { display: none; }
.pw-toggle.is-visible .icon-show { display: none; }
.pw-toggle.is-visible .icon-hide { display: block; }