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

/* Rang global dans les cartes */
.stat-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

/* Style des classements (1/569) */
.rank-info {
  color: #A0A0A0;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.players-table td:nth-child(2) {
  color: #A0A0A0;
  
  
  text-align: left !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Conteneur principal des stats du joueur */
.player-stats-container {
  width: 100%;
  min-height: 20vh; /* Hauteur minimale mais peut s'étendre */
  background-color: #19212e;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 15px 20px; /* Ajoute du padding vertical */
  position: relative;
  box-sizing: border-box; /* Inclut padding dans la hauteur */
}

/* Photo du joueur */
.player-photo-container {
  position: absolute;
  left: 10px;
  bottom: 10px;
  height: 90%;
  display: flex;
  align-items: flex-end;
}
.player-photo-container img {
  height: 100%;
  object-fit: contain;
  border-radius: 10%;
}

/* Bloc infos du joueur */
.player-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10rem; /* Augmente l'espace entre le nom du joueur et la zone de recherche */
  /* Assure que le bloc info joueur est confiné à sa zone */
  width: 100%;
}

/* Zone centrale - recherche */
.search-input-container {
  position: absolute;
  top: 1.5rem; /* Descendu légèrement pour éviter le bord haut */
  left: 52%; /* Décalé légèrement plus à droite pour éviter les noms longs */
  /* on recule de 3rem de plus pour éviter le 2-chiffres */
  transform: translateX(calc(-50% - 3rem));
  width: 28%; /* Légèrement réduit */
  max-width: 280px;
  /* Assure de rester dans sa zone dédiée */
  z-index: 10;
}

.search-input-underline {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: none;
  border-bottom: 1px solid #212f3c;
  background-color: transparent;
  color: #00d6b4;
  font-size: 1rem; /* correspond à 16px */
  font-weight: 400;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-input-underline:focus {
  border-bottom: 1px solid #212f3c;
}

.search-results {
  list-style: none;
  margin: 0.8rem 0 0 0;
  padding: 0.4rem 0;
  background-color: #1d1d2d;
  border: 1px solid #00d6b4;
  border-radius: 0.5rem;
  color: #c2c0c0;
  font-size: 0.88rem;
  max-height: 250px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 6px 16px rgba(0, 214, 180, 0.2);
  backdrop-filter: blur(4px);
  scrollbar-width: thin;
  scrollbar-color: #2c3a4a #1d1d2d;
}
.search-results::-webkit-scrollbar {
  width: 8px;
}

.search-results::-webkit-scrollbar-thumb {
  background: #1d1d2d;
  border-radius: 10px;
}

.search-results::-webkit-scrollbar-track {
  background: #1d1d2d;
}

.search-results li {
  display: flex;
  align-items: center;
  gap: 0.4rem; /* réduit l'espacement horizontal */
  padding: 0.5rem 0.8rem; /* plus compact */
  margin: 0.2rem 0.6rem;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 0.4rem;
  transition: background-color 0.2s ease, transform 0.15s ease;
  cursor: pointer;
}

.search-results img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Hover fluide */
.search-results li:hover {
  background-color: transparent; /* ← plus de vert du tout */
  color: #00d6b4; /* tu peux aussi le remplacer par `inherit` si tu veux garder la même couleur */
  transform: scale(1.02);
  box-shadow: none; /* ← supprime le glow */
}

/* Supprime les bordures inutiles */
.search-results li:first-child,
.search-results li:last-child {
  border: none;
}

/* Auto-hide si vide */
.search-results:empty {
  display: none;
}

.mini-photo {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  border-radius: 50%;
  margin-right: 0.6rem;
  vertical-align: middle;
  /* Pas de background, pas de ombre */
}

/* Nom du joueur */
#playerDetails {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 60px;
  position: relative;
  top: -1.5rem; /* Réduit pour éviter de toucher le bord supérieur */
  /* Zone gauche réservée au nom - réduite et avec marge à droite */
  width: 15%; /* Réduit de 18% à 15% */
  padding-right: 25px; /* Plus d'espace entre le nom et la recherche */
  box-sizing: border-box;
  min-width: 120px; /* Assure une largeur minimale */
  max-width: 180px; /* Limite la largeur maximale */
  padding-top: 5px; /* Marge supplémentaire en haut */
}
#playerNameContainer {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  row-gap: 0.3rem;
  font-size: clamp(1rem, 4vw, 2rem); /* Taille normale par défaut */
  font-weight: bold;
  color: #c2c0c0;
  text-transform: uppercase;
  /* Limite stricte à l'espace disponible dans la zone gauche */
  width: 100%;
  max-width: 100%;
  line-height: 1;
  overflow: hidden;
  flex-shrink: 1; /* Permet de rétrécir si nécessaire */
}

