* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    background-image: url('Images/first1.jpg'); /* Chemin vers l'image */
    background-size: cover; /* L'image couvre tout le fond */
    background-position: center; /* Centrer l'image */
    background-repeat: no-repeat; /* Ne pas répéter l'image */
    background-attachment: fixed; /* Fixer l'image de fond */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Eviter le défilement horizontal */

}

/* Assurez-vous que le body ne provoque pas de défilement */
body, html {
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* Empêche le défilement horizontal */
}



.container {
    display: flex;
    height: 100vh; /* Assure que la hauteur de la conteneur est pleine hauteur de la fenêtre */
}

/* Style de la barre latérale */
.sidebar {
    width: 250px;
    color: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.8);  /* Fond sombre */
    background-image: url('path/to/your-watermark-image.png');  /* Image en filigrane */
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;  /* Fusion de l'image pour l'effet de filigrane */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);  /* Ombre portée pour la profondeur */
}

/* Éléments dans la barre latérale */
.sidebar a {
    color: #fff;
    padding: 10px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Effet de survol pour éclairer l'onglet (pas de changement de couleur de fond entier) */
.sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.2);  /* Légère éclaircissement de l'onglet */
    transform: scale(1.05);  /* Légère mise en évidence avec un agrandissement */
}

/* Pour les titres dans la sidebar */
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar p {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);  /* Ombre portée pour améliorer la lisibilité */
}


/* Pour le texte, vous pouvez rendre les titres ou certains éléments plus visibles */
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar p {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);  /* Ombre portée légère sur le texte pour améliorer la lisibilité */
}


.sidebar .button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.sidebar .button i {
    font-size: 18px;
}

/* Style pour l'en-tête */
.app-header {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre sous l'en-tête */
    border-bottom: 2px solid #007bff; /* Ligne de séparation */
}

/* Style pour le nom de l'application */
.app-name {
    font-family: 'Georgia', serif; /* Choisissez une police élégante */
    font-weight: bold;
    font-size: 1.5em; /* Taille plus grande pour mettre en valeur */
    color: #007bff; /* Couleur distinctive */
    font-family: 'Raleway', sans-serif;

}



.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.logo-text {
    font-size: 32px; /* Taille du texte */
    color: #ffffff; /* Couleur du texte (blanc) */
    font-weight: bold; /* Texte en gras */
    text-transform: uppercase; /* Texte en majuscules */
    letter-spacing: 2px; /* Espacement entre les lettres */
}

.logo-text:hover {
    color: #ffc107; /* Changement de couleur au survol */
    transition: color 0.3s ease;
}


.logo-img {
    width: 80%; /* Réduit la taille du logo */
    height: auto; /* Garde le rapport d'aspect */
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    margin: 15px 0;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 15px 20px; /* Plus d'espace autour du texte pour un look bouton */
    border-radius: 5px; /* Coins arrondis pour un look moderne */
    transition: background 0.3s, transform 0.3s; /* Ajout d'une transition pour les effets */
    background: #444; /* Couleur de fond par défaut */
}

nav ul li a:hover {
    background: #575757; /* Couleur au survol */
    transform: scale(1.05); /* Effet d'agrandissement au survol */
}

nav ul li a.button {
    background: transparent; /* Le fond devient transparent */
    color: #fff; /* Couleur du texte et des icônes */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    font-size: 18px;
    text-decoration: none;
    transition: color 0.3s;
}

nav ul li a.button:hover {
    color: #ffc107; /* Couleur lors du survol */
}


.main-content {
    flex: 1;
    padding: 20px;
}

