/* ========================================
   NOTIFICATION SYSTEM STYLES
   ======================================== */

/* Toast Notification Enhancements */
.toast-container .toast {
    min-width: 300px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
}

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

.toast-container .toast.hide {
    animation: slideOutRight 0.3s ease-in;
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Workflow Badge State Change Animation */
.workflow-badge {
    transition: all 0.3s ease-in-out;
    display: inline-block;
}

/* Pulse animation when workflow state changes */
@keyframes badgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-badge-color-rgb), 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(var(--bs-badge-color-rgb), 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--bs-badge-color-rgb), 0);
    }
}

.workflow-badge.state-changed {
    animation: badgePulse 0.6s ease-out;
}

/* Glow effect for badge animation */
@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(var(--bs-badge-color-rgb), 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--bs-badge-color-rgb), 0.8);
    }
}

.workflow-badge.glow {
    animation: badgeGlow 1s ease-in-out;
}

/* Inline Alert Fade-in Animation */
.alert {
    animation: fadeInDown 0.3s ease-out;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Status Badge Color Transitions */
.workflow-badge {
    /* Smooth color transitions when status changes */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Icon pulse for toast notifications */
.toast-header i {
    animation: iconPulse 1s ease-in-out;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Alert icon subtle bounce */
.alert i {
    animation: iconBounce 0.5s ease-out;
}

@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-5px);
    }
    75% {
        transform: translateY(2px);
    }
}

/* Success indicator - check mark animation */
@keyframes checkMark {
    0% {
        transform: scale(0) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(-45deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.icon-check-circle {
    animation: checkMark 0.4s ease-out;
}

/* Error shake animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.alert-danger {
    animation: shake 0.5s ease-out, fadeInDown 0.3s ease-out;
}

/* Loading spinner for async operations */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.notification-spinner {
    display: inline-block;
    animation: spin 1s linear infinite;
}