body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #333;
  margin: 0;
  padding: 0;
}

/* ————————————————————————————————————
   Variables CSS (conservez dans base.html si déjà définies)
   ———————————————————————————————————— */
:root {
  --bg-header: #22303f;
  --bg-row: #19212b;
  --bg-panel: #1b2530;
  --bg-hover: #263447;
  --border: #2c3a4a;
  --accent: #00d6b4; /* vert accent pour le score gagnant */
  --text-main: #e0e0e0;
  --text-gray: #a0a0a0; /* gris clair pour le texte secondaire */
  --loss-red: #ff5b5b; /* rouge pour le score perdant */
}

/* Style du modal Boxscore */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  overflow: auto; /* Permet un scroll global si le contenu dépasse */
}

.modal-dialog {
  max-width: 90vw; /* Ne jamais dépasser 90% de la largeur de la fenêtre */
  max-height: 90vh; /* Ne jamais dépasser 90% de la hauteur de la fenêtre */
  margin: 1rem auto; /* Centrage vertical si le contenu est plus petit */
}

/* Ajustements spécifiques pour mobile */
@media screen and (max-width: 767px) {
  .modal-dialog {
    max-height: 80vh; /* Réduit la hauteur sur mobile pour ne pas toucher les bords */
    margin: 10vh auto; /* Force un espace en haut et en bas */
    width: 90%; /* Légèrement plus étroit */
  }
}

.modal-content {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  max-height: 90vh; /* Limite la hauteur totale du contenu pour forcer le scroll */
  overflow: hidden;
}

/* Style spécifique pour le BoxScore et les noms de joueurs */
#boxscoreModal .modal-body table td {
  white-space: nowrap !important; /* Force une seule ligne */
  overflow: hidden !important; /* Cache le débordement */
  text-overflow: ellipsis !important; /* Ajoute les points de suspension (...) */
  max-width: 100px; /* Limite la largeur */
}

/* Spécifique pour les cellules contenant les noms des joueurs dans le boxscore */
#boxscoreModal .modal-body table td:nth-child(2) {
  max-width: 120px; /* Plus d'espace pour les noms */
}

/* Force une seule ligne sur les noms dans la table du boxscore */
#boxscoreModalBody table tr td:nth-child(2) * {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important; /* Force block pour éviter les sauts de ligne */
  width: 100% !important;
}

/* Pour les listes de joueurs et leurs noms dans d'autres modales */
.modal-body li span:not(.player-ranking) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block;
  max-width: calc(100% - 40px);
}

@media screen and (max-width: 767px) {
  .modal-body li {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .modal-body li img,
  .modal-body li .avatar-placeholder {
    flex-shrink: 0; /* Empêche l'avatar de se rétrécir */
  }

  /* Spécifique pour mobile: force vraiment une seule ligne */
  #boxscoreModalBody table td * {
    display: inline-block !important;
    max-width: 100% !important;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--accent);
}

.close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-gray);
  cursor: pointer;
}

.modal-body {
  padding: 1rem;
  color: var(--text-main);
  overflow-y: auto; /* Scroll vertical si le contenu dépasse */
  max-height: calc(90vh - 3.5rem);
  /* 3.5rem ≃ hauteur du header + marge interne ; ajuste si nécessaire */
}