/* Style général pour le header */
header {
    background-color: #343a40; /* Couleur de fond plus sombre pour un contraste */
    color: #ffffff; /* Texte en blanc pour une meilleure lisibilité */
    padding: 20px 40px; /* Espacement augmenté pour un look plus aéré */
    border-radius: 12px; /* Coins encore plus arrondis */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée */
    margin-bottom: 30px; /* Espacement supplémentaire sous le header */
    width: 60%; /* Augmentation de la largeur à 90% pour une meilleure utilisation de l'espace */
    max-width: 1200px; /* Largeur maximale augmentée pour les grands écrans */
    margin-left: auto; /* Centrer horizontalement */
    margin-right: auto; /* Centrer horizontalement */
    display: flex; /* Utilisation de Flexbox pour aligner le contenu */
    align-items: center; /* Centrer verticalement les éléments */
    justify-content: space-between; /* Espacement entre les éléments */
}


/* Titre du header */
header h2 {
    font-size: 2em; /* Taille du texte */
    color: #ffffff; /* Couleur du texte */
    margin-bottom: 10px; /* Espacement sous le titre */
    text-align: left; /* Alignement à gauche */
}

/* Paragraphe du nombre total de produits */
header p {
    font-size: 1.5em; /* Taille du texte du nombre */
    color: #ffffff; /* Couleur par défaut du texte */
    font-weight: normal;
    text-align: left; /* Alignement à droite */
}

/* Spécifique pour le nombre total de produits */
.total-produits {
    font-size: 1.5em; /* Taille du texte du nombre */
    color: #28a745; /* Vert */
    font-weight: bold; /* Rendre le texte en gras */
    display: inline-block; /* Empêcher la nouvelle ligne et permettre une mise en forme plus fluide */
}

/* Style pour le total du stock */
.total-stock {
    font-size: 1.5em;  /* Taille du texte */
    color: #28a745;    /* Couleur verte */
    font-weight: bold; /* Texte en gras */
}



.button-group {
    display: flex;
    justify-content: flex-start; /* Aligne les boutons à gauche */
    margin: 20px 0; /* Ajoute de l'espace au-dessus et en dessous des boutons */
}

.action-button {
    background-color: #007bff; /* Couleur du bouton */
    color: white; /* Couleur du texte */
    border: none; /* Supprime la bordure par défaut */
    padding: 10px 15px; /* Rembourrage pour les boutons */
    border-radius: 5px; /* Coins arrondis */
    margin-right: 10px; /* Espace entre les boutons */
    cursor: pointer; /* Change le curseur au survol */
    transition: background 0.3s; /* Ajoute une transition au changement de couleur */
}

.action-button:hover {
    background-color: #0056b3; /* Couleur au survol */
}

.table-container {
    margin: 20px 0; /* Ajoute de l'espace au-dessus et en dessous du tableau */
    overflow-x: auto; /* Permet le défilement horizontal si le tableau est trop large */
}

#salesChart {
    width: 100%;
    max-width: 600px;
    margin: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

tr {
    background-color: white; /* Assure que toutes les lignes ont un fond blanc */
}

tr:hover {
    background-color: #f1f1f1;
}

.stock-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.stock-table th, .stock-table td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

.stock-table th {
    background-color: #007bff;
    color: white;
}

.stock-table tr {
    background-color: white; /* Applique un fond blanc à toutes les lignes */
}

.stock-table tr:hover {
    background-color: #e1e1e1; /* Applique une couleur de survol plus claire */
}







.product-image {
    width: 50px; /* Ajuste la largeur de l'image */
    height: auto; /* Garde le ratio de l'image */
}
.modal {
    display: none; /* Cacher par défaut */
    position: fixed; /* Rester au même endroit */
    z-index: 1000; /* Au-dessus des autres éléments */
    left: 0;
    top: 0;
    width: 100%; /* Largeur de 100% */
    height: 100%; /* Hauteur de 100% */
    overflow: auto; /* Ajouter du défilement si nécessaire */
    background-color: rgba(0, 0, 0, 0.5); /* Fond noir avec transparence */
}

.modal-content {
    background-color: #c03939;
    margin: 15% auto; /* 15% depuis le haut et centrer */
    padding: 20px; /* Espacement interne */
    border: 1px solid #888;
    width: 400px; /* Largeur du modal */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Ombre douce */
}

