/* Badge de notification standard - coin supérieur droit */
.notification-badge {
    background-color: #D35052;
    position: absolute;
    color: white;
    padding: 4px 8px;  /* Réduit pour être plus compact */
    border-radius: 100px;
    font-weight: bold;
    font-size: 9px;
    text-align: center;
    top: 2px;
    right: 2px;
    scale: 0.9;
    line-height: 1;  /* Contrôle la hauteur */
    z-index: 10;  /* Assure que le badge reste au-dessus des autres éléments */
}

/* Badge de notification d'alerte - coin supérieur gauche */
.notification-badge-alert {
    background-color: #D35052;
    position: absolute;
    color: white;
    padding: 4px 8px;  /* Réduit pour être plus compact */
    border-radius: 100px;
    font-weight: bold;
    font-size: 9px;
    text-align: center;
    top: 2px;
    left: 2px;
    scale: 0.9;
    line-height: 1;  /* Contrôle la hauteur */
    z-index: 10;  /* Assure que le badge reste au-dessus des autres éléments */
}

/* Badge de notification inversé (couleur différente) - coin supérieur droit */
.notification-badge-reverse {
    background-color: #292558;
    position: absolute;
    color: white;
    padding: 4px 8px;  /* Réduit pour être plus compact */
    border-radius: 100px;
    font-weight: bold;
    font-size: 9px;
    text-align: center;
    top: 2px;
    right: 2px;
    scale: 0.9;
    line-height: 1;  /* Contrôle la hauteur */
    z-index: 10;  /* Assure que le badge reste au-dessus des autres éléments */
}

/* Badge de notification pour les tableaux - intégré dans la ligne */
.notification-badge-table {
    background-color: #D35052;
    color: white;
    padding: 4px 8px;  /* Réduit pour être plus compact */
    border-radius: 100px;
    font-weight: bold;
    font-size: 10px;  /* Taille adaptée pour les tableaux */
    text-align: center;
    display: inline-block;  /* Permet l'alignement avec le texte */
    line-height: 1;  /* Contrôle la hauteur */
    vertical-align: middle;  /* Alignement vertical */
    margin: 0 4px;  /* Espacement */
}

/* Animation de pulsation pour les badges */
.pulse {
    animation: pulse-animation 1.5s infinite;
}

/* Animation de pulsation pour les badges inversés */
.pulse-reverse {
    animation: pulse-animation-reverse 1.5s infinite;
}

/* Animation pour les badges rouges */
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(211, 80, 82, 0.7);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(211, 80, 82, 0);  /* Réduit la taille de la pulsation */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(211, 80, 82, 0);
    }
}

/* Animation pour les badges bleus */
@keyframes pulse-animation-reverse {
    0% {
        box-shadow: 0 0 0 0 rgba(41, 37, 88, 0.7);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(41, 37, 88, 0);  /* Réduit la taille de la pulsation */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(41, 37, 88, 0);
    }
}