/* Réduction automatique de la taille pour les noms longs */
#playerNameContainer.long-name {
  font-size: clamp(0.85rem, 3vw, 1.5rem); /* Taille réduite */
}

#playerFirstName,
#playerLastName {
  margin: 0; /* plus aucune marge individuelle */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* Respecte strictement la largeur disponible */
}

/* Boutons PTS/ASS/REB - Zone centrale */
.player-stats {
  position: absolute;
  top: 70%; /* Remonté comme le bloc numéro/position */
  left: 52%; /* Aligné avec la boîte de recherche */
  /* on décale de 3rem vers la gauche en plus */
  transform: translate(calc(-50% - 3rem), -50%);
  display: flex;
  gap: 15px; /* Réduit l'écart entre les boutons */
  font-size: 18px;
  /* Assure que les boutons restent dans leur zone */
  width: 28%; /* Cohérent avec la zone de recherche */
  justify-content: center;
  margin-bottom: 10px; /* Marge par rapport au bord bas */
}
.stat-button {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #00d6b4;
  background: transparent;
  color: #00d6b4;
  transition: all 0.3s;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  min-width: 80px;
}
.stat-button:hover,
.stat-button.active {
  background-color: #00d6b4;
  color: white;
}
.stat-button:focus {
  outline: none;
}

/* Zone intermédiaire - numéro et position du joueur */
.player-number-position {
  position: absolute;
  top: 70%; /* Remonté pour éviter d'être trop bas */
  left: calc(52% + 15%); /* Aligné avec les autres éléments déplacés */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem; /* Réduit légèrement l'espace */
  width: 15%;
  /* Assure une séparation avec la zone centrale et la zone droite */
  justify-content: center;
  /* Empêche le débordement du contenu */
  overflow: visible;
  margin-bottom: 10px; /* Marge par rapport au bord bas */
}

/* Media queries pour adapter le bloc numéro/position sur différentes tailles d'écran */
@media (max-width: 1400px) {
  .player-number-position {
    gap: 0.3rem; /* Réduit l'espace entre le numéro et la position */
  }
}

@media (max-width: 1200px) {
  .player-number-position {
    left: calc(50% + 12%); /* Repositionne légèrement pour libérer plus d'espace */
    width: 18%; /* Un peu plus de largeur */
  }
}

@media (max-width: 992px) {
  .player-number-position {
    left: calc(50% + 10%); /* Repositionne encore plus vers la gauche */
  }
}

.player-number {
  font-size: 96px; /* Taille normale par défaut */
  font-weight: bold;
  color: #00d6b4;
  line-height: 0.9; /* Ajuste la hauteur de ligne pour un meilleur alignement */
}

/* Media queries pour adapter la taille du numéro sur différentes tailles d'écran */
@media (max-width: 1400px) {
  .player-number {
    font-size: 85px;
  }
}

@media (max-width: 1200px) {
  .player-number {
    font-size: 75px;
  }
}

@media (max-width: 992px) {
  .player-number {
    font-size: 65px;
  }
}

/* Réduction automatique pour les grands nombres avec un nom long */
.long-name ~ .player-number-position .player-number {
  font-size: 78px; /* Taille réduite */
}

.player-position {
  font-size: 48px; /* Taille normale par défaut */
  font-weight: bold;
  color: #c2c0c0;
  line-height: 0.9; /* Ajuste la hauteur de ligne pour un meilleur alignement */
}