.modal-content h3 {
    margin-bottom: 15px; /* Espacement sous le titre */
}



.modal-content input, 
.modal-content textarea {
    width: 100%; /* Largeur de 100% pour les champs */
    padding: 10px; /* Espacement interne */
    margin: 10px 0; /* Marges verticales */
    border: 1px solid #ccc; /* Bordure légère */
    border-radius: 4px; /* Coins arrondis */
}

.modal-content button {
    background-color: #4CAF50; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 10px; /* Espacement interne */
    border: none; /* Pas de bordure */
    border-radius: 4px; /* Coins arrondis */
    cursor: pointer; /* Curseur de main */
    width: 100%; /* Largeur de 100% */
}

.modal-content button:hover {
    background-color: #45a049; /* Couleur au survol */
}

.modal-section {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.modal-section h4 {
    margin-bottom: 10px;
}


.close {
    color: #aaa; /* Couleur de la croix de fermeture */
    float: right; /* À droite */
    font-size: 28px; /* Taille */
    font-weight: bold; /* Gras */
}

.close:hover,
.close:focus {
    color: black; /* Couleur au survol */
    text-decoration: none; /* Pas de soulignement */
    cursor: pointer; /* Curseur de main */
}




.edit-button, .delete-button {
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur de main */
    color: #007bff; /* Couleur pour les icônes */
}

.edit-button:hover, .delete-button:hover {
    color: #0056b3; /* Couleur lors du survol */
}

.product-image {
    width: 50px; /* Largeur d'image */
    height: auto; /* Hauteur automatique pour garder le ratio */
}

td.critique {
    background-color: red; /* Pour le statut "Critique" */
}

td.alerte {
    background-color: orange; /* Pour le statut "Alerte" */
}

td.suffisant {
    background-color: green; /* Pour le statut "Suffisant" */
}

.filter-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; /* Ajoute de l'espace en dessous */
}

#search {
    width: 100%; /* Ajustez la largeur selon vos besoins */
    padding: 15px; /* Espace intérieur */
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Sélecteur de catégorie */
#categoryFilter {
    padding: 10px;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 20%;
}
/*

/* Styles pour masquer les formulaires */
.form-section {
    display: none;
    margin-top: 20px;
}

/* Formulaire de recherche */
form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

form input[type="text"] {
    width: 75%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form input[type="submit"] {
    width: 20%;
    padding: 10px;
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

form input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Tableau des achats */
#purchases-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

#purchases-history-table th, #purchases-history-table td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
}

#purchases-history-table th {
    background-color: #007bff;
    color: white;
}

#purchases-history-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

#purchases-history-table tr:hover {
    background-color: #f1f1f1;
}

