/* ============================================
   📱 BADGE MESSAGES - DESKTOP STYLE
   Pour afficher le badge rouge sur la navigation desktop
   ============================================ */

/* Badge sur la navigation desktop */
.nav-item .badge-count {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  z-index: 10;
  pointer-events: none; /* Important : empêche le badge d'interférer avec le hover */
  animation: badge-appear 0.3s ease;
}

/* Position relative pour le nav-item pour que le badge soit bien positionné */
.nav-item {
  position: relative;
}

/* Animation d'apparition */
@keyframes badge-appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation de pulsation pour attirer l'attention */
@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 2px 16px rgba(239, 68, 68, 0.7);
  }
}

/* Pulsation quand il y a des messages */
.nav-item .badge-count:not(:empty) {
  animation: badge-pulse 2s infinite;
}

/* Style hover du nav-item avec badge */
.nav-item:hover .badge-count {
  /* Ne pas changer la position, juste un léger effet visuel */
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.6);
}

/* Quand le nav-item est actif */
.nav-item.active .badge-count {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.6);
  /* Garder le même transform */
  transform: translateY(-50%);
}

/* Dark mode support */
[data-theme="dark"] .nav-item .badge-count {
  background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
  box-shadow: 0 2px 8px rgba(248, 113, 113, 0.5);
}

/* Responsive - S'assurer que ça fonctionne sur tablette aussi */
@media (max-width: 1024px) {
  .nav-item .badge-count {
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
  }
}

/* Masquer sur mobile (car mobile a son propre système) */
@media (max-width: 768px) {
  .nav-item .badge-count {
    display: none !important;
  }
}