.modal-body::-webkit-scrollbar {
  width: 8px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.modal-body::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

.stats-mobile-selector-container {
  display: none;
}

/* === Conteneur global === */
.content-wrapper {
  color: #fff;
}
.row-wrapper {
  display: flex; /* 2 colonnes côte à côte */
  gap: 30px; /* espace entre gauche et droite */
}
/* Par défaut (desktop) : on affiche le nom complet, on masque les initiales */
.team-name-initials {
  display: none;
}
.team-name-full {
  display: inline;
  white-space: nowrap;
  max-width: none; /* Pas de limitation sur PC */
  color: var(
    --text-gray
  ); /* Utilise la couleur grise définie dans les variables */
  text-transform: none; /* Suppression des majuscules */
}

/* Style pour les équipes gagnantes - applicable sur toutes les tailles d'écran */
.team-win {
  font-weight: 500; /* Gras léger pour équipes gagnantes */
  color: var(--text-main); /* Couleur principale plus claire */
}

/* Sur mobile : afficher les noms courts des équipes au lieu des noms complets */
@media screen and (max-width: 767px) {
  .team-name-full {
    display: none !important;
  }
  .team-name-initials {
    display: inline !important;
    font-size: 0.9rem;
    font-weight: normal; /* Sans gras par défaut */
    color: var(--text-gray);
    max-width: none; /* Pas de troncature */
    white-space: nowrap;
    text-transform: none; /* Pas de majuscules */
  }

  /* S'assurer que les noms courts des équipes gagnantes sur mobile ont le même gras */
  .team-name-initials.team-win {
    font-weight: 500 !important; /* Même gras que les équipes gagnantes sur desktop */
  }

  /* Style pour les équipes gagnantes */
  .team-win {
    font-weight: 500 !important; /* Gras léger pour équipes gagnantes */
    color: var(--text-main) !important; /* Couleur principale plus claire */
  }

  /* Réduire la taille de l'heure du match sur mobile */
  .match-time {
    font-size: 0.78rem !important;
    min-width: 38px !important;
    flex: 0 0 42px !important;
    padding-left: 12px !important; /* Plus d'espace à gauche */
    margin-left: 4px !important; /* Marge supplémentaire */
  }
  .team-line {
    width: 100%;
    display: flex;
    align-items: center;
    overflow: visible; /* Assurer que le contenu est visible */
    padding: 0 5px 0 0 !important; /* Uniquement padding à droite, rien ailleurs */
    margin: 0 !important; /* Supprimer toutes les marges */
    min-height: auto !important; /* Hauteur minimale automatique */
    height: auto !important; /* Hauteur automatique */
  }

  /* Ajuster le bloc des équipes sur mobile */
  .match-teams {
    gap: 5px !important; /* Espacement plus important entre les équipes */
    margin: 0 !important; /* Supprimer toutes les marges */
    padding-top: 2px !important; /* Léger espacement en haut */
    padding-bottom: 2px !important; /* Léger espacement en bas */
  }

  /* Assurer que la ligne de match n'a pas d'espace supplémentaire sur mobile */
  .match-compact-row {
    padding: 4px 0 0 !important; /* Ajout d'espace en haut */
    min-height: auto !important;
  }

  /* Ajuster la hauteur des lignes de score sur mobile */
  .score-line {
    min-height: auto !important;
    height: auto !important;
  }
}
/* --------------------------------------------------------
   Styles pour la nouvelle structure compacte des matchs du jour
   -------------------------------------------------------- */
.match-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--border); /* Ligne supérieure pour le premier match */
}

.match-container {
  background: var(--bg-row);
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.match-compact-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent; /* Fond transparent car géré par le container parent */
  margin: 0;
  padding: 0px 0px 0px 0px; /* Suppression de l'espacement en bas */
  position: relative;
  min-height: 65px;
  border: none;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.13s;
  overflow: visible; /* Permet au contenu de s'étendre */
}
.match-container:hover {
  background: var(--bg-hover);
}

.match-time {
  flex: 0 0 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--text-gray);
  padding: 0 8px;
  min-width: 48px;
  height: 100%;
}
.match-teams {
  flex: 2 1 340px;
  display: flex;
  flex-direction: column;
  gap: 4px; /* Plus d'espace entre les équipes */
  justify-content: center;
  min-width: 160px;
  max-width: 100%;
  padding-left: 12px; /* Plus de marge à gauche */
  margin-top: 3px; /* Légère marge en haut */
  margin-bottom: 3px; /* Légère marge en bas */
}
.team-line {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
}
.team-logo-mini {
  width: 25px;
  height: 25px;
  object-fit: contain;
  border-radius: 50%;
  /* Fond très léger pour donner une impression "de nuit bleutée" */
  background: rgba(255, 255, 255, 0.05);
  /* Bord fin, légèrement visible sur fond sombre */
  border: 0.0625rem solid rgba(255, 255, 255, 0.15); /* équivaut à 1px */
  /* Padding autour du logo */
  padding: 0.25rem;
}
.match-scores {
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 36px;
  padding-right: 6px;
  position: relative;
}
.match-boxscore {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 100%;
  margin-left: 8px;
  cursor: pointer;
}
.match-boxscore .boxscore-icon {
  margin: 0 auto;
}
.score-line {
  font-size: 0.95rem; /* Taille réduite */
  font-weight: normal; /* Sans gras */
  color: var(--text-main);
  min-height: 22px; /* Hauteur réduite */
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.score-win {
  color: var(--accent);
}
.score-loss {
  color: var(--text-gray);
}
.boxscore-icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  margin-top: 2px;
}
.boxscore-icon {
  cursor: pointer;
  margin-left: 2px;
  vertical-align: middle;
  fill: #a0a0a0;
  transition: fill 0.2s;
}
.boxscore-icon:hover {
  fill: var(--accent);
}
.location-row {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-gray);
  opacity: 0.7;
  padding: 0 0 5px;
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: var(--bg-row);
}

/* Ajustement du texte de localisation sur mobile pour éviter le chevauchement */
@media screen and (max-width: 767px) {
  .location-row {
    padding: 3px 0 4px !important; /* Espacement plus confortable */
    font-size: 0.7rem; /* Légèrement plus petit sur mobile */
    line-height: 1.2 !important; /* Hauteur de ligne légèrement augmentée */
    margin-top: 3px !important; /* Marge supérieure plus importante */
  }
}
/* --------------------------------------------------------
   1) Structure des colonnes
   -------------------------------------------------------- */
