input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 0px white inset !important;
}

body, html {
    background-repeat: no-repeat;
    background-position: initial !important;
    background-attachment: initial !important;
    background-size: auto !important;
}

body, html, .login-content, .auth-content {
    height: 100%;
    margin: 0;
}

.background {
    background: linear-gradient(135deg, var(--login-ground, var(--mud-palette-secondary)), var(--mud-palette-primary));
    min-height: 100dvh !important;
}

/* Nas telas anonimas (login, esqueci a senha, redefinicao) o fundo divide o wrapper com o banner de
   ambiente, que fica no fluxo. Dimensionar o fundo com 100dvh cheios em cima desse banner estouraria
   a viewport e produziria uma barra de rolagem vertical desnecessaria. Em vez disso, o wrapper vira
   uma coluna de exatamente uma viewport: o banner mantem a altura natural e o fundo preenche o resto. */
.min-h-screen {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.min-h-screen > .background {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0 !important;
}

.min-h-screen > .background > * {
    flex: 1 1 auto;
    min-height: 0 !important;
}

/* Telas anonimas com cartao unico e centralizado (esqueci a senha, redefinicao, nao encontrada). */
.auth-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
}

.auth-column-sm {
    width: 500px !important;
    max-width: 100%;
}

.auth-box {
    border: solid 1px var(--mud-palette-lines-default);
    border-radius: 8px;
    width: 100%;
    padding: 20px;
    align-self: center;
    background-color: var(--mud-palette-surface);
}