/* Media queries pour adapter la taille de la position sur différentes tailles d'écran */
@media (max-width: 1400px) {
  .player-position {
    font-size: 42px;
  }
}

@media (max-width: 1200px) {
  .player-position {
    font-size: 36px;
  }
}

@media (max-width: 992px) {
  .player-position {
    font-size: 30px;
  }
}

/* Réduction automatique pour les positions avec un nom long */
.long-name ~ .player-number-position .player-position {
  font-size: 38px; /* Taille réduite */
}

/* Logo & nom de l’équipe - Zone droite */
.team-info {
  position: absolute;
  bottom: var(--favorite-icon-offset);
  right: calc(
    var(--favorite-icon-offset) + var(--favorite-icon-size) +
      var(--favorite-icon-gap)
  ) !important; /* !important pour surclasser tout inline restant */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15%; /* Taille fixe pour la zone droite */
  max-width: 120px; /* Limit maximum width */
  min-width: 80px; /* Ensure minimum width */
  overflow: hidden; /* Prevent content from overflowing */
}

/* --- tooltip pour l’étoile des favoris --- */
#favoriteIcon[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -1.8rem; /* hauteur au-dessus de l’icône */
  right: 100%; /* 100% de la largeur de l’icône vers la gauche */
  margin-right: 4px; /* petit espace entre icône et bulle */
  left: auto; /* on annule le left:50% de base */
  transform: none; /* on annule le translateX(-50%) de base */
  white-space: nowrap; /* empêcher le retour à la ligne */
  background: #fff;
  color: #666;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 30;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

#favoriteIcon {
  position: absolute !important;
  top: var(--favorite-icon-offset) !important;
  right: var(--favorite-icon-offset) !important;
  font-size: var(--favorite-icon-size) !important;
  z-index: 20;
}
.team-logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}
.team-info img#teamLogo {
  height: 90%; /* adapte à la taille de la photo joueur */
  max-height: 90px; /* limite sur grand écran */
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.15rem;
}

.team-name-text {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #c2c0c0;
  font-weight: 500;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.team-info img {
  width: 5rem; /* Slightly smaller */
  height: 5rem;
  object-fit: contain;
  margin-right: 0; /* Remove right margin */
  max-width: 100%; /* Ensure it stays within container */
}

/* Conteneur du graphe */
#player-graph {
  background-color: #19212e;
  border-radius: 5px;
  padding: 20px; /* Padding normal sur PC */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
  padding-top: 10px; /* Conserver un padding plus réduit en haut */
}

@media (max-width: 768px) {
  #player-graph {
    padding-left: 0; /* Suppression des paddings latéraux uniquement sur mobile */
    padding-right: 0;
    border-radius: 0; /* Coins carrés sur mobile */
  }
}
.header-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.match-results-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.match-results {
  display: flex;
  gap: 8px;
  align-items: center;
}
.match-result-basketball {
  color: white;
  font-size: 20px;
  line-height: 1;
}
.match-result-win {
  color: rgba(0, 214, 180, 1);
}
.match-result-loss {
  color: #ff5b5b;
}

/* Quick Bet & contrôles */
.left-buttons {
  display: flex;
  gap: 5px;
  margin-right: 10px;
  align-items: center;
}
.controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.custom-button,
.select-dropdown {
  height: 1.8rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  border-radius: 0.25rem;
  border: 1px solid #00d6b4;
  background-color: transparent;
  color: #00d6b4;
  cursor: pointer;
  transition: background 0.3s;
}

.custom-button:hover,
.select-dropdown:hover {
  background-color: #00d6b4;
  color: #1d1d2d;
}

#numMatches {
  height: 32px;
  padding: 5px 10px;
  appearance: none;
}
#numMatches:focus {
  outline: none;
  box-shadow: none;
}

/* Canvas du graphe */
.graph-container {
  height: 300px;
  overflow-x: auto;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  width: 100%;
  border-radius: 4px;
  background-color: #19212e;
}

