.red-text {
    color: red;
    font-weight: bold;
}

.orange-text {
    color: orange;
    font-weight: bold;
}

.green-text {
    color: green;
    font-weight: bold;
}

/* Centrage du texte dans les cellules */
#portefeuille-table th,
#portefeuille-table td {
    text-align: center; /* Centre le texte horizontalement */
    vertical-align: middle; /* Centre le texte verticalement */
    padding: 12px 15px;
    border: 1px solid #ddd;
    white-space: nowrap; /* Évite les retours à la ligne */
}

#portefeuille-table th {
    font-weight: bold;
}

/* Assurer que l'en-tête du tableau garde un bon style */
#portefeuille-table thead {
    background-color: #005792;
    color: white;
    text-align: center;
}

/* Conteneur principal */
#portefeuille-container {
    display: flex;
    flex-direction: column; /* Par défaut, les éléments sont empilés */
    align-items: center;
    width: 100%;
    /*background-color: #f9f9f9;*/
    /*padding: 20px;*/
}

/* Conteneurs flexibles pour s'adapter à l'espace disponible */
.content-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between; /* Permet une bonne distribution */
}

/* Graph container */
.graph-container {
    flex: 1;
    min-width: 40%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Conteneur des filtres et options */
#filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Colonnes flexibles */
    gap: 20px;
    align-items: center;
    /*justify-content: center;*/
    justify-content: space-between; /* Espacement égal entre les éléments */
    background: #f2f3f4; /*#f1f1f1;*/
    padding: 15px;
    border-radius: 8px;
    width: 100%;
    /*max-width: 900px;  Ajuster selon la largeur souhaitée */
    /*margin-bottom: 15px;*/
}

/* Conteneur de la somme des capitalisations */
#market-cap-summary,
#update-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 15px;
    font-family: "Roboto";
}

.p-last-update {
    margin-bottom: 0px;
    font-size: 15px;
    font-family: "Roboto";
}

/* Groupement des filtres */
#filters {
    display: flex;
    align-items: center;
    gap: 15px;
}

#sort-by {
    width: auto; /* Permet au select de s'adapter au contenu */
    min-width: 150px; /* Largeur minimale pour éviter qu'il soit trop petit */
    max-width: 200px; /* Empêche qu'il prenne trop de place */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Organisation des cases à cocher */
#column-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Colonnes adaptatives */
    gap: 10px;
    background: #f2f3f4;/*#f1f1f1;*/
    padding: 15px;
    border-radius: 8px;
    width: 100%;
    /*max-width: 900px;*/
    margin-bottom: 20px;
}

/* Style des labels (form & checkboxes) */
#filter-form label,
#column-selection label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-family: "Roboto";
}

/* Style des inputs */
#filter-form input[type="number"],
#filter-form select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

/* Formatage des éléments dans le form */
#filter-form label,
#filter-form select,
#filter-form input[type="number"] {
    font-size: 15px;
    font-family: "Roboto";
}

/* Responsive pour mobiles */
@media (max-width: 768px) {
    #filter-form {
        grid-template-columns: 1fr; /* Empile tout sur une seule colonne */
        flex-direction: column; /* Empile les cases sur petits écrans */
        align-items: flex-start;
    }

    #column-selection {
        grid-template-columns: repeat(2, 1fr); /* Deux colonnes sur mobile */
    }
}

/* Adaptation lorsque l'écran est plus petit */
@media (max-width: 1024px) {
    .content-wrapper {
        flex-direction: column; /* Empile les éléments */
        align-items: center;
    }

    .table-container {
        width: 100%; /* Le tableau prend toute la largeur */
    }

    .graph-container {
        width: 100%; /* Le graphe s'étend sous le tableau */
    }
}

.p-total-market-cap {
    margin-bottom: 0px;
    font-size: 15px;
    font-family: "Roboto";
}

/* Conteneur du tableau avec scroll horizontal uniquement pour le tableau */
.table-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* Permet le scroll horizontal uniquement ici */
    /*border: 1px solid #ddd;*/
    padding-bottom: 10px; /* Ajoute un peu d'espace pour l'esthétique */
}

/* Style du tableau */
#portefeuille-table {
    width: auto; /* Laisse le tableau s'adapter à son contenu */
    min-width: 100%; /* Assure un affichage correct */
    border-collapse: collapse;
    font-size: 15px;
    font-family: "Roboto";
}

/* Permet de défiler horizontalement si nécessaire */
.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* Active le scroll horizontal si nécessaire */
    white-space: nowrap; /* Évite les retours à la ligne */
    /*border: 1px solid #ddd;*/ /* Ajoute une bordure pour bien voir le cadre */
}

/* Graphique */
#performanceChart {
    width: 100%;
    height: 400px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
}

/* Styles des cases à cocher */
#filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px; /* Espacement entre les éléments */
    margin-bottom: 20px;
}

#filter-form label {
    display: flex;
    align-items: center;
    gap: 5px;
}