/* ========================================
   COMPOSANT ALERTS - MOBILE-FIRST
   ========================================
   
   Système d'alertes moderne et responsive
   Optimisé pour les notifications du site de hockey
   ======================================== */

/* ========================================
   ALERTE DE BASE
   ======================================== */
.alert {
  padding: var(--spacing-4);
  border-radius: var(--border-radius-lg);
  border: 1px solid transparent;
  margin-bottom: var(--spacing-4);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  position: relative;
  animation: alert-slide-in 0.3s ease-out;
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.alert__content {
  flex: 1;
  min-width: 0;
}

.alert__title {
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-1) 0;
  line-height: 1.3;
}

.alert__message {
  margin: 0;
  line-height: 1.5;
  font-size: var(--font-size-sm);
}

.alert__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: var(--spacing-1);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  opacity: 0.7;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert__close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

/* ========================================
   VARIANTES DE COULEURS
   ======================================== */
.alert--success {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success-dark);
}

.alert--success .alert__icon {
  color: var(--color-success);
}

.alert--error {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
  color: var(--color-danger-dark);
}

.alert--error .alert__icon {
  color: var(--color-danger);
}

.alert--warning {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
  color: var(--color-warning-dark);
}

.alert--warning .alert__icon {
  color: var(--color-warning);
}

.alert--info {
  background: var(--color-info-light);
  border-color: var(--color-info);
  color: var(--color-info-dark);
}

.alert--info .alert__icon {
  color: var(--color-info);
}

