toast

      /* Notification Styles */
    .notification {
        position: fixed;
        top: 1rem;
        right: 1rem;
        padding: 1rem;
        border-radius: 0.375rem;
        box-shadow: var(--shadow-elevation);
        display: flex;
        align-items: center;
        max-width: 24rem;
        background: var(--gradient-primary); /* Using the global gradient */
        color: var(--text-light); /* Assuming text-light is defined in the Tailwind config */
        animation: slideIn 0.3s ease-out;
    }

    /* Keyframes for slide-in animation */
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Dark mode adjustments */
    .dark .notification {
        background: var(--gradient-secondary); /* Use gradient for dark mode */
        color: var(--text-dark); /* Assuming text-dark is defined */
    }
  
    /* Styling for individual toast notifications */
    .toast {
        padding: 1rem;
        border-radius: 0.375rem;
        background: var(--gradient-primary); /* Global gradient */
        color: var(--text-light);
        box-shadow: var(--shadow-elevation);
        transition: all 0.3s ease;
    }

    /* On hover effect for toast */
    .toast:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-elevation-high);
    }

    /* Toast close button */
    .toast-close {
        margin-left: auto;
        cursor: pointer;
        font-size: 1.25rem;
        color: var(--text-light);
    }

    /* Dark mode adjustments for toast */
    .dark .toast {
        background: var(--gradient-secondary);
        color: var(--text-dark);
    }

        // Notification handling
        function showToast(id) {
            const toast = document.getElementById(`notificationToast_${id}`);
            if (toast) {
                toast.classList.remove('translate-x-full', 'opacity-0');
                toast.classList.add('translate-x-0', 'opacity-100');
                setTimeout(() => hideToast(id), 5000); // Auto hide after 5 seconds
            }
        }

        function hideToast(id) {
            const toast = document.getElementById(`notificationToast_${id}`);
            if (toast) {
                toast.classList.add('translate-x-full', 'opacity-0');
                toast.classList.remove('translate-x-0', 'opacity-100');
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }
        }

        // Show all toasts on page load
        document.addEventListener('DOMContentLoaded', function() {
            const toasts = document.querySelectorAll('[id^="notificationToast_"]');
            toasts.forEach((toast, index) => {
                setTimeout(() => showToast(index + 1), index * 300);
            });
        });