.left-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 20px; /* même espacement vertical que dans votre mockup */
}
.left-column {
  flex: 0 0 70%; /* prend 70% de la largeur */
}
.right-column {
  flex: 0 0 30%; /* prend 30% de la largeur */
}

/* --------------------------------------------------------
   Combo-drop “statsCategory” : flat & vert accent
   -------------------------------------------------------- */
.stats-category-selector-container {
  position: relative;
  margin-left: 10px;
  display: inline-block;
}

/* Cache l’UI native et impose notre style */
.stats-category-selector-container .stats-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Fond & texte */
  background-color: var(--bg-row);
  color: var(--text-gray);
  font-size: 0.85rem;

  /* Bordure & rayon */
  border: 1px solid var(--border);
  border-radius: 4px;

  /* Dimensions & padding */
  height: 60px;
  padding: 0 2.5em 0 0.75em;
  box-sizing: border-box;

  /* Flèche SVG verte intégrée à droite */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%2300d6b4' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.6em auto;

  /* Pour forcer le vert sur la flèche et la sélection au clavier */
  accent-color: var(--accent);

  /* Transition focus */
  transition: border-color 0.2s;
}

.stats-category-selector-container .stats-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Cache l’expand bouton IE/Edge */
.stats-category-selector-container .stats-select::-ms-expand {
  display: none;
}

/* Options par défaut */
.stats-category-selector-container .stats-select option {
  background-color: var(--bg-panel);
  color: var(--text-gray);
}

/* Survol & option sélectionnée en vert */
.stats-category-selector-container .stats-select option:hover,
.stats-category-selector-container .stats-select option:checked {
  background-color: var(--accent) !important;
  color: #fff !important;
}

/* --------------------------------------------------------
   Custom dropdown “statsCategory” – green only
   -------------------------------------------------------- */
.stats-category-selector-container .dropdown {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  font-size: 0.85rem;
}

.dropdown__toggle {
  background: var(--bg-row);
  color: var(--text-gray);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5em 1em;
  height: 60px;
  line-height: 1.2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 140px;
}

.dropdown__toggle:hover,
.dropdown__toggle:focus {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.dropdown__arrow {
  margin-left: 0.5em;
  transition: transform 0.2s;
}

.dropdown.open .dropdown__arrow {
  transform: rotate(180deg);
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-top: 4px;
  list-style: none;
  padding: 4px 0;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 10;
}

.dropdown.open .dropdown__menu {
  display: block;
}

.dropdown__menu li {
  padding: 0.5em 1em;
  color: var(--text-gray);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.dropdown__menu li:hover,
.dropdown__menu li.selected {
  background: var(--accent);
  color: #fff;
}

/* --------------------------------------------------------
   3) Carte de classement (“table‐like”)
   -------------------------------------------------------- */
/* La classe .with-table-style (remplace .with-table‐style) applique un fond identique au header du tableau de matchs.
   On utilise var(--bg-header) pour le header (= même nuance de bleu) et var(--bg-panel) pour le corps. */
.with-table-style {
  background: var(--bg-header); /* même bleu que le header du gameday-table */
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  position: relative; /* pour positionnement de l’overlay */
}

/* On isole le contenu des classements pour qu’il puisse défiler indépendamment */
.stats-card-body {
  background: var(--bg-panel); /* corps de la carte en bg-panel */
  padding: 0.75rem 1rem; /* même padding que le tableau des matchs */
  display: flex;
  flex-direction: column;
  gap: 12px; /* espace entre chaque liste */
  color: var(--text-gray);
  font-size: 0.85rem;
  /* hauteur fixée pour forcer le scroll interne (ajustez  calc(...) selon la hauteur disponible réelle) */
  max-height: calc(
    100vh - 220px
  ); /* 220px ≃ (marges + barre du haut + titres) */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) var(--bg-panel);
}

/* Overlay “Chargement…” */
.stats-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  z-index: 10;
}

/* --------------------------------------------------------
   4) Listes de stats (PPG, ASS, REB, etc.) : même nuance de bleu en fond des lignes (bg-row)
   -------------------------------------------------------- */
.stats-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats-container li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  background: var(
    --bg-row
  ); /* même nuance que les lignes impaires du gameday-table */
  padding: 6px 8px;
  border-radius: 4px;
}
.stats-container li img {
  border-radius: 10%;
  object-fit: contain;
  width: 40px;
  height: 40px; /* plus compact que 50px initial */
}
/* --------------------------------------------------------
   Forcer la case « calendrier » à 60×60 comme les .btn-day
   -------------------------------------------------------- */