.pagination a {
    margin: 0 5px;
    padding: 8px 15px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

.pagination a.active {
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
}

.pagination a:hover {
    background-color: #0056b3;
    color: white;
}


.notification {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.container {
    display: flex;
}

.sidebar {
    width: 200px;
}

.main-content {
    flex: 1;
    padding: 20px;
}

.categories {
    display: flex;
    flex-direction: column;
}

.category {
    margin-bottom: 20px;
}

.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espace entre les produits */
}

.product {
    background: #181212; /* Couleur de fond pour chaque produit */
    border: 1px solid #ddd; /* Bordure pour les produits */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px; /* Espacement interne */
    text-align: center; /* Centrer le texte */
    width: calc(25% - 15px); /* Quatre produits par ligne */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.2s; /* Transition douce pour l'animation */
}

.product img {
    max-width: 110px;
    max-height: 100px;
}

.product:hover {
    transform: translateY(-5px); /* Effet de survol */
}

.add-to-cart {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.add-to-cart:hover {
    background-color: #218838;
}

.cart-icon {
    position: fixed;
    top: 20px;
    right: 20px;
}

.cart-icon img {
    width: 50px;
    height: 50px;
}

#cart-count {
    background-color: red;
    color: white;
    padding: 5px 10px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
}


.charts {
    margin: 20px 0;
}

.statistics {
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background: #35424a;
    color: white;
}

.low-stock-alert {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ff0000;
    background-color: #ffe6e6;
}

.alert-box {
    padding: 10px;
    background-color: #f8d7da;
    border-left: 5px solid #ff0000;
}

.alert-box ul {
    list-style-type: none;
    padding: 0;
}

.alert-box li {
    margin: 5px 0;
}

#categorySalesChart {
    max-width: 300px;  /* Limite la largeur du graphique */
    max-height: 300px; /* Limite la hauteur du graphique */
    margin: 0 auto;    /* Centre le graphique horizontalement */
}

    .charts-container {
        display: flex;
        justify-content: space-between; /* Espace entre les graphiques */
        gap: 20px; /* Espace horizontal entre les graphiques */
    }

    .charts {
        flex: 1;
        max-width: 50%; /* Ajustez la taille pour qu'ils aient chacun la moitié de la largeur */
    }

    .cost-analysis {
        margin-top: 20px;
        text-align: center;
    }
    
    .table-costs {
        width: 60%;
        margin: 0 auto;
        border-collapse: collapse;
    }
    
    .table-costs th, .table-costs td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }
    
    .table-costs th {
        background-color: #f2f2f2;
        font-weight: bold;
    }
    
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
    }
    
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    
    input:checked + .slider {
        background-color: #2196F3;
    }
    
    input:checked + .slider:before {
        transform: translateX(26px);
    }
    .dark-theme {
        background-color: #121212;
        color: white;
    }
    
    .dark-theme .charts {
        background-color: #1e1e1e;
    }
    .table-container {
        display: flex; /* Utilisation de flexbox pour l'alignement */
        flex-direction: column; /* Empiler le tableau et la section en colonne */
        overflow-x: auto;
    max-width: 100%;
    }
    
    .total {
        margin-top: 20px; /* Espacement entre le tableau et la section totale */
        text-align: right; /* Alignement à droite */
    }
    
    .client-selection {
        margin-top: 10px; /* Espacement entre le label et le select */
    }
    
    /* Pour le bouton d'imprimer et enregistrer la vente */
    button {
        margin-right: 10px; /* Espacement entre les boutons */
    }

    /* Style de la section du rapport financier */
.financial-report {
    background-color: rgba(0, 0, 0, 0.8);  /* Fond sombre transparent */
    color: white;  /* Texte en blanc */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Style des éléments de rapport */
.report-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Couleur des montants (vert pour positif, rouge pour négatif) */
.report-item span:last-child {
    font-weight: bold;
}

.report-item span:last-child.positive {
    color: green;
}

.report-item span:last-child.negative {
    color: red;
}

/* Optionnel : ajout de la couleur au texte des labels */
.report-item span:first-child {
    font-weight: normal;
}

    
    .sidebar {
        position: fixed; /* Rend la sidebar fixe */
        top: 0; /* Positionne la sidebar en haut de la page */
        left: 0; /* Aligne la sidebar à gauche */
        width: 250px; /* Définir la largeur de la sidebar (ajustez selon vos besoins) */
        height: 100%; /* Prend toute la hauteur de la page */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Optionnel : ombre pour la sidebar */
        overflow-y: auto; /* Permet le défilement vertical si le contenu dépasse la hauteur */
        z-index: 1000; /* S'assure que la sidebar reste au-dessus du contenu */
    }
    

    .main-content {
        margin-left: 250px; /* Correspond à la largeur de la sidebar */
        padding: 20px; /* Ajoute un peu d'espace autour du contenu */
    }
    
    .status-critical {
        background-color: red;
        color: white;
    }
    
    .status-low {
        background-color: orange;
        color: white;
    }
    
    .status-normal {
        background-color: green;
        color: white;
    }
    

    /* Styles pour le conteneur du calendrier */
.calendar {
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles pour les jours de la semaine */
.days {
    display: flex;
    flex-wrap: wrap;
}

/* Styles pour chaque jour */
.day {
    flex: 1 0 14.28%; /* Chaque jour prend environ 1/7 de la largeur */
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd; /* Bordure légère pour chaque jour */
    box-sizing: border-box; /* Pour inclure le padding et la bordure dans la largeur totale */
    transition: background-color 0.3s;
}

.day.header {
    background-color: #f4f4f4; /* Couleur de fond pour les en-têtes de jour */
    font-weight: bold;
}

/* Styles pour les jours avec des ventes */
.day.filled {
    background-color: #e0f7fa; /* Couleur de fond pour les jours avec des ventes */
    cursor: pointer; /* Curseur de la souris sur les jours avec ventes */
}

/* Styles pour les jours vides */
.day.empty {
    background-color: #fff; /* Couleur de fond pour les jours vides */
    opacity: 0.5; /* Légèrement transparent */
}

/* Styles pour les détails des ventes */
#salesDetailsContainer {
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    background-color: #fafafa;
}

/* Styles pour le tableau des ventes */
#sales-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#sales-history-table th,
#sales-history-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

#sales-history-table th {
    background-color: #f4f4f4;
}

