/* Navbar - Version de base pour ordinateur */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: #f8f8f8;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Section Logo + Texte */
.navbar h1 {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
    padding-left: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    white-space: nowrap;
    flex-grow: 1;
    text-align: center;
}

/* Ajuste les styles pour le logo */
.navbar img {
    width: 10.625rem;
    height: auto;
    margin-right: 1.25rem;
    flex-shrink: 0;
}
/* Barre de recherche */
.navbar .search-bar {
    flex-grow: 1;
    margin: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 18.75rem;
}

.navbar .search-bar input[type="text"] {
    padding: 0.375rem;
    font-size: 1rem;
    border: 0.0625rem solid #ddd;
    border-radius: 0.25rem;
    width: 100%;
}

.navbar .search-bar input[type="text"]:focus {
    outline: none;
}

/* Boutons d'actions */
.navbar .actions {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
    flex-wrap: nowrap; /* Empêche les boutons de passer à la ligne */
}

.navbar .actions a {
    padding: 0.625rem 0.9375rem;
    font-size: 1rem;
    text-decoration: none;
    color: #fff;
    border-radius: 0.3125rem;
    white-space: nowrap;
}

.navbar .btn-login {
    background-color: #007bff;
}

.navbar .btn-logout {
    background-color: #dc3545;
}

.navbar .btn-menu {
    background-color: #28a745;
}


/* Styles pour les écrans de taille tablette (jusqu'à 1024px) */
@media (max-width: 64rem) {

    .navbar {
        padding: 1rem 1.5rem;
    }

    .navbar h1 {
        font-size: 1.3rem;
        padding-left: 1rem;
    }

    .navbar img {
        width: 9.375rem;
    }

    .navbar .search-bar {
        margin: 0 1rem;
    }

    .navbar .actions a {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
    }
}

/* Styles pour les petits écrans (mobiles jusqu'à 768px) */
@media (max-width: 48rem) {
    .navbar {
        padding: 0.5rem 1rem;
    }

    .navbar h1 {
        font-size: 1.3rem;
        padding-left: 0.5rem; !important;
    }

    .navbar img {
        width: 7.5rem;
    }

    .navbar .search-bar {
        margin: 0 0.3125rem;
    }

    .navbar .actions a {
        padding: 0.2rem 0.3rem;  /* Réduction du padding des boutons */
        font-size: 1rem; /* Réduction de la taille du texte */
    }
}

/* Styles pour les très petits écrans (mobiles très petits) */
@media (max-width: 30rem) {
    .navbar {
        flex-direction: row; /* Reste en ligne */
        padding: 0.5rem;
    }

    .navbar h1 {
        font-size: 1.1rem;
        padding-left: 0.2rem; !important;
    }

    .navbar img {
        width: 6.25rem;
        margin-bottom: 0.625rem;
    }

    .navbar .search-bar {
        max-width: 80%;
        margin: 0.5rem 0;
    }

    .navbar .actions {
        gap: 0.2rem; /* Espace plus petit entre les boutons */
    }

    .navbar .actions a {
        padding: 0.15rem 0.25rem; /* Encore plus petit */
        font-size: 1rem; /* Taille de texte encore plus petite */
    }
}

/* Popup */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 0.0625rem solid #ccc;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    padding: 1.25rem;
    z-index: 1000;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.name {
    font-size: 1.5rem;
    margin: 0;
    /*padding-right: 20.3125rem;*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    white-space: nowrap;
    flex-grow: 1;
    text-align: center;
}

input {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    width: 100%;
    border-color: black;
    border-radius: 0.8rem;
}

/* Mode sombre */
.dark-mode {
    background-color: #121212 !important;
    color: #ffffff !important;
}

.dark-mode .navbar {
    background-color: #1f1f1f !important;
    box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .navbar h1 {
    color: #ffffff !important;
}

.dark-mode .navbar img {
    filter: brightness(0.8);
}

.dark-mode .navbar .search-bar input[type="text"] {
    background-color: #2a2a2a !important;
    border: 0.0625rem solid #555 !important;
    color: #ffffff !important;
}

.dark-mode .navbar .search-bar input[type="text"]::placeholder {
    color: #bbbbbb !important;
}

.dark-mode .navbar .actions a {
    background-color: #444 !important;
    color: #ffffff !important;
}

.dark-mode .popup {
    background-color: #1f1f1f !important;
    border-color: #555 !important;
    color: white !important;
}

.dark-mode .overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.dark-mode input {
    background-color: #222 !important;
    border-color: #666 !important;
    color: white !important;
}

/* Mode sombre pour les boutons */
.dark-mode .btn-login {
    background-color: #0056b3 !important;
}

.dark-mode .btn-logout {
    background-color: #a00000 !important;
}

.dark-mode .btn-menu {
    background-color: #1c7c32 !important;
}

.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-container input {
    width: 100%;
    padding-right: 40px; /* Espace pour l'icône */
}

.password-container button {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
}


/* Style de base pour les boutons */
.btn-save, .btn-close {
    padding: 10px 20px; /* Espacement intérieur */
    border: none; /* Pas de bordure */
    border-radius: 5px; /* Coins arrondis */
    font-size: 16px; /* Taille de la police */
    cursor: pointer; /* Curseur en forme de main */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animation au survol */
    margin: 10px 5px; /* Marge entre les boutons */
}

/* Style spécifique pour le bouton "Enregistrer" */
.btn-save {
    background-color: #4CAF50; /* Vert */
    color: white; /* Texte blanc */
}

/* Style au survol pour le bouton "Enregistrer" */
.btn-save:hover {
    background-color: #45a049; /* Vert plus foncé */
    transform: scale(1.05); /* Légère augmentation de la taille */
}

/* Style spécifique pour le bouton "Fermer" */
.btn-close {
    background-color: #f44336; /* Rouge */
    color: white; /* Texte blanc */
}

/* Style au survol pour le bouton "Fermer" */
.btn-close:hover {
    background-color: #d32f2f; /* Rouge plus foncé */
    transform: scale(1.05); /* Légère augmentation de la taille */
}

/* Style pour les boutons lorsqu'ils sont désactivés */
.btn-save:disabled, .btn-close:disabled {
    background-color: #cccccc; /* Gris */
    cursor: not-allowed; /* Curseur "non autorisé" */
    transform: none; /* Pas d'effet de zoom */
}