/* Complete Blazored Toast Override */
.blazored-toast-container {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 9999 !important;
}

.blazored-toast {
    position: relative !important;
    background: white !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    margin-bottom: 10px !important;
    max-width: 350px !important;
    padding: 15px 45px 15px 50px !important; /* Left space for icon, right space for close */
    color: #333 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    display: flex !important;
    align-items: center !important;
    min-height: 60px !important;
}

    /* COMPLETELY HIDE THE UGLY CLOSE BUTTON */
    .blazored-toast button,
    .blazored-toast .blazored-toast-close-button,
    .blazored-toast [class*="close"],
    .blazored-toast [aria-label*="close"],
    .blazored-toast [aria-label*="Close"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Add our own clean close button */
    .blazored-toast::after {
        content: "×" !important;
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        transform: translateY(-50%) !important;
        font-size: 18px !important;
        color: #999 !important;
        cursor: pointer !important;
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        hover: background-color: rgba(0,0,0,0.1) !important;
    }

/* Success Toast - Green */
.blazored-toast-success {
    border-left: 5px solid #28a745 !important;
    background-color: #f8fff9 !important;
    color: #155724 !important;
}

    .blazored-toast-success::before {
        content: "✓" !important;
        position: absolute !important;
        left: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #28a745 !important;
        font-size: 16px !important;
        font-weight: bold !important;
    }

/* Error Toast - Red */
.blazored-toast-error {
    border-left: 5px solid #dc3545 !important;
    background-color: #fff5f5 !important;
    color: #721c24 !important;
}

    .blazored-toast-error::before {
        content: "✕" !important;
        position: absolute !important;
        left: 18px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #dc3545 !important;
        font-size: 14px !important;
        font-weight: bold !important;
    }

/* Info Toast - Blue */
.blazored-toast-info {
    border-left: 5px solid #17a2b8 !important;
    background-color: #f4fdff !important;
    color: #0c5460 !important;
}

    .blazored-toast-info::before {
        content: "i" !important;
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #17a2b8 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        font-style: italic !important;
    }

/* Auto-hide toasts after 4 seconds */
.blazored-toast {
    animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 3.5s forwards !important;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes fadeOut {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}