.days-and-calendar .calendar-btn {
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid var(--accent);
  background-color: #242a38;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}
.days-and-calendar {
  display: flex;
  align-items: center;
  gap: 5px; /* vous aviez déjà 5px entre les jours, mais on veut aussi ce gap ici */
}
/* Au survol, on garde la même logique qu’avec .btn-day */
.days-and-calendar .calendar-btn:hover {
  background-color: var(--accent);
  color: #fff;
}

/* On s’assure que l’icône soit centrée */
.days-and-calendar .calendar-btn i {
  font-size: 1rem;
}
.top-row {
  display: flex;
  align-items: center; /* centre verticalement la ligne “jours + calendrier” et le select */
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  background: #333;
  border-radius: 4px;
}
/* On part du principe que .stats-card-body a déjà overflow-y: auto et une hauteur max fixée */
.stats-card-body::-webkit-scrollbar {
  width: 8px; /* même largeur que pour .gameday-table-wrapper */
}
.stats-card-body::-webkit-scrollbar-thumb {
  background: var(--border); /* même couleur que la thumb du tableau */
  border-radius: 4px; /* même rayon */
}
.stats-card-body::-webkit-scrollbar-track {
  background: var(--bg-panel); /* même background que le track du tableau */
}
/* --------------------------------------------------------
   5) Responsive (<768px)
   -------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* 1) Masquer le sélecteur d’origine dans la top-row */
  .stats-category-selector-container {
    display: none;
  }

  /* 2) Afficher la copie mobile du sélecteur (à insérer sous left-column) */
  .stats-mobile-selector-container {
    display: block;
    margin: 0;
  }

  /* 4) Faire prendre 100% de largeur à left-column et right-column */
  .left-column,
  .right-column {
    flex: 0 0 100%;
  }

  /* 5) Adapter la colonne de droite (classement) */
  .right-column {
    flex: 0 0 100%; /* déjà à 100% mais on le conserve pour clarté */
  }

  /* 6) Ajuster l’apparence du select mobile (optionnel / déjà stylé ailleurs) */
  .stats-mobile-selector-container .stats-select,
  .stats-category-selector-container .stats-select {
    font-size: 0.8rem;
  }

  /* 7) Adapter le corps de la carte de stats */
  .stats-card-body {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    max-height: calc(100vh - 200px);
  }

  /* 8) Ajuster les lignes de la liste de stats */
  .stats-container li {
    font-size: 0.8rem;
  }
  .stats-container li img {
    width: 36px;
    height: 36px;
  }

  /* 9) Réduire le border-radius sur la carte droite */
  .with-table-style {
    border-radius: 6px;
  }
}

/* ===========================================
   1) Style des cases “jours” (inchangé)
   =========================================== */
.btn-day {
  background-color: #242a38;
  color: #fff;
  text-decoration: none;
  border: 1px solid #00d6b4;
  padding: 8px 12px;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; /* largeur fixe identique pour chaque case */
  height: 60px; /* hauteur fixe identique pour chaque case */
  box-sizing: border-box;
}
.btn-day:hover {
  background-color: #00d6b4;
  color: #fff;
}
.selected-day {
  background-color: #00d6b4 !important;
  color: #fff !important;
}

/* ===========================================
   2) Adaptation du bouton “Calendrier” (inchangé)
   =========================================== */
.calendar-btn {
  background-color: #242a38;
  border: 1px solid #00d6b4;
  color: #fff;
  /* Même padding & dimensions que .btn-day : */
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  box-sizing: content-box;
  cursor: pointer;
  transition: background-color 0.3s;
}
.calendar-btn:hover {
  background-color: #00d6b4;
  color: #fff;
}
.calendar-btn i {
  font-size: 1rem;
}

/* ===========================================
   3) Alignement « jours + calendrier »
   =========================================== */
.days-range-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* === Cartes (left & right) === */
.custom-card-left-aligned,
.custom-card-right-aligned {
  background-color: #19212e;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
}

/* === Sélecteur “stats” droite === */
.stats-select {
  background-color: #242a38;
  border: 1px solid var(--accent);
  color: #fff;
  width: 100%;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.85rem;
}
.stats-select option {
  background-color: #242a38;
  color: #fff;
}

.stats-container {
  color: #fff;
}
.stats-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stats-container li {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.stats-container li img {
  border-radius: 10%;
  object-fit: contain;
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
.player-ranking {
  font-weight: bold;
  margin-right: 8px;
}

/* ————————————————————————————————————
   Gamday Table (compact & harmonisé)
   ———————————————————————————————————— */

/* Wrapper scroll */
.gameday-table-wrapper {
  background: var(--bg-panel);
  border-radius: 8px;
  border: 1px solid var(--border);

  /* Hauteur maximale pour laisser défiler le contenu à l’intérieur */
  max-height: calc(
    100vh - 220px
  ); /* Ajustez 220px selon la hauteur de votre barre supérieure + marges */
  overflow-y: auto;
  overflow-x: auto;
}
.gameday-table-wrapper::-webkit-scrollbar {
  width: 8px;
}
.gameday-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.gameday-table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

/* Table principale */
.gameday-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background: transparent;
  color: var(--text-gray); /* texte en gris clair */
  font-size: 0.85rem; /* plus compact */
}

/* Header sticky */
.gameday-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-header);
  color: var(--accent);
  font-weight: 400;
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  z-index: 2;
}

