/*
    Pagine del percorso di accesso: login, scelta del fattore MFA, verifica del codice,
    registrazione, recupero e reimpostazione della password.

    Nascono con la card a "w-25 + min-width: 480px": su un telefono da 390 px la card e' piu'
    larga del viewport e la schermata risulta tagliata. Qui la card diventa fluida con un tetto
    di 480 px, cosi' sopra quella larghezza la resa e' identica a prima e sotto si adatta.

    Le spaziature abbondanti delle viste (mb-5, mt-5) vengono compresse solo dentro la card e
    solo sotto il breakpoint, per non riscrivere la struttura di sei viste e per non toccare il
    desktop di un pixel.
*/

.auth-page {
    min-height: 100vh;
    padding-left: 1rem;
    padding-right: 1rem;
}

.auth-card {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.auth-card .auth-logo {
    max-width: 280px;
    width: 100%;
    height: auto;
}

.auth-card .auth-footer-logo {
    width: 96px;
    height: auto;
}

@media (max-width: 575.98px) {
    /* Su uno schermo basso il centramento verticale spinge la parte alta della card fuori
       dallo schermo: meglio ancorarla in alto e lasciare che sia il contenuto a decidere. */
    .auth-page > .d-flex {
        align-items: flex-start !important;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .auth-card .card-body {
        padding: 1rem;
    }

    .auth-card .mb-5 {
        margin-bottom: 1rem !important;
    }

    .auth-card .mt-5 {
        margin-top: 1rem !important;
    }

    .auth-card .mt-4,
    .auth-card .mb-4 {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .auth-card .auth-logo {
        max-width: 220px;
    }

    .auth-card .auth-footer-logo {
        width: 72px;
    }
}