/* style.css */

/* Style général */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 100vh; /* Hauteur complète de l'écran */
    overflow: hidden; /* Pas de défilement */
}

.login-container {
    width: 100%;
    max-width: 400px; /* Limiter la largeur sur écrans larges */
    background: white;
    padding: 20px;
    border-radius: 15px; /* Coins arrondis */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* Ombre portée douce */
    text-align: center; /* Centrer le contenu */
    box-sizing: border-box; /* Inclure padding et bordure dans la largeur */
}

.logo {
    width: 150px; /* Taille du logo */
    margin: 0 auto 20px; /* Centré avec espace en bas */
}

input {
    display: block;
    width: calc(100% - 20px); /* S'adapte au conteneur */
    margin: 10px auto; /* Espacement vertical */
    padding: 12px 15px;
    border: none; /* Pas de bordure */
    border-radius: 25px; /* Coins arrondis */
    background-color: #f0f0f0; /* Fond léger */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre douce */
    font-size: 16px;
    outline: none; /* Pas de contour */
    box-sizing: border-box;
}

input:focus {
    box-shadow: 0 0 10px rgba(58, 150, 255, 0.3); /* Effet focus */
}

button {
    width: calc(100% - 20px); /* Largeur adaptée */
    margin: 20px auto 0; /* Espacement au-dessus */
    padding: 12px;
    background: #ff6a8a; /* Couleur du bouton */
    color: white;
    border: none;
    border-radius: 25px; /* Coins arrondis */
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre portée */
    transition: all 0.3s ease; /* Transition pour le hover */
}

button:hover {
    background: #ff5670;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Ombre plus forte au survol */
}

/* Responsive pour mobile */
@media screen and (max-width: 768px) {
    .login-container {
        width: 90%; /* Utilise presque toute la largeur de l'écran */
        padding: 15px; /* Réduction des marges internes */
    }

    input, button {
        width: calc(100% - 20px); /* S'ajuste toujours au conteneur */
        font-size: 14px; /* Taille réduite pour mobile */
        padding: 10px; /* Réduction du padding */
    }

    .logo {
        width: 120px; /* Réduction de la taille du logo */
    }
}

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f9f9f9;
}

.dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%; /* Prend toute la largeur */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}

/* Footer */
.dashboard-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    background: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    width: 100%; /* Prend toute la largeur */
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
}

/* Contenu entre le header et le footer */
.dashboard-content {
    margin-top: 70px; /* Hauteur approximative du header */
    margin-bottom: 70px; /* Hauteur approximative du footer */
    padding: 10px;
    overflow-y: auto; /* Permet le défilement si nécessaire */
}


/* Logo */
.logo-dashboard {
    height: 50px; /* Augmenter la taille du logo */
    margin-left: 20px; /* Espace entre le logo et le bord gauche */
    display: inline-block; /* S'assurer qu'il reste dans le flux */
    vertical-align: middle; /* Alignement vertical si d'autres éléments existent */
}

/* Bouton Déconnexion */
.logout-form {
    margin: 0; /* Supprimer les marges par défaut */
}

.logout {
    background: #FF5670; /* Couleur de fond */
    border: none;       /* Pas de bordure */
    width: 40px;        /* Largeur du cercle */
    height: 40px;       /* Hauteur du cercle */
    border-radius: 50%; /* Forme circulaire */
    display: flex;      /* Flexbox pour aligner le contenu */
    align-items: center; /* Centre vertical */
    justify-content: center; /* Centre horizontal */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre portée */
    cursor: pointer;    /* Curseur en pointeur */
    overflow: hidden;   /* Empêche tout débordement */
    margin-right: 50px; /* Espace entre le bouton et le bord droit */
}

.logout img {
    width: 100%; /* Réduit la taille de l'image pour qu'elle reste dans le cercle */
    height: auto; /* Conserve les proportions */
    display: block; /* Évite les espaces blancs supplémentaires */
}

.menu-item {
    width: 50px;
    height: 50px;
    background: #ddd;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container du bouton QR Code */
.qr-scanner {
    position: fixed;
    bottom: 80px; /* Juste au-dessus du footer */
    right: 20px; /* Position à droite */
    width: 60px; /* Taille du bouton */
    height: 60px; /* Taille du bouton */
    background: #fff; /* Fond blanc */
    border-radius: 50%; /* Cercle parfait */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ombre portée */
    display: flex; /* Centrer l'icône à l'intérieur */
    align-items: center; /* Centre vertical */
    justify-content: center; /* Centre horizontal */
    z-index: 100; /* Toujours au-dessus */
    overflow: hidden; /* Empêche l'icône de déborder */
}

/* Bouton QR Code */
.qr-scanner .qr-button {
    all: unset; /* Réinitialise les styles par défaut */
    width: 100%; /* S'adapte au container parent */
    height: 100%; /* S'adapte au container parent */
    display: flex; /* Centrer le contenu */
    align-items: center; /* Centre vertical */
    justify-content: center; /* Centre horizontal */
    cursor: pointer; /* Pointeur au survol */
}

/* Icône QR Code */
.qr-scanner img {
    width: 50%; /* Taille de l'icône ajustée pour ne pas déborder */
    height: auto; /* Conserve les proportions */
    display: block; /* Supprime les marges internes de l'image */
}