/* Zebra striping */
.gameday-table tbody tr:nth-child(odd) {
  background: var(--bg-row);
}

/* Lignes et hover */
.gameday-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s;
}
.gameday-table tbody tr:hover {
  background-color: var(--bg-hover);
  cursor: pointer;
}

/* Cellules */
.gameday-table td {
  padding: 0.5rem 0.75rem;
  text-align: center;
  vertical-align: middle;
  font-size: 0.85rem;
  color: var(--text-gray);
}
.gameday-table th[style*="visibility: hidden"],
.gameday-table td[style*="visibility: hidden"] {
  padding: 0;
  border: none;
  width: 0;
  overflow: hidden;
}

/* Team-cell : logo + nom */
.gameday-table .team-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 100%;
  vertical-align: middle;
}
.gameday-table .team-cell img.team-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
  flex-shrink: 0;
}
/* — Team-cell : on laisse le texte s’afficher entièrement — */
.gameday-table .team-text-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  max-width: none;
  overflow: visible;
  height: 32px;
}
.gameday-table .team-text-container .team-name {
  /* On supprime white-space: nowrap et text-overflow. Le texte peut aller à la ligne ou s’étendre. */
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-gray);
  margin-bottom: 1px;
}

/* Heure (plus petite) */
.gameday-table .game-time span {
  font-size: 0.75rem;
  color: var(--text-gray);
}

