/* Fichier CSS (historic.css) */

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
}

.table-info-head {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 10px;
    font-size: 26px;
    text-align: left;
    font-weight: bold;
    font-family: "Arial", sans-serif;
}

.table-info-body {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px;
    font-size: 15px;
    text-align: left;
    color: gray;
    font-family: "Arial", sans-serif;
}

.table-link {
    font-weight: bold;
    text-decoration: none;
    color: #007C70;
}

/* ========================================
   DATE DE MISE À JOUR
======================================== */
.last-update-date {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 2px;
    margin-bottom: 7px;
    padding: 10px;
    font-size: 11px;
    font-style: italic;
    color: #b8b8b8;
    text-align: left;
    font-family: "Arial", sans-serif;
    font-weight: normal;
}

/* ========================================
   Tableau de paris
======================================== */

table {
  border-collapse: collapse;           /* Supprime les bordures entre les cellules */
  width: 90%;                          /* Augmenté de 85% à 90% pour plus d'espace */
  font-size: 13px;
  border-spacing: 8px;                /* Espacement entre les cellules */
  margin-top: 20px;                  /* Ajustez la marge supérieure en fonction de la hauteur de votre barre de navigation */
}

.table-header {
  font-size: 13px;                     /* Ajustez la taille de police selon vos besoins */
  text-align: center;                  /* Centrer horizontalement */
  color: white;                        /* Texte en blanc */
  font-family: "Arial", sans-serif;    /* Police Arial ou la police de votre choix */
  font-weight: bold;                   /* Texte en gras */
  justify-content: center;
  margin: 0 auto;                      /* Pour centrer le tableau horizontalement */
  width: 90%;                          /* Ajusté pour correspondre à la largeur du tableau */
}

table-body {
  font-size:13px;
}

table th, table td {
  padding: 8px;                       /* Espacement entre le texte et les bords de la cellule */
  padding: 8px;                       /* Espacement entre le texte et les bords de la cellule */
  text-align: center;                  /* Alignement du texte au centre */
  border-top: 1px solid #E8E8E8;       /* Bordure supérieure légèrement grise */
  border-bottom: 1px solid #E8E8E8;    /* Bordure inférieure légèrement grise */
  font-family: "Arial", sans-serif;    /* Police Arial */
}

table th {
  background-color: #007C70;           /* Fond vert foncé pour les titres */
  color: white;                        /* Texte blanc pour les titres */
  font-weight: bold;                   /* Texte en gras pour les titres */
  padding: 9px;                       /* Espacement supplémentaire pour les titres */
  white-space: nowrap;                 /* Empêche les retours à la ligne dans les en-têtes */
}

table tr:hover {
    background-color: #f5f5f5;         /* Gris léger lors du survol */
}

/* Container spécifique pour le tableau avec défilement horizontal */

.table-scroll-container {
  overflow-x: hidden;
  margin-left: auto;
  margin-right: auto;
  width: calc(83% + 100px); /* Ajusté pour correspondre à la largeur du tableau de 90% */
}

/* Styles pour l'intérieur le fs font à l'intérieur du tableau */

.gray-text {
    color: #757171;
}

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

.win-value {
    color: green;
}

.loss-value {
    color: red;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

/* Styles pour le tri de la table */

.sort-icon {
    display: none;
}

.sortable:hover .sort-icon {
    display: inline-block;
}

/* Styles pour la pagination */

.pagination-info {
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
    text-align: left;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #757171;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 40px;
  width: 100%;
}

.pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.pagination ul li {
    display: inline-block;
    margin: 0 5px; /* Ajustez si nécessaire */
    cursor: pointer; /* Assurez-vous que le style du curseur est correct */
}

.pagination ul li.active {
  background-color: #007C70;
  color: white;
}

.pagination ul li:hover {
  background-color: #e0e0e0; /* Fond gris très clair lors du survol */
}

.pagination ul li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333; /* Couleur du texte */
  background-color: #fff; /* Couleur de fond */
  border: 1px solid #ddd; /* Bordure grise */
  border-radius: 4px;
}

.pagination ul li.active a,
.pagination ul li a:hover {
  color: #fff; /* Couleur du texte actif et au survol */
  background-color: #007C70; /* Couleur de fond pour l'élément actif ou au survol */
  border-color: #007C70; /* Bordure de la même couleur que le fond pour l'élément actif ou au survol */
}

.pagination ul li.disabled a,
.pagination ul li.disabled a:hover {
  color: #ccc; /* Gris pour désactiver la couleur du texte */
  background-color: #eee; /* Gris pour désactiver la couleur de fond */
  cursor: default;
  pointer-events: none;
}

/* Rendre le design adaptatif */

@media (max-width: 800px) {

    /* Cacher les colonnes sur mobile */
    .hide-on-mobile {
        display: none;
    }

      /* Ajouter des styles spécifiques pour ajuster la taille du tableau sur les mobiles si nécessaire */
    .table-scroll-container {
        overflow-x: auto; /* Calcule pour ajouter les marges initiales si nécessaire */
    }

    .table-info-head {
        margin-left: 10px;      /* Enlève les marges par défaut du paragraphe. */
        margin-right: 10px;
        padding: 10px 10px;     /* Réduisez le padding à gauche et à droite à 150 pixels */
    }

    .table-info-body {
        margin-left: 10px;      /* Enlève les marges par défaut du paragraphe. */
        margin-right: 10px;
        padding: 10px 10px;     /* Réduisez le padding à gauche et à droite à 150 pixels */
    }

    /* DATE DE MISE À JOUR MOBILE */
    .last-update-date {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 2px;
        margin-bottom: 7px;
        padding: 10px;
        font-size: 10px;
        text-align: left;
    }

    .table-header {
      font-size: 12px;                     /* Ajustez la taille de police selon vos besoins */
      text-align: center;                  /* Centrer horizontalement */
      color: white;                        /* Texte en blanc */
      font-family: "Arial", sans-serif;    /* Police Arial ou la police de votre choix */
      font-weight: bold;                   /* Texte en gras */
      justify-content: center;
      margin: 0 auto;                      /* Pour centrer le tableau horizontalement */
      width: 90%;                          /* Ajusté pour correspondre à la largeur du tableau */
    }

    table {
        margin-left: auto; /* Centre le tableau horizontalement */
        margin-right: auto;
        width: 90%; /* Augmenté de 85% à 90% pour correspondre au desktop */
    }

    .pagination ul li a {
    padding: 6px 8px; /* Un peu moins de padding sur les petits écrans */
    }

    .pagination ul li {
        margin: 0 3px; /* Moins d'espace entre les éléments sur les petits écrans */
    }

    .table-header {
      font-size: 10px;
    }

    table {
      font-size: 10px;
    }

    table th, table td {
      padding: 6px;
    }

    /* Maintenir le white-space: nowrap en mobile aussi */
    table th {
        white-space: nowrap; /* Empêche les retours à la ligne dans les en-têtes */
    }

}