/* Toast Notification Styles */

/* Toast Container */
#toast-container {
    pointer-events: none;
}

#toast-container > * {
    pointer-events: auto;
}

/* Toast Base Styles */
.toast {
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.toast.toast-exit {
    opacity: 0;
    transform: translateX(100%);
}

/* Toast Type Colors */
.toast-success {
    background-color: rgba(16, 185, 129, 0.95);
    border-color: rgb(5, 150, 105);
    color: white;
}

.dark .toast-success {
    background-color: rgba(5, 150, 105, 0.95);
    border-color: rgb(4, 120, 87);
}

.toast-error {
    background-color: rgba(239, 68, 68, 0.95);
    border-color: rgb(220, 38, 38);
    color: white;
}

.dark .toast-error {
    background-color: rgba(220, 38, 38, 0.95);
    border-color: rgb(185, 28, 28);
}

.toast-warning {
    background-color: rgba(245, 158, 11, 0.95);
    border-color: rgb(217, 119, 6);
    color: white;
}

.dark .toast-warning {
    background-color: rgba(217, 119, 6, 0.95);
    border-color: rgb(180, 83, 9);
}

.toast-info {
    background-color: rgba(59, 130, 246, 0.95);
    border-color: rgb(37, 99, 235);
    color: white;
}

.dark .toast-info {
    background-color: rgba(37, 99, 235, 0.95);
    border-color: rgb(29, 78, 216);
}

/* Toast Icon Colors */
.toast-success .toast-icon {
    color: rgba(255, 255, 255, 0.9);
}

.toast-error .toast-icon {
    color: rgba(255, 255, 255, 0.9);
}

.toast-warning .toast-icon {
    color: rgba(255, 255, 255, 0.9);
}

.toast-info .toast-icon {
    color: rgba(255, 255, 255, 0.9);
}

/* Toast Message Styling */
.toast-message {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Animation */
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

/* Responsive */
@media (max-width: 640px) {
    #toast-container {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        max-width: 100%;
    }
}