/* Scores colorés */
.gameday-table .boxscore-icon {
  fill: var(--text-gray) !important;
  color: var(--text-gray) !important;
  font-weight: 600;
  font-size: 0.9rem;
}
.gameday-table .score-win {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}
.gameday-table .score-loss {
  color: var(--loss-red);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Location-cell */
.gameday-table .location-cell .arena {
  font-weight: bold;
  font-size: 0.85rem;
  display: block;
  color: var(--text-gray);
  margin-bottom: -2px;
  line-height: 1.02;
}
.gameday-table .location-cell .city {
  font-size: 0.7rem;
  color: var(--text-gray);
  display: block;
  margin-top: -2px;
  line-height: 1.02;
}

/* —————————————————————————————————————————————
   1) FORCER LE DÉFILEMENT HORIZONTAL SUR “PHABLETS/TELEPHONES”
      ET GARDER LE DÉFILEMENT VERTICAL NORMAL
   ————————————————————————————————————————————— */
.gameday-table-wrapper {
  overflow-y: auto; /* scroll vertical normal */
  overflow-x: auto; /* ajouter un scroll horizontal sous 768px */
}

/* On veille à ce que la table occupe sa largeur naturelle */
.gameday-table {
  table-layout: auto;
  width: 100%;
}

/* ———————————————————————————————————————————————————
   MEDIA QUERY POUR ÉCRANS ≤ 768px (iPhone Plus/Max, Galaxy S, etc.)
   ——————————————————————————————————————————————————— */
@media screen and (max-width: 768px) {
  .days-and-calendar .btn-day.selected-day,
  .days-and-calendar .selected-day {
    background: red !important;
    color: yellow !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    box-shadow: 0 0 16px 4px #00d6b4 !important;
  }
  /* 1) MASQUER LA COLONNE “LOCATION” (en‐tête + cellules) */
  .gameday-table thead th:nth-child(6),
  .gameday-table tbody td.location-cell {
    display: none !important;
  }

  /* 2) RÉDUIRE LES ESPACE­MENTS ET TAILLE DE POLICE DANS LE TABLEAU */
  .gameday-table thead th,
  .gameday-table td {
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
  }

  /* 3) DIMINUER LA TAILLE DES LOGOS D’ÉQUIPE */
  .gameday-table .team-cell img.team-logo {
    width: 24px;
    height: 24px;
    padding: 2px;
  }

  /* 4) TRANSFORMER LE SÉLECTEUR EN BOUTONS SUR MOBILE */
  /* Masquer tous les sélecteurs existants sur mobile */
  select,
  .custom-select,
  .form-select,
  [class*="dropdown"],
  [id*="dropdown"],
  [class*="select"],
  [id*="select"] {
    display: none !important;
  }

  /* Container spécifique pour nos boutons de statistiques */
  .stat-buttons-container {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    text-align: center;
  }

  /* Afficher les boutons sur mobile */
  .mobile-stat-buttons {
    display: flex;
    justify-content: space-between;
    margin: 0.5rem 0;
  }

  /* Style des boutons similaire aux boutons des jours */
  .mobile-stat-buttons button {
    flex: 1;
    margin: 0 0.2rem;
    padding: 0.5rem 0 0.3rem 0;
    background: none !important;
    border: none;
    border-bottom: 3px solid transparent !important;
    color: #aaa !important;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s, border-bottom 0.2s;
    outline: none;
  }

  .mobile-stat-buttons button.active {
    color: #00d6b4 !important;
    border-bottom: 3px solid #00d6b4 !important;
    background: none !important;
    font-weight: 700;
  }

  /* 4) NOM D’ÉQUIPE PLUS COMPACT */
  .gameday-table .team-text-container .team-name {
    font-size: 0.75rem;
  }

  /* 5) HEURE (HOUR) MOINS “GRANDE” */
  .gameday-table .game-time span {
    font-size: 0.65rem;
  }

  /* 6) MASQUER LE TEXTE DE “LOCATION-CELL” SI BESOIN */
  .gameday-table .location-cell .arena,
  .gameday-table .location-cell .city {
    display: none;
  }

  /* 7) SUR LES NOMS D’ÉQUIPE : PASSER DES NOMS COMPLETS AUX INITIALES */
  .team-name-full {
    display: none;
  }
  .team-name-initials {
    display: inline;
    font-weight: 600; /* pour que les initiales soient bien visibles */
    font-size: 0.75rem; /* ajustez si besoin */
    text-transform: uppercase;
  }

  /* 8) ADAPTER LE CONTENEUR “JOURS + CALENDRIER”
       POUR QU’IL FASSE EXACTEMENT LA MÊME LARGEUR QUE LE TABLEAU */
  .top-row {
    flex-wrap: wrap; /* on autorise les éléments à passer à la ligne si nécessaire */
  }

  /* On place la liste des jours à pleine largeur et on autorise le scroll horizontal */
  .days-and-calendar {
    display: flex;
    width: 100%;
    overflow-x: auto; /* permet un scroll horizontal fluide */
    -webkit-overflow-scrolling: touch;
    padding: 0; /* on enlève tout padding parasite */
    margin: 0; /* on enlève tout margin parasite */
    gap: 4px; /* un petit écart entre chaque case jour */
    box-sizing: border-box;
  }

  /* Réduire un peu la taille des cases « jours » pour en faire tenir plus */
  .days-and-calendar .btn-day {
    flex: 0 0 auto; /* ne pas laisser le bouton s’étirer, mais permettre le scroll */
    width: 48px; /* un peu plus compact que 60px */
    height: 48px; /* même hauteur que la largeur pour rester carré */
    padding: 0; /* on garde peu ou pas de padding pour le texte */
    font-size: 0.6rem; /* plus petit pour faire tenir la date */
    line-height: 1.2; /* pour centrer verticalement le texte */
    margin-right: 4px;
    box-sizing: border-box;
  }

  /* Ajuster l’apparence du bouton calendrier à côté */
  .days-and-calendar .calendar-btn {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0; /* on garde uniquement l’icône */
    font-size: 0.9rem; /* on agrandit légèrement l’icône pour qu’elle soit visible */
    margin-right: 4px;
    box-sizing: border-box;
  }
  .days-and-calendar .calendar-btn i {
    font-size: 1.1rem;
  }

  /* 9) « Carte des classements » (colonne de droite) à 100% */
  .right-column {
    flex: 0 0 100%; /* s’étend en largeur sur mobile, sous le tableau des matchs */
    margin-top: 16px; /* petit espace au-dessus pour dégager visuellement */
  }

  /* 10) Ajustements pour le sélecteur de stats */
  .stats-category-selector-container .stats-select {
    font-size: 0.8rem;
    height: 48px; /* réduire la hauteur pour que tout reste cohérent */
  }

  /* 11) Ajustements pour le contenu des stats (PPG, ASS, etc.) */
  .stats-card-body {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    max-height: calc(100vh - 200px);
  }

  /* Conteneur scrollable avec espace pour boutons */
  .stats-card-body {
    position: relative; /* Établir un contexte de positionnement */
    padding-top: 0px; /* Espace pour les boutons sticky */
  }

  /* Sticky boutons stats mobile (positionnement sticky) */
  .sticky-stat-buttons,
  #mobile-stat-buttons-container,
  .stat-buttons-container {
    position: sticky !important; /* Forcer le sticky pour qu'il reste fixe */
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100 !important; /* Valeur élevée pour être au-dessus du contenu */
    background: var(--bg-panel);

    padding-bottom: 0px; /* Espace en dessous */
    display: flex;
    justify-content: space-around;
  }
  .stats-container li {
    font-size: 0.8rem;
    gap: 6px;
  }
  .stats-container li img {
    width: 36px;
    height: 36px;
  }
  .with-table-style {
    border-radius: 6px;
  }

  /* 12) ÉTENDRE L’INPUT “date” POUR COUVRIR LE BOUTON CALENDRIER */
  /*    Le bouton fait 48×48 px en mobile, donc on applique la même taille à l’input */
  #game_day {
    width: 48px !important;
    height: 48px !important;
  }
  /* --- FORCE JOUR SÉLECTIONNÉ MOBILE --- */
  .days-and-calendar a.btn-day.selected-day {
    background-color: var(--accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 214, 180, 0.1) !important;
    /* Ajouter une bordure blanche pour plus de visibilité */
    border: 2px solid #fff !important;
  }
}