/* Media queries pour optimisation mobile */
@media (max-width: 768px) {
  /* Suppression des marges et paddings sur mobile */
  
  
  /* Graphique pleine largeur sur mobile */
  .graph-container {
    border-radius: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #graphCanvas {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }
}
#graphCanvas {
  display: inline-block;
  width: 100%;
  height: 600px;
}

/* Logos sous le graphe */
.team-logos {
  text-align: center;
  margin-top: 20px;
}

/* Graphique avec contrôles */
.team-graph {
  position: relative;
  background-color: #19212e;
  border-radius: 4px;
}

/* Padding uniquement pour la section des contrôles */
.header-container {
  padding: 20px 20px 10px 20px;
}

@media (max-width: 768px) {
  /* Sur mobile, pas de marge autour du graphique */
  .team-graph {
    border-radius: 0;
  }
  
  /* Mais conserver un peu de padding pour les boutons */
  .header-container {
    padding: 15px 15px 5px 15px;
  }
}
.team-logos img {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.15rem;
  object-fit: contain;
}
.star-icon {
  font-size: 1.5rem; /* très grande taille */
  color: #00d6b4; /* contour vert d'eau */
  background: transparent; /* aucun fond */
  border: none;
}

/* Cartes de stats (PPG/APG/RPG) */
.stats-cards-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.stat-card {
  background-color: #19212e;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 23%;
  color: #c2c0c0;
  text-align: center;

  /* Centrer verticalement le contenu (titre + contenu) */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Pour la quatrième carte (“Last 5 : PPG / APG / RPG”), centrer son titre horizontalement */
.stats-cards-container .stat-card:nth-child(4) .stat-card-title {
  justify-content: center;
}

.stat-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  gap: 0.5rem;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
}
.label-value {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card-title > span {
  display: inline-block;
}
.stat-card-title .rank-info {
  margin-left: auto; /* ← pousse le rang tout à droite */
  font-size: 1.5rem;
  color: #A0A0A0;
  font-weight: 500;
}
/* -- Pour que les fluctuations “Last 5” restent toujours en turquoise */
.stats-cards-container .stat-card-content {
  color: #00d6b4;
}

/* Tableau des matchs */
.player-stats-card {
  background-color: #19212e;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}
.player-stats-table .table {
  width: 100%;
  border-collapse: collapse;
}
.player-stats-table th,
.player-stats-table td {
  padding: 10px;
  text-align: left;
  color: #c2c0c0;
}
.player-stats-table th {
  background-color: #2c3e50;
  font-weight: bold;
}
.player-stats-table td {
  border-bottom: 1px solid #374a59;
}
.player-stats-table tr:last-child td {
  border-bottom: none;
}
.team-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.15rem;
  transition: background-color 0.2s;
  vertical-align: middle;
}
.player-name {
  display: flex;
  align-items: center;
}
.player-stats-table td:not(:first-child) {
  text-align: center;
}
/* Slider de défilement */
.slider-container {
  margin-top: 20px;
  text-align: center;
  width: 100%;
}

.slider {
  width: 80%; /* Correspond mieux à la largeur du graphique */
  max-width: 800px; /* Limite pour écrans larges */
}

@media (max-width: 768px) {
  /* Styles mobiles pour le graphique */
  #player-graph {
    position: relative;
  }

  /* Canvas du graphique */
  #player-graph .graph-container,
  #player-graph #graphCanvas {
    width: 100% !important;
  }
  
  /* Conteneur du slider central comme sur PC */
  #player-graph .slider-container {
    width: 100% !important;
    text-align: center !important;
    margin: 20px 0 !important;
  }
  
  /* Slider de largeur 50% comme sur PC */
  #player-graph .slider {
    width: 50% !important;
  }
}

/* ========== nouveau style cross-browser ========== */
input[type="range"] {
  appearance: none; /* Standard property */
  -webkit-appearance: none; /* Supprime le style par défaut de Chrome/Safari */
  width: 100%; /* Full-width */
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #009e85 var(--progress, 0%),
    #373e4a var(--progress, 0%)
  );
  outline: none;
  margin: 0;
}

/* neutralise le track natif sous Firefox */
input[type="range"]::-moz-range-track {
  background: transparent;
}