#sales-history-table tbody tr:hover {
    background-color: #f1f1f1; /* Couleur d'arrière-plan au survol */
}

.product-card {
    width: 200px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#searchForm input,
#searchForm select,
#searchButton {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}


.search-bar {
    display: flex;
    align-items: center;
    gap: 10px; /* Espace entre les éléments */
    width: 100%; /* Adapter à la largeur disponible */
    max-width: 600px; /* Limiter la largeur maximale */
}

.search-input {
    flex: 2; /* Prend plus d'espace que le select */
    padding: 5px;
}

.search-select {
    flex: 1;
    padding: 5px;
    white-space: normal; /* Permet au texte de s'afficher sur plusieurs lignes si nécessaire */
}



.search-button {
    padding: 5px 10px;
    cursor: pointer;
}

/* Section dashboard avec effet de transparence et filigrane */
.dashboard {
    position: relative;
    padding: 40px;
    background: rgba(0, 0, 0, 0.5); /* Fond sombre avec transparence */
    border-radius: 15px;
    backdrop-filter: blur(10px); /* Effet de flou */
    color: white;
    margin: 20px;
    max-width: 1200px; /* Largeur maximale pour éviter d'être trop large */
    justify-content: center;
}

/* Conteneur avec filigrane */
.dashboard-overlay {
    position: relative;
    z-index: 1;
}

/* Filigrane sombre */
.dashboard::before {
    content: "INVENIA";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    color: rgba(255, 255, 255, 0.1);
    z-index: 0;
    pointer-events: none;
}

/* Conteneur des graphiques */
.charts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Réduction de l'écart entre les graphiques */
    justify-content: center;
    max-width: 90%; /* Limiter la largeur maximale à 90% de la largeur disponible */
    margin: 0 auto; /* Centrer le conteneur */
    padding: 10px; /* Ajouter un peu de padding autour du conteneur */
}

/* Graphiques individuels */
.charts-container .chart {
    width: 300px; /* Réduction de la taille des graphiques */
    height: 200px; /* Ajuster la hauteur selon les besoins */
    margin-bottom: 20px; /* Espacement en bas des graphiques */
    flex-grow: 1; /* Permet aux graphiques de se développer si l'espace est disponible */
    min-width: 250px; /* Largeur minimale des graphiques pour garder une bonne présentation */
    max-width: 100%; /* Assurer que les graphiques ne dépassent pas la taille du conteneur */
}


