/* =============================================================================
 * IMPORT-EXPORT.CSS - Styles pour les boutons d'actions
 * =============================================================================
 */

/* Conteneur principal */
.import-export-container,
#import-export-container {
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  background-color: transparent;
  border: none;
  display: flex;
  gap: 12px;
  justify-content: center; /* ✅ Centré sur desktop */
  align-items: center;
  flex-wrap: wrap;
}

/* Styles de base pour TOUS les boutons */
.btn-export,
.btn-import,
.btn-delete-game,
#export-excel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px; /* ✅ Padding proportionnel */
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 0 1 auto; /* ✅ Largeur automatique selon le contenu */
  min-width: 140px; /* ✅ Largeur minimum */
  max-width: 200px; /* ✅ Largeur maximum */
}

/* Bouton Export Excel (vert) */
.btn-export,
#export-excel-btn {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-export:hover,
#export-excel-btn:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Bouton Import (bleu) */
.btn-import {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.btn-import:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* Bouton Supprimer (rouge) */
.btn-delete-game {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-delete-game:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* Animation au clic */
.btn-export:active,
.btn-import:active,
.btn-delete-game:active,
#export-excel-btn:active {
  transform: translateY(0);
}

/* États désactivés */
.btn-export:disabled,
.btn-import:disabled,
.btn-delete-game:disabled,
#export-excel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* =============================================================================
 * RESPONSIVE MOBILE
 * =============================================================================
 */
@media (max-width: 768px) {
  .import-export-container,
  #import-export-container {
    justify-content: center; /* ✅ Centré sur mobile */
    gap: 10px;
  }
  
  .btn-export,
  .btn-import,
  .btn-delete-game,
  #export-excel-btn {
    flex: 0 1 auto; /* ✅ Largeur automatique */
    min-width: 120px; /* ✅ Plus petit sur mobile */
    max-width: 160px; /* ✅ Max adapté au mobile */
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* Animation d'entrée */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.import-export-container,
#import-export-container {
  animation: slideIn 0.3s ease-out;
}