/* ————————————————————————————————————
   Star Players (compactés)
   ———————————————————————————————————— */
.extra-row {
  background-color: transparent; /* Suppression du fond */
  border-top: none; /* Suppression de la bordure */
  padding: 0;
  width: 100%;
  display: block;
}

.star-players-container {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  padding: 0;
  color: var(--text-gray);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
}

.extra-row > td {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: visible !important;
}

.team-star {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  background: transparent; /* Suppression du fond */
  padding: 12px 18px;
  border-radius: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: none;
}

.team-star h5 {
  text-align: center;
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.star-players-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}
.star-player {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  background: transparent;
  border-radius: 4px;
}
.star-player:hover {
  background: transparent;
}
.star-player .player-photo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  margin-right: 8px;
}
.star-player .player-info {
  display: flex;
  flex-direction: column;
}
.star-player .player-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 2px;
}
.star-player .player-stats {
  font-size: 0.8rem;
  color: var(--text-gray);
  line-height: 1.2;
}

/* Responsive (<768px) pour Star Players */
@media screen and (max-width: 767px) {
  .star-players-container {
    flex-direction: column;
  }
  .team-star {
    width: 100%;
    flex: 1 1 auto;
    margin-bottom: 10px;
  }
  .match-compact-row {
    padding-bottom: 24px;
  }
  .match-location {
    bottom: 4px;
    font-size: 0.65rem;
    background-color: rgba(25, 33, 43, 0.8);
    padding: 1px 0;
    margin-top: 2px;
  }
}

@media screen and (max-width: 1000px) and (min-width: 768px) {
  .star-players-container {
    gap: 12px;
    padding: 4px 2px 4px 2px;
  }
  .team-star {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 50%;
    padding: 6px 4px;
    margin: 0;
  }
  .star-players-list {
    gap: 7px;
  }
  .star-player {
    padding: 4px 4px;
  }
  .star-player .player-photo {
    width: 32px;
    height: 32px;
    margin-right: 5px;
  }
  .star-player .player-name {
    font-size: 0.92rem;
  }
  .star-player .player-stats {
    font-size: 0.78rem;
  }
}

/* 1) Forcer toutes les cellules (th + td) à 
      s’aligner en haut de la ligne (vertical-align: top) */
.gameday-table th,
.gameday-table td {
  vertical-align: middle !important;
}

/* 2) Empêcher le retour à la ligne dans les noms d’équipes
      pour que toutes les lignes aient la même hauteur */
.gameday-table .team-text-container .team-name-full {
  white-space: nowrap;
  overflow: hidden; /* si ça dépasse, on coupe */
  text-overflow: ellipsis; /* ajoute "…" si trop long */
}

/* 3) Forcer l’alignement à gauche dans la colonne "LOCATION" */
.gameday-table td.location-cell {
  text-align: left;
  /* si besoin, rajoutez un padding-left identique à celui des autres cellules : */
  /* padding-left: 0.75rem; */
}

/* 4) Si vous voulez absolument fixer la colonne "HOUR" au centre 
      (et maintenir une largeur à peu près constante), vous pouvez 
      simplement préciser une largeur sur la 3ᵉ colonne via nth-child : */
.gameday-table th:nth-child(3),
.gameday-table td:nth-child(3) {
  width: 10%; /* par exemple 10%, ajustez selon votre goût */
}

/* 5) Et pour équilibrer les colonnes "AWAY", "HOME" et "LOCATION", 
      si vous n’utilisez pas de <colgroup>, vous pouvez aussi leur 
      donner une largeur approximative par nth-child. Par exemple : */
.gameday-table th:nth-child(1),
.gameday-table td:nth-child(1) {
  width: 20%;
} /* AWAY */
.gameday-table th:nth-child(5),
.gameday-table td:nth-child(5) {
  width: 25%;
} /* HOME */
.gameday-table th:nth-child(6),
.gameday-table td:nth-child(6) {
  width: 25%;
} /* LOCATION */

/* 6) Enfin, si vos en-têtes vides (colonne “score extérieur” et “score domicile”) 
      apparaissent encore de façon gênante, vous pouvez explicitement retirer 
      leur fond et leurs bordures pour qu’elles ne donnent plus l’impression 
      d’un “trou” coloré :
*/
.gameday-table thead th:nth-child(2),
.gameday-table thead th:nth-child(4) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* 1) Transforme vos wrappers en conteneurs flex pour qu'ils puissent grandir et centrer leur contenu */
.gameday-table-wrapper,
.stats-table-wrapper {
  flex: 1; /* prend tout l’espace restant dans la carte */
  display: flex; /* on en fait un flex-container */
}

