/* assets/styles/login.css */

/* Forcer le conteneur racine à remplir l'écran sans transition visible */
html, body {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: #3c4146 !important; /* Couleur de secours immédiate */
    overflow: hidden;
}

/* S'assurer que la classe login-page prend la main */
.login-page {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh !important;
}

/* On applique la couleur ardoise à l'arrière-plan complet */
body.login-page {
    /* Code couleur exact de votre échantillon */
    background-color: #3c4146 !important; 
    background-image: none !important;
}

/* Le bloc de connexion central redevient blanc pour un contraste fort */
.login-box .card {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 8px; /* Optionnel : coins légèrement arrondis */
    color: #333333 !important; /* Texte sombre pour la lisibilité */
}

/* On s'assure que le titre du logo reste blanc pour ressortir sur l'ardoise */
.login-logo a {
    color: #ffffff !important;
    font-weight: 700;
}

/* Ajustement des icônes à l'intérieur des champs */
.input-group-text {
    background-color: #f4f6f9 !important;
    border-color: #ced4da !important;
    color: #777777 !important;
}

/* Assure que la page occupe tout l'espace disponible */
html, body.login-page {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3c4146 !important;
}

/* S'assure que le conteneur principal (login-box) est centré verticalement */
.login-box {
    margin: 0 !important;
    width: 360px; /* Taille standard pour login-box */
}

/* Ajustement pour mobile : on ajoute une marge latérale */
@media (max-width: 576px) {
    .login-box {
        width: 95% !important; /* Espace réduit à 2,5% de chaque côté */
        margin: 0 auto !important;
    }
    
    .login-box .card {
        margin: 0 5px; /* Marge interne très fine pour ne pas coller totalement */
    }
}