/* Toast Notification System Styles */

#toast-container {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    pointer-events: none;
    /* Allow clicking through container */
}

#toast-container>div {
    pointer-events: auto;
    /* Re-enable pointer events for toasts */
}

/* Base Toast Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

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

.toast-notification {
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: start;
    animation: slideIn 0.3s ease-out;
    border-left-width: 4px;
    border-left-style: solid;
    transition: all 0.3s ease-out;
}

/* Toast Variants */
.toast-success {
    border-left-color: #22c55e;
    /* text-green-500 */
}

.toast-success .toast-icon-bg {
    background-color: #dcfce7;
    /* bg-green-100 */
    color: #16a34a;
    /* text-green-600 */
}

.toast-error {
    border-left-color: #ef4444;
    /* text-red-500 */
}

.toast-error .toast-icon-bg {
    background-color: #fee2e2;
    /* bg-red-100 */
    color: #dc2626;
    /* text-red-600 */
}

.toast-info {
    border-left-color: #3b82f6;
    /* text-blue-500 */
}

.toast-info .toast-icon-bg {
    background-color: #dbeafe;
    /* bg-blue-100 */
    color: #2563eb;
    /* text-blue-600 */
}

.toast-warning {
    border-left-color: #eab308;
    /* text-yellow-500 */
}

.toast-warning .toast-icon-bg {
    background-color: #fef9c3;
    /* bg-yellow-100 */
    color: #ca8a04;
    /* text-yellow-600 */
}

/* Content Styles */
.toast-icon-bg {
    border-radius: 9999px;
    padding: 0.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-icon-bg svg {
    width: 1.25rem;
    height: 1.25rem;
}

.toast-content {
    min-width: 0;
}

.toast-title {
    font-weight: 700;
    color: #111827;
    /* text-gray-900 */
    font-size: 0.875rem;
    /* text-sm */
    margin-bottom: 0.25rem;
    margin-top: 0;
}

.toast-message {
    font-size: 0.75rem;
    /* text-xs */
    color: #4b5563;
    /* text-gray-600 */
    margin: 0;
}

/* Close Button */
.toast-close {
    color: #9ca3af;
    /* text-gray-400 */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.15s ease-in-out;
}

.toast-close:hover {
    color: #4b5563;
    /* text-gray-600 */
}

.toast-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Dismiss Animation State */
.toast-dismissing {
    opacity: 0;
    transform: translateY(100%);
}

/* Tablet and Mobile Responsiveness */
@media (max-width: 640px) {
    #toast-container {
        width: calc(100% - 2rem);
        max-width: 380px;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
    }
}