.chart-box {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.chart-box h2 {
    color: white;
}

/* Affichage des statistiques */
.statistics-box {
    margin-top: 20px;
    text-align: center;
    color: white;
}

/* Texte et nombre en blanc */
.statistics-box p,
.statistics-box strong {
    color: white;
}

/* Canvas transparent */
canvas {
    background: transparent;
}

.kpi-container {
    display: flex;
    justify-content: center; /* Centrer les KPI */
    gap: 20px; /* Espacement entre les KPI */
    margin-top: 30px; /* Réduire l'espacement au-dessus */
    margin-bottom: 10px; /* Réduire l'espacement en dessous */
    flex-wrap: wrap; /* Permettre de passer à la ligne si nécessaire */
}

.kpi-card {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px; /* Réduire l'espacement interne */
    border-radius: 10px;
    text-align: center;
    width: 150px; /* Réduire la largeur */
    max-width: 200px; /* Largeur maximale */
    height: 100px; /* Limiter la hauteur */
    font-size: 14px; /* Réduire la taille du texte */
    transition: color 0.3s ease, background-color 0.3s ease;

}


/* Style des titres et paragraphes des cartes KPI */
.kpi-card h3 {
    font-size: 16px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.kpi-card p {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    color: inherit;
}

/* Changement de couleur au survol de la carte */
.kpi-card:hover {
    color: #ffc107; /* Couleur orange pure */
}

/* Statistiques générales */
h3 {
    margin-top: 20px; /* Réduction de l'espacement au-dessus */
    font-size: 18px; /* Réduction de la taille du texte */
    color: #ffffff;
}

p {
    font-size: 14px; /* Réduction de la taille du texte */
    color: #ffffff;
    margin: 0; /* Suppression des marges */
    line-height: 1.2; /* Réduction de l'interligne */
}


button.button {
    background-color: #007bff;
    padding: 10px 20px;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 10px;
}

button.button:hover {
    background-color: #ffc107;
}

/* Responsivité */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
    }

    .main-content {
        padding: 15px;
    }

    form {
        flex-direction: column;
    }

    form input[type="submit"] {
        width: 100%;
        margin-top: 10px;
    }
}






/* Conteneur d'icônes en haut à droite */
/* Icônes en haut à droite */

.top-right-icons {
    position: fixed; /* Position fixe pour être toujours visible */
    top: 20px; /* Décalage du haut */
    right: 20px; /* Décalage de la droite */
    display: flex;
    justify-content: flex-end; /* Aligner les icônes à droite */
    gap: 15px; /* Espacement entre les icônes */
    z-index: 9999; /* Assurer que les icônes soient au-dessus des autres éléments */
  }

.icon {
    background-color: #fff;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.icon:hover {
    transform: scale(1.1);
}

.side-panel {
    position: fixed;
    top: 90px;
    right: -350px;
    width: 350px;
    height: calc(100% - 50px); /* Ajuster la hauteur pour ne pas empiéter sur l'en-tête */
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
    color: #fff;
    padding: 20px;
    transition: right 0.3s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    overflow-y: auto;
}

.side-panel::before {
    content: "INVENIA";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.1); /* Texte en blanc avec faible opacité */
    z-index: -1; /* Placer le texte derrière le contenu */
}



.side-panel.closed {
    transform: translateX(100%); /* Panneau caché en dehors de l'écran */
}

.side-panel-content {
    margin-top: 50px;
}

#close-panel {
    background-color: #ff5733;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

#panel-title {
    font-size: 24px;
    margin-bottom: 20px;
}

#panel-body {
    font-size: 16px;
}


/* Style pour chaque icône */
.top-right-icons .icon {
  background-color: #fff; /* Fond blanc pour chaque icône */
  border-radius: 50%; /* Rendre les icônes rondes */
  padding: 10px; /* Espacement intérieur */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre portée */
  cursor: pointer; /* Curseur pointeur */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Effet au survol de l'icône */
.top-right-icons .icon:hover {
  background-color: #f0f0f0; /* Fond gris clair au survol */
  transform: translateY(-3px); /* Légère élévation au survol */
}

/* Style pour les icônes (ici avec Font Awesome) */
.top-right-icons .icon i {
  font-size: 24px; /* Taille des icônes */
  color: #333; /* Couleur des icônes */
}

/* Changer la couleur de l'icône au survol */
.top-right-icons .icon:hover i {
  color: #ffc107; /* Couleur bleue au survol */
}

/* Style du bouton d'exportation */
.btn-export {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-export:hover {
    background-color: #0056b3;
}

/* Style général pour la calculatrice */
#calculator-panel {
    width: 320px;
    height: 450px;
    position: fixed;
    top: 90px;
    right: -320px;
    background-color: #1e1e2f;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Entête de la calculatrice */
#calc-header {
    background-color: #292a3b;
    color: #fff;
    padding: 10px;
    text-align: center;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#calc-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Écran de la calculatrice */
#calc-display-container {
    padding: 10px;
    background-color: #f9f9fb;
}

#calc-display {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    text-align: right;
    border: none;
    border-radius: 10px;
    background-color: #e1e1e6;
    color: #333;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Boutons de la calculatrice */
.calc-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
}

