/* ══════════════════════════════════════════════════════════════════
   Shared auth / password UI — password reveal toggle.

   Behaviour lives in wwwroot/js/auth-ui.js, which builds .pw-wrap and
   the button at runtime; a view only marks an input with data-pw-reveal.
   Rules are deliberately layout-agnostic so the same stylesheet works on
   the standalone auth pages (.input-group) and inside the app shell
   (.inp / .fg / dialogs).
   ══════════════════════════════════════════════════════════════════ */

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

    /* Two classes deep on purpose: this has to beat the single-class input
       rules in site.css AND the auth pages' own inline <style> blocks, so the
       text never runs under the eye regardless of stylesheet order. */
    .pw-wrap input.pw-input {
        padding-right: 46px;
    }

        /* Edge paints its own reveal control — hide it so there is one eye, not two. */
        .pw-wrap input.pw-input::-ms-reveal {
            display: none;
        }

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    line-height: 0;
    transition: background .2s ease, color .2s ease;
}

    .pw-toggle:hover {
        background: color-mix(in srgb, var(--color-primary, #5B45D9) 10%, transparent);
        color: var(--color-primary, #5B45D9);
    }

    .pw-toggle:focus-visible {
        outline: 2px solid var(--color-primary, #5B45D9);
        outline-offset: 2px;
    }

    .pw-toggle svg {
        width: 18px;
        height: 18px;
        pointer-events: none;
    }

    .pw-toggle .icon-off {
        display: none;
    }

    .pw-toggle.is-on .icon-on {
        display: none;
    }

    .pw-toggle.is-on .icon-off {
        display: block;
    }