/* ––– Cards “no-data” ––– */
/* ––– Message unique quand aucun match ––– */
.no-data-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* alignement en haut */
  padding-top: 80px; /* pousse le contenu vers le bas de 80px */
  min-height: calc(100vh - 160px); /* ou ajustez cette valeur si besoin */
  color: var(--text-gray);
  text-align: center;
  gap: 1rem;
}

.no-data-full i {
  font-size: 3rem;
}

.no-data-full p {
  font-size: 1.25rem;
  margin: 0;
}

/* ———————————————————————————————————
   Override couleur des textes de stats
   ——————————————————————————————————— */
.stats-card-body,
.stats-card-body .stats-container,
.stats-card-body .stats-container li,
.stats-card-body .stats-container li span,
.stats-card-body .stats-container li .player-ranking,
.stats-card-body .stats-container li .team-ranking {
  color: var(--text-gray) !important;
}

/* ———————————————————————————————————
   Override couleur des textes Star Players
   ——————————————————————————————————— */
.star-players-container,
.star-player,
.star-player .player-name,
.star-player .player-stats,
.team-star h5 {
  color: var(--text-gray) !important;
}

/* 1) Jour + calendrier en gris secondaire */
.days-and-calendar .btn-day,
.days-and-calendar .calendar-btn i {
  color: var(--text-gray) !important;
}

/* Conserver le fond vert sur le jour sélectionné,
   mais en gris pour le texte */

/* 2) Texte du sélecteur de stats en gris */
.stats-category-selector-container .stats-select,
.stats-category-selector-container .stats-select option {
  color: var(--text-gray) !important;
}

@media screen and (max-width: 768px) {
  /* 0) Supprimez tout padding horizontal dans le wrapper global */
  .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1) Faites également touche à la top-bar si elle a un padding interne : */
  .top-row {
    padding-left: 0;
    padding-right: 0;
  }

  /* 2) Et pour que la barre des jours aille vraiment d’un bord à l’autre : */
  .days-and-calendar {
    margin-left: 0;
    margin-right: 0;
    gap: 4px; /* gardez un petit écart entre les cases */
  }

  /* 3) Enfin, si votre table ou vos cartes ont un container avec padding, on l’annule aussi : */
  .row-wrapper {
    padding-left: 0;
    padding-right: 0;
    flex-direction: column;
    gap: 0;
  }
  .days-and-calendar {
    gap: 4px; /* même espacement réduit */
  }
  .days-and-calendar .btn-day {
    width: 48px; /* tes dimensions mobile */
    height: 48px;
    margin: 0; /* on enlève margin-right:4px si présent */
  }
  .days-and-calendar .calendar-btn {
    margin: 0;
  }
  .right-column {
    margin-top: 5px !important;
    padding-top: 0;
  }
}
/* override du gris imposé précédemment */
.days-and-calendar .btn-day.selected-day {
  background-color: var(--accent) !important;
  color: #fff !important; /* texte blanc */
}

/* ========== Boxscore Modal ========== */

.table-boxscore {
  border-collapse: separate !important;
  border-spacing: 0 0.5rem;
  width: 100%;
}

/* Texte gris pour toutes les cellules, header exclu */
.table-boxscore th,
.table-boxscore td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  color: var(--text-gray) !important;
}

/* En-tête collante en vert avec texte blanc */
.table-boxscore thead th {
  position: sticky;
  top: 0;
  background-color: var(--accent) !important; /* vert accent */
  color: #fff !important; /* texte blanc */
  z-index: 2;
}

/* Lignes alternées pour la lisibilité */
.table-boxscore tbody tr:nth-child(odd) {
  background-color: var(--bg-alt);
}
/* — Hover horizontal — */
.table-boxscore tbody tr:hover td {
  background-color: rgba(0, 214, 180, 0.1); /* vert clair très transparent */
}
.boxscore-player-photo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px; /* optionnel */
}
.calendar-btn .calendar-icon {
  /* Toujours s’assurer que l’image est en niveau de gris d’origine,
     puis inverser pour obtenir du blanc */
  filter: invert(100%) brightness(200%);
}
/* === Icone calendrier : gris par défaut, blanc on hover/active === */
.days-and-calendar .calendar-btn .calendar-icon {
  /* gris secondaire */
  filter: brightness(0) saturate(100%) invert(68%) sepia(3%) saturate(112%)
    hue-rotate(175deg) brightness(94%) contrast(90%);
  transition: filter 0.2s;
}

.days-and-calendar .calendar-btn:hover .calendar-icon,
.days-and-calendar .btn-day.selected-day + .calendar-btn .calendar-icon {
  /* blanc pur */
  filter: invert(100%);
}
.gameday-table img.team-logo {
  width: 32px;
  height: 32px;
}