/* thumb identique partout */
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #00d6b4;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px; /* centre verticalement */
}

/* 1.2) Track “non rempli” (WebKit / Chrome / Safari) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #373e4a;
  border-radius: 3px;
  border: none;
}

/* 1.3) Track “non rempli” (Firefox) */
input[type="range"]::-moz-range-track {
  height: 6px;
  background: #373e4a;
  border-radius: 3px;
  border: none;
}

/* 1.4) Pour Firefox uniquement : track déjà rempli (progress) */
input[type="range"]::-moz-range-progress {
  background: #009e85; /* un vert un peu moins vif pour indiquer la partie parcourue */
  height: 6px;
  border-radius: 3px;
  border: none;
}

/* 1.5) Style du pouce (le cercle) en turquoise vif */
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: #00d6b4; /* turquoise vif */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -5px; /* pour centrer verticalement sur track de 6px */
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #00d6b4;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

/* 1.6) (Optionnel) Fallback pour IE/Edge anciens */
input[type="range"]::-ms-track {
  width: 100%;
  height: 6px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: #009e85; /* vert moins vif pour la partie remplie */
  border-radius: 3px;
}
input[type="range"]::-ms-fill-upper {
  background: #373e4a; /* gris foncé */
  border-radius: 3px;
}
input[type="range"]::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #00d6b4;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 0; /* ajuster si besoin */
}

/* Sélecteur du nombre de matchs */
.select-dropdown {
  padding: 5px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid #00d6b4;
  background: transparent;
  color: #00d6b4;
  cursor: pointer;
}
.select-dropdown:hover,
.select-dropdown:focus {
  background-color: #00d6b4;
  color: white;
}

:root {
  --bg-page: #1e1e1e;
  --bg-panel: #1b2530;
  --bg-header: #22303f;
  --bg-row: #19212b;
  --bg-hover: #263447;
  --accent: #00d6b4;
  --text-main: #e0e0e0;
  --border: #2c3a4a;
  --radius: 4px;
  --thickness: 1px;
  --favorite-icon-size: 1.5rem;
  --favorite-icon-offset: 8px;
  --favorite-icon-gap: 4px;
}

/* wrapper scroll + fond panel */
.players-table-wrapper {
  max-height: 50vh;
  overflow-y: auto;
  border: var(--thickness) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

/* Supprimer la bordure pour le tableau de stats joueur (comme dans teamstat) */
.player-stats-wrapper {
  border: none;
  border-radius: 0;
}

/* table générale */
.players-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  color: var(--text-main);
}

/* en-têtes collants */
.players-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-header);
  color: var(--accent);
  font-weight: 400;
  border-bottom: var(--thickness) solid var(--border);
  padding: 0.75rem;
  text-align: center;
}

/* cellule photo (si besoin) */
.players-table tbody td:nth-child(2) .player-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}

/* lignes et hover */
.players-table tbody tr {
  border-bottom: var(--thickness) solid var(--border);
  transition: background-color 0.2s;
}
.players-table tbody tr:nth-child(odd) {
  background: var(--bg-row);
}
.players-table tbody tr:hover {
  background: var(--bg-hover);
}

/* padding générique pour toutes les cellules */
.players-table td {
  padding: 0.6rem 0.75rem;
  text-align: center;
  vertical-align: middle;
}

/* scrollbar custom */
.players-table-wrapper::-webkit-scrollbar {
  width: 8px;
}
.players-table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius);
}
.players-table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