.calc-buttons button {
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

/* Couleurs pour les différents types de boutons */
.calc-buttons button:not(.operator):not(.equals):not(.clear) {
    background-color: #4f5b66;
    color: #fff;
}

.calc-buttons .operator {
    background-color: #ff7043;
    color: #fff;
}

.calc-buttons .equals {
    background-color: #43a047;
    color: #fff;
}

.calc-buttons .clear {
    background-color: #e53935;
    color: #fff;
}

/* Effets de survol et clic */
.calc-buttons button:hover {
    transform: scale(1.05);
}

.calc-buttons button:active {
    transform: scale(0.98);
}

/* Bouton de fermeture */
#close-calculator-button {
    background-color: #e53935;
    color: #fff;
    padding: 5px;
    border: none;
    border-radius: 0 0 15px 15px;
    cursor: pointer;
    font-size: 14px;
}

#close-calculator-button:hover {
    background-color: #c62828;
}



/* Style général de la boîte de chat */
#communication-panel {
    width: 350px;
    height: 750px;
    position: fixed;
    top: 90px;
    right: -350px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Icônes de notifications à gauche (verticalement) */
#notification-icons {
    width: 60px;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Icônes individuelles */
#notification-icons .icon {
    font-size: 24px;
    color: #fff;
    margin-bottom: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}


#notification-icons .icon:hover {
    color: #f0b20e;
}

/* Entête de la boîte de chat */
#chat-header {
    background-color: #1e1e2f;
    color: #fff;
    padding: 10px;
    text-align: center;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#chat-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Conteneur du chat */
#chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #f9f9fb;
}

/* Zone d'affichage des messages */
#chat-output {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #ffffff;
}

/* Style des messages */
.chat-message {
    margin: 5px 0;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 80%;
    font-size: 14px;
    line-height: 1.4;
}

.user-message {
    background-color: #e1f5fe;
    color: #0077b6;
    align-self: flex-end;
}

.ai-message {
    background-color: #d1c4e9;
    color: #4527a0;
    align-self: flex-start;
}

/* Zone d'entrée des messages */
#chat-input-area {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

#user-input {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 14px;
}

#send-button {
    padding: 10px;
    border: none;
    border-radius: 50%;
    background-color: #0077b6;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.2s;
}

#send-button:hover {
    background-color: #005f8c;
}

/* Bouton de fermeture */
#close-button {
    background-color: #e53935;
    color: #fff;
    padding: 5px;
    border: none;
    border-radius: 0 0 15px 15px;
    cursor: pointer;
    font-size: 14px;
}

#close-button:hover {
    background-color: #c62828;
}

/* Style général pour le panneau de notifications */
#notification-panel {
    width: 350px;
    height: 750px;
    position: fixed;
    top: 90px;
    right: -420px;
    background-color: #1e1e2f;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: right 0.3s ease-in-out;
    display: flex;  /* Flexbox horizontal pour icônes et notifications */
    flex-direction: row;
    overflow: hidden;
}

/* Entête des notifications */
#notification-header {
    background-color: #292a3b;
    color: #fff;
    justify-content: space-between; /* Espacement entre les éléments */
    align-items: center; /* Aligner verticalement les éléments */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    padding: 10px;
    text-align: center;
}

