/**
 * Modern Toast Notification Styles
 * Overrides default toastr styles for better visibility
 */

/* Toast container positioning - ensure it's visible above all elements */
#toast-container {
    position: fixed !important;
    z-index: 9999999 !important;
    pointer-events: none !important;
}

#toast-container * {
    box-sizing: border-box !important;
}

#toast-container > div {
    pointer-events: auto !important;
}

/* Position classes */
#toast-container.toast-top-right {
    top: 85px !important;
    right: 20px !important;
}

#toast-container.toast-top-left {
    top: 85px !important;
    left: 20px !important;
}

#toast-container.toast-bottom-right {
    bottom: 20px !important;
    right: 20px !important;
}

#toast-container.toast-bottom-left {
    bottom: 20px !important;
    left: 20px !important;
}

/* Base toast styling */
#toast-container > .toast {
    position: relative !important;
    overflow: hidden !important;
    margin: 0 0 10px !important;
    padding: 18px 50px 18px 60px !important;
    width: 380px !important;
    max-width: calc(100vw - 40px) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08) !important;
    background-position: 20px center !important;
    background-repeat: no-repeat !important;
    background-size: 26px !important;
    color: #333 !important;
    opacity: 1 !important;
    -ms-filter: none !important;
    filter: none !important;
    border: none !important;
}

/* Success toast */
#toast-container > .toast-success {
    background-color: #ffffff !important;
    border-left: 5px solid #10b981 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='%2310b981' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Error toast */
#toast-container > .toast-error {
    background-color: #ffffff !important;
    border-left: 5px solid #ef4444 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='%23ef4444' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Warning toast */
#toast-container > .toast-warning {
    background-color: #ffffff !important;
    border-left: 5px solid #f59e0b !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='%23f59e0b' viewBox='0 0 256 256'%3E%3Cpath d='M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Info toast */
#toast-container > .toast-info {
    background-color: #ffffff !important;
    border-left: 5px solid #3b82f6 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='%233b82f6' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Toast title */
#toast-container > .toast .toast-title {
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
    color: #1f2937 !important;
}

/* Toast message */
#toast-container > .toast .toast-message {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #4b5563 !important;
    word-wrap: break-word !important;
}

/* Toast close button */
#toast-container > .toast .toast-close-button {
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
    opacity: 1 !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

#toast-container > .toast .toast-close-button:hover,
#toast-container > .toast .toast-close-button:focus {
    color: #374151 !important;
    opacity: 1 !important;
}

/* Toast progress bar */
#toast-container > .toast .toast-progress {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 4px !important;
    opacity: 0.3 !important;
    border-radius: 0 0 12px 12px !important;
}

#toast-container > .toast-success .toast-progress {
    background-color: #10b981 !important;
}

#toast-container > .toast-error .toast-progress {
    background-color: #ef4444 !important;
}

#toast-container > .toast-warning .toast-progress {
    background-color: #f59e0b !important;
}

#toast-container > .toast-info .toast-progress {
    background-color: #3b82f6 !important;
}

/* Hover effect */
#toast-container > .toast:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 6px 15px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
}

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

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

#toast-container > .toast {
    animation: toastSlideIn 0.4s ease-out forwards !important;
}

/* Mobile responsiveness */
@media only screen and (max-width: 480px) {
    #toast-container {
        left: 10px !important;
        right: 10px !important;
    }
    
    #toast-container.toast-top-right,
    #toast-container.toast-top-left {
        top: 70px !important;
        left: 10px !important;
        right: 10px !important;
    }
    
    #toast-container.toast-bottom-right,
    #toast-container.toast-bottom-left {
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
    }
    
    #toast-container > .toast {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
    }
}

/* Tablet responsiveness */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    #toast-container > .toast {
        width: 340px !important;
    }
}