@media (max-width: 767px) {
  .hide-on-mobile,
  #playerNumber,
  #playerPosition,
  .star-icon,
  #teamName {
    display: none !important;
  }

  .player-stats-container {
    flex-direction: row;
    align-items: flex-end;
    padding-left: 0; /* Removed left padding */
    position: relative;
  }

  .player-photo-container {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    height: 85%;
    margin-top: 1.2rem; /* espacement haut sur mobile */
  }

  .player-photo-container img {
    max-height: 5rem; /* ~80px */
    width: auto;
    object-fit: contain;
    border-radius: 10%;
  }

  .player-info {
    margin-left: 0; /* Reset margin */
    display: flex;
    align-items: center;
    justify-content: center; /* Center horizontally */
    width: 100%; /* Full width */
    height: 5rem;
    position: relative; /* Make it relative */
    z-index: 5; /* Ensure it's above other elements */
  }

  #playerDetails {
    margin-left: 0; /* Remove original margin */
    width: auto; /* Auto width */
    min-width: auto; /* Remove min-width */
    max-width: none; /* Remove max-width */
    padding-right: 0; /* Remove padding */
    display: flex;
    justify-content: center; /* Center content */
    align-items: center;
    position: relative;
    top: 0; /* Reset top position */
    left: 0; /* Position from the left */
    transform: translateX(0); /* Reset transform */
  }

  #playerNameContainer {
    display: -webkit-box;
    display: box;
    line-clamp: 1; /* limite à 1 ligne */
    -webkit-line-clamp: 1; /* limite à 1 ligne */
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55vw;
    text-align: center; /* Center text */
  }

  #numMatches {
    display: none;
  }

  #playerFirstName::after {
    content: " ";
  }

  #playerFirstName,
  #playerLastName {
    display: inline;
    text-align: center; /* Center text */
  }

  .team-info {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .team-info img {
    width: 3.3rem;
    height: 3.3rem;
    object-fit: contain;
    margin: 0;
  }
  .players-table td:nth-child(2) {
    max-width: 30vw; /* limite la largeur sur mobile */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #A0A0A0 !important;
  }
  .players-table td:nth-child(2) .team-logo {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    object-fit: contain;
  }
  .stats-cards-container {
    flex-direction: column !important;
    gap: 1rem;
  }

  .stat-card {
    width: 100% !important;
  }
  .stat-card-content {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    color: #00d6b4; /* vert turquoise */
    font-weight: 500;
  }
  .match-results-container {
    display: none !important;
  }
  .search-input-container {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    /* on retire le width:100% pour ne plus déborder */
    width: auto;
    /* on limite sa taille maxi si besoin */
    max-width: 300px;
    margin-bottom: 1.2rem;
    z-index: 10;
  }
  .search-input-underline {
    padding: 0.3rem 0.6rem;
    font-size: 1rem;
    height: 2.2rem; /* optionnel si tu veux une hauteur fixe */
  }
}
/* ==== Firefox fix pour le nom du joueur ==== */
/* 1) On neutralise la marge négative éventuelle sur la première ligne */
#playerFirstName {
  margin-bottom: 0 !important;
}

/* 2) On force la 2ᵉ ligne à être un block et à avoir une marge haute positive */
#playerLastName {
  display: block !important;
  margin-top: 0.3rem !important; /* ajustez selon l’espacement souhaité */
}
/* ==============================================
   Tooltips explicatifs pour les stat-cards
   ============================================== */
.stat-card {
  position: relative; /* nécessaire pour positionner le tooltip */
}

.stat-card[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -1.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff; /* fond blanc */
  color: #666; /* texte gris (adaptez la teinte) */
  padding: 4px 8px;
  border: 1px solid #ccc; /* fine bordure grise */
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.stat-button {
  position: relative; /* nécessaire pour positionner le tooltip */
  /* … vos autres styles … */
}

/* tooltip blanc / texte gris pour les stat-button */
.stat-button[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -2rem; /* place la bulle au-dessus du bouton */
  left: 50%;
  transform: translateX(-50%);
  background: #fff; /* fond blanc */
  color: #666; /* texte gris */
  padding: 4px 8px;
  border: 1px solid #ccc; /* fine bordure grise */
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* --- tooltip générique pour tout élément avec data-tooltip --- */
[data-tooltip] {
  position: relative; /* base pour pouvoir positionner la bulle */
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -2rem; /* ajustez si besoin */
  left: 50%;
  transform: translateX(-50%);
  background: #fff; /* fond blanc */
  color: #666; /* texte gris */
  padding: 4px 8px;
  border: 1px solid #ccc; /* fine bordure grise */
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}