/*
 * Controlos complementares dos formulários de autenticação.
 * Mantém os campos previsíveis sem interferir com autocomplete ou gestores de passwords.
 */

/* O username mantém sempre a largura total; Gerar/Regenerar ocupa uma linha própria. */
.username-generator-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
}

.username-generator-row .auth-input-shell {
    width: 100%;
    min-width: 0;
}

.username-regenerate-button {
    justify-self: end;
}

/* No registo, Password -> Regras -> Confirmar password ocupam linhas completas. */
.auth-register-password-rules {
    width: 100%;
    margin-top: 0.65rem;
}

.auth-register-password-rules + .auth-register-password-field {
    margin-top: 0.65rem;
}

/*
 * O botão LocuXplorer é um elemento flex separado do input. Assim existe espaço
 * reservado para o controlo e não se sobrepõe a decorações internas do browser
 * ou de gestores de passwords.
 */
.auth-password-shell .auth-password-toggle {
    display: inline-flex;
    flex: 0 0 2.8rem;
    width: 2.8rem;
    min-width: 2.8rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid rgba(93, 106, 98, 0.15);
    padding: 0;
    background: linear-gradient(180deg, rgba(246, 250, 245, 0.98), rgba(238, 245, 237, 0.98));
    color: #344054;
    font: inherit;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.auth-password-shell .auth-password-toggle:hover {
    color: var(--auth-green);
    background: rgba(238, 247, 240, 0.98);
}

.auth-password-shell .auth-password-toggle:focus-visible {
    outline: 0.2rem solid rgba(25, 135, 84, 0.18);
    outline-offset: -0.22rem;
    color: var(--auth-green-dark);
}

.auth-password-toggle-icon {
    width: 1rem;
    text-align: center;
    pointer-events: none;
}

/*
 * Evita duplicar o reveal/clear nativo de motores Microsoft quando estes
 * pseudo-elementos existem. Não ocultamos controlos de extensões ou gestores
 * de passwords, nem pseudo-elementos WebKit associados a credenciais.
 */
.auth-input-shell input[type="password"]::-ms-reveal,
.auth-input-shell input[type="password"]::-ms-clear,
.auth-password-shell input[data-password-visibility-enhanced]::-ms-reveal,
.auth-password-shell input[data-password-visibility-enhanced]::-ms-clear {
    display: none;
}

@media (max-width: 640px) {
    .username-regenerate-button {
        width: 100%;
        justify-self: stretch;
    }
}