/* Styles spéciaux pour les créneaux jusqu'à 23h59 */
.end-of-day-slot {
    position: relative;
    overflow: visible;
}

/* Badge spécial pour identifier les créneaux de fin de journée */
.end-of-day-slot::after {
    content: "Fin de journée";
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #1DB954, #1ed760);
    color: black;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(29, 185, 84, 0.3);
    animation: pulse-glow 2s infinite;
}

/* Animation pour le badge */
@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 2px 4px rgba(29, 185, 84, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 4px 8px rgba(29, 185, 84, 0.5);
        transform: scale(1.05);
    }
}

/* Style spécial pour l'heure de fin 23h59 */
.end-of-day-slot .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Effet de surbrillance pour les créneaux de fin de journée */
.end-of-day-slot:hover {
    box-shadow: 0 0 20px rgba(29, 185, 84, 0.4);
}

/* Responsive : masquer le badge sur très petits écrans */
@media (max-width: 480px) {
    .end-of-day-slot::after {
        display: none;
    }
}

/* Style alternatif plus discret si le badge semble trop visible */
.end-of-day-slot.subtle::after {
    background: rgba(29, 185, 84, 0.8);
    color: white;
    font-size: 9px;
    padding: 1px 4px;
    animation: none;
}

/* Variante avec icône au lieu de texte */
.end-of-day-slot.icon-variant::after {
    content: "🌙";
    background: none;
    font-size: 14px;
    padding: 0;
    box-shadow: none;
    animation: none;
}