#notification-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Conteneur des notifications à droite */
#notification-container {
    width: 340px;
    padding: 20px;
    background-color: #2d2d3b;
    flex: 1;
    display: flex;
    flex-direction: column;  /* Notifications listées verticalement */
    overflow-y: auto;
}

/* Liste des notifications */
#notification-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Sidebar des icônes à l'extrémité gauche */
#notification-sidebar {
    position: absolute;
    top: 20px;
    left: -40px; /* Décalage pour le placer à l'extrémité de la mini-page */
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #fff;
}

#notification-sidebar li {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
}

#notification-sidebar li i {
    font-size: 20px;
}

/* Effet sur hover pour chaque icône dans le menu */
#notification-sidebar li:hover {
    color: #f1c40f;
}

/* Notifications individuelles */
.notification-item {
    background-color: #4f5b66;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notification-item:hover {
    background-color: #394a5a;
}

#close-notification-button {
    background-color: #e53935;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 0 0 15px 15px;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: background-color 0.3s ease;
}

#close-notification-button:hover {
    background-color: #c62828;
}

/* Message de bienvenue */
.welcome-message {
    color: #999;
    text-align: center;
    font-size: 14px;
}

/* Animation pour l'apparition du panneau */
@keyframes slideIn {
    0% {
        right: -370px;
    }
    100% {
        right: 0;
    }
}

#notification-panel.open {
    animation: slideIn 0.3s forwards;
}

/* En-tête du panneau */
#contact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#contact-header h3 {
    font-size: 1.5em;
    margin: 0;
}

/* Icônes de contact */
#contact-icons {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

#contact-container {
    margin-top: 20px;
}
.contact-info {
    margin-bottom: 20px;
}
.contact-info h4 {
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-info p {
    margin: 0;
}

#start-chat-button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#start-chat-button:hover {
    background-color: #0056b3;
}

.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: url('images/first1.jpg') no-repeat center center fixed; /* Image de fond */
    background-size: cover; /* Image de fond couvre toute la page */
    position: relative;
}

/* Conteneur de connexion */
.login-container {
    background: rgba(255, 255, 255, 0.85); /* Fond semi-transparent */
    padding: 40px;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    backdrop-filter: blur(10px); /* Flou pour un effet moderne */
}

/* Logo flottant */
.floating-logo {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    animation: float 4s ease-in-out infinite;
}

.floating-logo img {
    width: 150px; /* Logo plus grand */
    height: 150px;
    border-radius: 50%;
    border: 3px solid #fff; /* Bordure blanche autour du logo */
}

/* Formulaire de connexion */
.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideIn 0.5s forwards;
}

.input-group {
    margin-bottom: 20px;
    width: 100%;
}

.input-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
}

.input-group input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    transition: border 0.3s ease;
}

.input-group input:focus {
    border-color: #007BFF; /* Accentuation lors du focus */
    outline: none;
}

.input-icon {
    position: relative;
    width: 100%;
}

/* Champs de saisie (input) */
.input-icon input {
    width: 100%;
    padding: 12px 12px 12px 40px; /* Espace pour l'icône */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    height: 45px; /* Taille uniforme */
}

/* Icônes à gauche des champs */
.input-icon i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #007BFF;
}

/* Changement de bordure lors du focus */
.input-icon input:focus {
    border-color: #007BFF;
    outline: none;}

.login-btn {
    background: #007BFF;
    color: #fff;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.login-btn:hover {
    background: #0056b3;
}

/* Style des messages d'erreur */
.error-message {
    color: #e74c3c;
    font-size: 14px;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f2dede;
    border-radius: 5px;
}

/* Animation du logo flottant */
@keyframes float {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -15px);
    }
}

/* Style pour la tagline */
.tagline {
    color: #333;
    font-size: 16px;
    margin-top: -10px;
    font-style: italic;
    font-weight: 400;
}

/* Style pour le nom de l'application */
.app-name {
    color: #007BFF;
    font-weight: bold;
}