/* File: padel-tournament.css */

/* Importa il Google Font Bebas Neue */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Applica il font Bebas Neue a tutti gli elementi della tabella */
table.ptm-ranking-table, 
table.ptm-ranking-table * {
  font-family: 'Bebas Neue', sans-serif !important;
}

/* Container per rendere la tabella responsive con scroll orizzontale */
.ptm-responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Stili per la tabella di classifica */
table.ptm-ranking-table {
  width: 100% !important;
  margin: 30px auto !important;
  border-collapse: collapse !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Header della tabella (desktop): sfondo impostato a #DD7846 e font-size 20px */
table.ptm-ranking-table thead {
  background: #DD7846 !important;
  color: #ffffff !important;
}
table.ptm-ranking-table thead th {
  padding: 20px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: left !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Centro il contenuto delle prime due colonne nell'header (desktop) */
table.ptm-ranking-table thead th:nth-child(1),
table.ptm-ranking-table thead th:nth-child(2) {
  text-align: center !important;
}

/* Celle della tabella (desktop) */
table.ptm-ranking-table th,
table.ptm-ranking-table td {
  padding: 16px !important;
  border: none !important;
  text-align: left !important;
  font-size: 20px !important;
  color: #333333 !important;
}

/* Centro il contenuto delle prime due colonne nel corpo della tabella (desktop) */
table.ptm-ranking-table tbody tr td:nth-child(1),
table.ptm-ranking-table tbody tr td:nth-child(2) {
  text-align: center !important;
}

/* Imposta il font-weight della prima cella (posizione ranking) a 700 */
table.ptm-ranking-table tbody tr td:first-child {
  font-weight: 700 !important;
}

/* Imposta il font-weight a 700 per le colonne "Nome e Cognome" (3ª) e "Punteggio" (4ª) */
table.ptm-ranking-table tbody tr td:nth-child(3),
table.ptm-ranking-table tbody tr td:nth-child(4) {
  font-weight: 700 !important;
}

/* Stile per le immagini (desktop) */
table.ptm-ranking-table tbody tr td img {
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.3s ease !important;
}
table.ptm-ranking-table tbody tr td img:hover {
  transform: scale(1.05) !important;
}

/* Background personalizzati per le prime tre posizioni (top 3) */
table.ptm-ranking-table tbody tr.ptm-first {
  background: radial-gradient(circle at center, #FFD700 0%, #B8860B 100%) !important;
}
table.ptm-ranking-table tbody tr.ptm-second {
  background: radial-gradient(circle at center, #C0C0C0 0%, #808080 100%) !important;
}
table.ptm-ranking-table tbody tr.ptm-third {
  background: radial-gradient(circle at center, #CD7F32 0%, #8B4513 100%) !important;
}

/* Per le righe non top 3, si mantiene l'alternanza bianco/grigio (a partire dalla 4ª riga) */
table.ptm-ranking-table tbody tr:not(.ptm-first):not(.ptm-second):not(.ptm-third):nth-child(n+4) {
  background-color: #ffffff !important;
}
table.ptm-ranking-table tbody tr:not(.ptm-first):not(.ptm-second):not(.ptm-third):nth-child(n+4):nth-child(even) {
  background-color: #f5f5f5 !important;
}

/* Layout responsive per dispositivi mobili */
@media only screen and (max-width: 600px) {
  /* Nascondi l'header */
  table.ptm-ranking-table thead {
    display: none;
  }
  /* Trasforma ogni riga in una "card" */
  table.ptm-ranking-table tr {
    display: block;
    margin-bottom: 0;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border-radius: 8px;
  }
  /* Ogni cella diventa un contenitore flex a due colonne */
  table.ptm-ranking-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px !important;
    color: #333333 !important;
  }
  table.ptm-ranking-table td:last-child {
    border-bottom: none;
  }
  /* Il pseudo-elemento ::before mostra l'etichetta a sinistra */
  table.ptm-ranking-table td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    color: #333333 !important;
  }
  /* Per la colonna Foto Giocatore, annulla il contenuto del ::before per eliminare l'etichetta */
  table.ptm-ranking-table td[data-label="Foto Giocatore" i]::before {
    content: "" !important;
    flex: 0 0 0 !important;
  }
  /* Lo span .ptm-value occupa il restante spazio ed è allineato a destra */
  table.ptm-ranking-table td .ptm-value {
    flex: 1;
    text-align: right;
    color: #333333 !important;
  }
  /* Per le celle con immagini: centra l'immagine */
  table.ptm-ranking-table td img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }
  /* Nascondi completamente la cella foto se ha la classe no-photo */
  table.ptm-ranking-table td.no-photo,
  table.ptm-ranking-table td.no-photo::before {
    display: none !important;
  }
}