/**
 * Enhanced Toast Theme Styles
 * Professional, readable toast notifications that match the site design
 */

/* Enhanced toast container positioning */
#notification-container {
    z-index: 1070 !important; /* Above modals */
}

/* Base toast enhancements */
.toast {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.toast-body {
    padding: 1rem 1.25rem !important;
}

/* Success toast - Onward gold theme with shimmer */
.toast.bg-success {
    background: linear-gradient(135deg, #C69C3F 0%, #B88A37 100%) !important;
    border-left: 4px solid #9B7530 !important;
    position: relative;
    overflow: hidden;
}

.toast.bg-success::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 70%
    );
    animation: toastShimmer 2s infinite;
    pointer-events: none;
}

@keyframes toastShimmer {
    0% {
        transform: translateX(-100%) translateY(-100%);
    }
    100% {
        transform: translateX(100%) translateY(100%);
    }
}

/* Error toast - attention-grabbing red */
.toast.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #bb2d3b 100%) !important;
    border-left: 4px solid #842029 !important;
}

/* Warning toast - soft amber for better readability */
.toast.bg-warning {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFF3CD 100%) !important;
    border-left: 4px solid #FFA000 !important;
    color: #664d03 !important;
}

.toast.bg-warning .toast-body {
    color: #664d03 !important;
}

.toast.bg-warning .bi {
    color: #FFA000 !important;
    font-size: 1.1rem;
}

/* Info toast - brand gold */
.toast.bg-primary {
    background: linear-gradient(135deg, #C69C3F 0%, #B88A37 100%) !important;
    border-left: 4px solid #9B7530 !important;
}

/* Icon styling */
.toast .bi {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Close button styling */
.toast .btn-close {
    background-size: 0.75rem;
    padding: 0.5rem;
    margin: 0 !important;
    opacity: 0.8;
}

.toast .btn-close:hover {
    opacity: 1;
}

/* Enhanced animations */
@keyframes slideInRight {
    from {
        transform: translateX(110%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

.toast.hiding {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .toast.bg-warning {
    background: linear-gradient(135deg, #3D3A2B 0%, #332F22 100%) !important;
    border-left-color: #C69C3F !important;
    color: #F5DEB3 !important;
}

[data-bs-theme="dark"] .toast.bg-warning .toast-body {
    color: #F5DEB3 !important;
}

[data-bs-theme="dark"] .toast.bg-warning .bi {
    color: #C69C3F !important;
}

[data-bs-theme="dark"] .toast.bg-warning .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    #notification-container {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
    }
    
    .toast {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: none !important;
    }
    
    .toast.hiding {
        transition: opacity 0.15s ease-out;
        animation: none;
    }
}

/* Multiple toast stacking */
.toast + .toast {
    margin-top: 0.75rem;
}