/**
 * Styles pour le composant StickyHeader
 * Comportement sticky hérité de styles.css (th { position: sticky; ... })
 * Ce fichier contient uniquement les styles spécifiques aux badges de statut
 */

/* ============================================================================
   NOTE: Le comportement sticky est défini dans styles.css
   ============================================================================

   Le fichier styles.css contient déjà:
   - th { position: sticky; top: 0; z-index: 10; }
   - background avec gradient thématique
   - Les variables CSS pour tous les thèmes

   Ce fichier ajoute seulement les styles des badges de statut.
   ============================================================================ */

/* ============================================================================
   BADGE DE STATUT - STYLES AMÉLIORÉS
   ============================================================================ */

/**
 * Container des badges de statut
 */
.th-player-status {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  min-height: 24px;
}

/**
 * Badges individuels
 */
.status-badge {
  font-size: 1.2em;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  transition: transform 0.2s ease;
}

.status-badge:hover {
  transform: scale(1.15);
}

/**
 * Badge Abandon
 */
.status-badge.status-abandoned {
  background: rgba(120, 144, 156, 0.3);
  border: 1px solid #78909c;
}

/**
 * Badge Mort
 */
.status-badge.status-dead {
  background: rgba(244, 67, 54, 0.3);
  border: 1px solid #f44336;
}

/**
 * Badge Donneur
 */
.status-badge.status-dealer {
  background: rgba(255, 193, 7, 0.3);
  border: 1px solid #ffc107;
}

/* ============================================================================
   RESPONSIVE - MOBILE ET TABLETTE
   ============================================================================ */

/**
 * Mobile (≤768px) - réduire l'espace et les tailles de police
 */
@media (max-width: 768px) {
  .sticky-header th {
    padding: 10px 6px;
    font-size: 0.9em;
  }

  .status-badge {
    font-size: 1em;
    padding: 1px 3px;
  }

  .th-player-content {
    gap: 4px;
  }
}

/**
 * Tablette (769px - 1024px)
 */
@media (min-width: 769px) and (max-width: 1024px) {
  .sticky-header th {
    padding: 12px 8px;
  }
}

/* ============================================================================
   ACCESSIBILITÉ
   ============================================================================ */

/**
 * Mode réduit de mouvement - désactiver les transitions
 */
@media (prefers-reduced-motion: reduce) {
  .sticky-header,
  .status-badge {
    transition: none;
  }

  .status-badge:hover {
    transform: none;
  }
}

/**
 * Mode impression - retirer le sticky pour l'impression
 */
@media print {
  .sticky-header {
    position: static;
    box-shadow: none;
  }
}