/*
 * The show/hide control public/js/password-toggle.js builds.
 *
 * A standalone file rather than a block in theme.css or app.css because the
 * password screens are split across this application's two stylesheets -
 * Tailwind on sign-in and reset, Bootstrap on the admin ones - and the control
 * has to look identical on both. Everything here is scoped to the two classes
 * the script adds, so it cannot reach anything else on either side.
 */

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

/* The input keeps whatever the page already styles it with; it only needs room
   on the right so long passwords do not run under the button. */
.password-field > input {
    width: 100%;
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #6B7480;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    transition: color 0.15s ease;
}

.password-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

.password-toggle:hover {
    color: #1F2733;
}

/* Reachable with Shift+Tab, so it needs a visible focus state. */
.password-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
    color: #1F2733;
}

/* While the password is showing, the control is "on" and says so in colour as
   well as in its icon - the icon alone is a subtle difference to catch. */
.password-toggle[aria-pressed="true"] {
    color: #2563EB;
}

@media (prefers-color-scheme: dark) {
    .password-toggle { color: #8B94A3; }
    .password-toggle:hover,
    .password-toggle:focus-visible { color: #E6E9ED; }
    .password-toggle[aria-pressed="true"] { color: #6FA3DE; }
}

/* A fingertip target on a phone, where this control is most needed. */
@media (max-width: 767px) {
    .password-toggle {
        width: 44px;
        min-height: 44px;
    }

    .password-field > input {
        padding-right: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .password-toggle { transition: none; }
}