.alert--primary {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.alert--primary .alert__icon {
  color: var(--color-primary);
}

/* ========================================
   ALERTES SPÉCIALISÉES HOCKEY
   ======================================== */
.alert--trade {
  background: linear-gradient(135deg, var(--color-warning-light), var(--color-warning));
  border-color: var(--color-warning);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.alert--trade .alert__icon {
  color: var(--color-white);
}

.alert--trade .alert__title {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alert--injury {
  background: linear-gradient(135deg, var(--color-danger-light), var(--color-danger));
  border-color: var(--color-danger);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.alert--injury .alert__icon {
  color: var(--color-white);
}

.alert--injury .alert__title {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alert--milestone {
  background: linear-gradient(135deg, var(--color-success-light), var(--color-success));
  border-color: var(--color-success);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.alert--milestone .alert__icon {
  color: var(--color-white);
}

.alert--milestone .alert__title {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.alert--game {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.alert--game .alert__icon {
  color: var(--color-white);
}

.alert--game .alert__title {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
   VARIANTES DE STYLE
   ======================================== */
.alert--bordered {
  border-width: 2px;
  background: var(--color-bg-primary);
}

.alert--outlined {
  background: transparent;
  border-width: 2px;
}

.alert--filled {
  border: none;
  color: var(--color-white);
}

.alert--filled.alert--success {
  background: var(--color-success);
}

.alert--filled.alert--error {
  background: var(--color-danger);
}

.alert--filled.alert--warning {
  background: var(--color-warning);
}

.alert--filled.alert--info {
  background: var(--color-info);
}

.alert--filled.alert--primary {
  background: var(--color-primary);
}

.alert--filled .alert__icon {
  color: var(--color-white);
}

.alert--filled .alert__title {
  color: var(--color-white);
}

/* ========================================
   ALERTES AVEC ACTIONS
   ======================================== */
.alert--actionable {
  padding-right: var(--spacing-6);
}

.alert__actions {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  flex-wrap: wrap;
}

.alert__action {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid currentColor;
  border-radius: var(--border-radius-md);
  background: transparent;
  color: inherit;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

.alert__action:hover {
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}

.alert__action--primary {
  background: currentColor;
  color: var(--color-white);
}

.alert__action--primary:hover {
  background: currentColor;
  opacity: 0.9;
  color: var(--color-white);
}

/* ========================================
   ALERTES AVEC PROGRESS
   ======================================== */
.alert--progress {
  padding-bottom: var(--spacing-3);
}

.alert__progress {
  margin-top: var(--spacing-3);
}

.alert__progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.alert__progress-fill {
  height: 100%;
  background: currentColor;
  border-radius: var(--border-radius-full);
  transition: width var(--transition-medium);
}

/* ========================================
   ALERTES AVEC TIMER
   ======================================== */
.alert--timer {
  position: relative;
  overflow: hidden;
}

.alert--timer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  animation: alert-timer 5s linear;
}

@keyframes alert-timer {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* ========================================
   ALERTES COMPACTES
   ======================================== */
.alert--compact {
  padding: var(--spacing-2) var(--spacing-3);
  margin-bottom: var(--spacing-2);
}

.alert--compact .alert__icon {
  width: 16px;
  height: 16px;
}

.alert--compact .alert__title {
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}

.alert--compact .alert__message {
  font-size: var(--font-size-xs);
}

/* ========================================
   ALERTES FLOTTANTES
   ======================================== */
.alert--floating {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  max-width: 400px;
  z-index: 1060;
  box-shadow: var(--shadow-lg);
  animation: alert-slide-in-right 0.3s ease-out;
}

.alert--floating.alert--closing {
  animation: alert-slide-out-right 0.3s ease-out;
}

@keyframes alert-slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes alert-slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ========================================
   ALERTES AVEC BADGES
   ======================================== */
.alert__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--spacing-1);
  background: currentColor;
  color: var(--color-white);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  margin-left: var(--spacing-2);
}

/* ========================================
   ALERTES AVEC LISTES
   ======================================== */
.alert__list {
  margin: var(--spacing-2) 0 0 0;
  padding-left: var(--spacing-4);
}

.alert__list-item {
  margin-bottom: var(--spacing-1);
  line-height: 1.4;
}

.alert__list-item:last-child {
  margin-bottom: 0;
}

/* ========================================
   ALERTES AVEC ICÔNES PERSONNALISÉES
   ======================================== */
.alert--icon-custom .alert__icon {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-lg);
}

.alert--icon-large .alert__icon {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xl);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
  .alert {
    padding: var(--spacing-3);
    gap: var(--spacing-2);
  }
  
  .alert__icon {
    width: 18px;
    height: 18px;
  }
  
  .alert__title {
    font-size: var(--font-size-base);
  }
  
  .alert__message {
    font-size: var(--font-size-sm);
  }
  
  .alert--floating {
    top: var(--spacing-2);
    right: var(--spacing-2);
    left: var(--spacing-2);
    max-width: none;
  }
  
  .alert__actions {
    flex-direction: column;
  }
  
  .alert__action {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .alert {
    padding: var(--spacing-2);
    gap: var(--spacing-2);
  }
  
  .alert__icon {
    width: 16px;
    height: 16px;
  }
  
  .alert__title {
    font-size: var(--font-size-sm);
  }
  
  .alert__message {
    font-size: var(--font-size-xs);
  }
  
  .alert--floating {
    top: var(--spacing-1);
    right: var(--spacing-1);
    left: var(--spacing-1);
  }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes alert-slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert--fade-in {
  animation: alert-fade-in 0.3s ease-out;
}

@keyframes alert-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.alert--bounce-in {
  animation: alert-bounce-in 0.5s ease-out;
}

@keyframes alert-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   UTILITAIRES
   ======================================== */
.alert-container {
  position: fixed;
  top: var(--spacing-4);
  right: var(--spacing-4);
  z-index: 1060;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  max-width: 400px;
}

.alert-container--bottom {
  top: auto;
  bottom: var(--spacing-4);
}

.alert-container--center {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.alert-container--full {
  position: static;
  max-width: none;
}

.alert--dismissible {
  cursor: pointer;
  transition: all var(--transition-fast);
}

.alert--dismissible:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.alert--auto-dismiss {
  animation: alert-auto-dismiss 5s ease-out forwards;
}

@keyframes alert-auto-dismiss {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}