/* Realtime Notifications & Animations */

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Status Indicators */
.status-indicator {
    @apply w-2.5 h-2.5 rounded-full;
}

.status-online {
    @apply bg-emerald-500 shadow-[0_0_8px_rgba(16, 185, 129, 0.4)];
}

.status-offline {
    @apply bg-slate-400;
}