/* =========================================================
   MISSION - LOGIN PAGE
   Sfondo responsive pagina di login
   ========================================================= */

/*
   Wrapper principale della pagina di login.

   Scopo:
   - applicare lo sfondo solo alla login
   - occupare sempre tutta l'altezza del viewport
   - mantenere il box di login centrato
   - adattarsi correttamente a PC, tablet e smartphone
*/
.mission-login-page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    background-image:  url('../../app_custom/atitech/img/background/slider-top-01.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.content-area{
    padding:0px !important;
}

/*
   Contenitore Bootstrap interno.

   Scopo:
   - mantenere la normale griglia Bootstrap
   - garantire una corretta spaziatura verticale
   - stare sopra lo sfondo
*/
.mission-login-container {
    position: relative;
    z-index: 1;
}

/*
   Card del form di login.

   Scopo:
   - rendere leggibile il form sopra l'immagine
   - dare un effetto leggermente moderno senza alterare Bootstrap
*/
.mission-login-card {
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    backdrop-filter: blur(4px);
}

    /*
   Campi input nella pagina di login.

   Scopo:
   - migliora leggermente la leggibilità e la dimensione touch
   - utile su smartphone e tablet
*/
    .mission-login-card .form-control {
        min-height: 44px;
    }

    /*
   Pulsante login.

   Scopo:
   - rende il pulsante più comodo anche da mobile
*/
    .mission-login-card .btn {
        min-height: 44px;
        font-weight: 500;
    }

/*
   Responsive smartphone.

   Scopo:
   - riduce gli spazi laterali
   - evita che la card sembri troppo grande su schermi piccoli
*/
@media (max-width: 576px) {

    .mission-login-page {
        align-items: center;
        background-position: center center;
    }

    .mission-login-card {
        border-radius: 12px;
    }

        .mission-login-card .card-body {
            padding: 24px 20px !important;
        }
}