/* ========================================
   COMPOSANT TABLES - MOBILE-FIRST
   ========================================
   
   Système de tableaux moderne et responsive
   Optimisé pour les statistiques de hockey
   ======================================== */

/* ========================================
   TABLEAUX DE BASE
   ======================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-6);
}

.table th,
.table td {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table th {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
  background: var(--color-bg-secondary);
}

.table tbody tr:nth-child(even) {
  background: var(--color-bg-tertiary);
}

.table tbody tr:nth-child(even):hover {
  background: var(--color-bg-secondary);
}

/* ========================================
   TABLEAUX SPÉCIALISÉS HOCKEY
   ======================================== */
.table--stats {
  font-size: var(--font-size-xs);
}

.table--stats th,
.table--stats td {
  padding: var(--spacing-2) var(--spacing-3);
}

.table--standings {
  font-weight: var(--font-weight-medium);
}

.table--standings .team-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.table--standings .playoff-spot {
  background: var(--color-success-light);
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

.table--standings .wildcard-spot {
  background: var(--color-warning-light);
  color: var(--color-warning);
  font-weight: var(--font-weight-bold);
}

/* ========================================
   COLONNES SPÉCIALISÉES
   ======================================== */
.table .col-rank {
  width: 50px;
  text-align: center;
  font-weight: var(--font-weight-bold);
}

.table .col-team {
  min-width: 150px;
  font-weight: var(--font-weight-semibold);
}

.table .col-number {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
}

.table .col-percentage {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

.table .col-action {
  width: 80px;
  text-align: center;
}

/* ========================================
   ÉTATS ET INDICATEURS
   ======================================== */
.table .trend-up {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

.table .trend-down {
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

.table .highlight {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.table .inactive {
  opacity: 0.6;
  color: var(--color-text-tertiary);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
  .table {
    font-size: var(--font-size-xs);
  }
  
  .table th,
  .table td {
    padding: var(--spacing-2);
  }
  
  .table .col-team {
    min-width: 120px;
  }
  
  /* Masquer certaines colonnes sur mobile */
  .table .col-hidden-mobile {
    display: none;
  }
}

@media (max-width: 480px) {
  .table {
    font-size: 10px;
  }
  
  .table th,
  .table td {
    padding: var(--spacing-1) var(--spacing-2);
  }
  
  .table .col-team {
    min-width: 100px;
  }
}

/* ========================================
   TABLEAUX COMPACTS
   ======================================== */
.table--compact {
  font-size: var(--font-size-xs);
}

.table--compact th,
.table--compact td {
  padding: var(--spacing-1) var(--spacing-2);
}

/* ========================================
   TABLEAUX AVEC TRI
   ======================================== */
.table--sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.table--sortable th:hover {
  background: var(--color-primary-dark);
}

.table--sortable th::after {
  content: '↕';
  position: absolute;
  right: var(--spacing-2);
  opacity: 0.5;
}

.table--sortable th.sort-asc::after {
  content: '↑';
  opacity: 1;
}

.table--sortable th.sort-desc::after {
  content: '↓';
  opacity: 1;
}

/* ========================================
   TABLEAUX AVEC PAGINATION
   ======================================== */
.table-container {
  position: relative;
  overflow-x: auto;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-4);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

.table-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.table-pagination-controls {
  display: flex;
  gap: var(--spacing-2);
}

.table-pagination-btn {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.table-pagination-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.table-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.table-pagination-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}