/*
 * Campo password con pulsante mostra/nascondi.
 * Condiviso tra il login (login.html, che non usa il layout) e le pagine
 * admin (via fragments/head.html): un solo posto da toccare per cambiarne
 * l'aspetto.
 *
 * Il pulsante è posizionato SOPRA il campo invece che in un .input-group
 * perché deve convivere con .form-floating del login, dove un input-group
 * romperebbe l'animazione dell'etichetta.
 */
.password-field {
    position: relative;
}

/* Spazio per non far finire il testo sotto il pulsante. */
.password-field > .form-control {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    border-radius: 0 var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0;
}

.password-toggle:hover {
    color: var(--bs-body-color, #212529);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

/* Nasconde il rivelatore password nativo di Edge/IE: altrimenti si
   sovrappone al nostro pulsante mostrando due icone sullo stesso campo. */
.password-field > .form-control::-ms-reveal,
.password-field > .form-control::-ms-clear {
    display: none;
}