/* Requests/public/css/requests_toast.css */

/* Define toast specific variables for light theme */
:root {
    --toast-bg-color: var(--bg-white); /* White background for default/light info */
    --toast-text-color: var(--text-color); /* Dark text */
    --toast-shadow-color: rgba(0, 0, 0, 0.2);

    /* Info Toast Colors (Light Theme) */
    --toast-info-bg: var(--info-light); /* Light blue background */
    --toast-info-text: var(--info-dark); /* Dark blue text */

    /* Success Toast Colors (Light Theme) */
    --toast-success-bg: var(--success-light); /* Light green background */
    --toast-success-text: var(--success-dark); /* Dark green text */

    /* Error Toast Colors (Light Theme) */
    --toast-error-bg: var(--danger-light); /* Light red background */
    --toast-error-text: var(--danger-dark); /* Dark red text */
}

/* Define toast specific variables for dark theme */
body.dark-theme {
    --toast-bg-color: var(--bg-dark-surface); /* Dark surface background */
    --toast-text-color: var(--text-color); /* Light text */
    --toast-shadow-color: rgba(0, 0, 0, 0.4);

    /* Info Toast Colors (Dark Theme) */
    /* Using rgba of info-color for background for subtle transparency and better contrast */
    --toast-info-bg: rgba(70, 130, 180, 0.2); /* SteelBlue with transparency */
    --toast-info-text: var(--info-color); /* SteelBlue text */

    /* Success Toast Colors (Dark Theme) */
    --toast-success-bg: rgba(50, 205, 50, 0.2); /* LimeGreen with transparency */
    --toast-success-text: var(--success-color); /* LimeGreen text */

    /* Error Toast Colors (Dark Theme) */
    --toast-error-bg: rgba(255, 69, 0, 0.2); /* Orange-Red with transparency */
    --toast-error-text: var(--danger-color); /* Orange-Red text */
}


.toast-notification-container {
    position: fixed;
    top: 80px; /* Positions it below the nav bar with some padding */
    left: 20px; /* Default left margin for smaller screens (no sidebar) */
    right: 20px; /* Default right margin for smaller screens */
    margin-left: auto; /* Auto margins for horizontal centering */
    margin-right: auto; /* Auto margins for horizontal centering */
    z-index: 1050; /* Ensure it's above most other elements, including modals if necessary */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between multiple toasts if they appear */
    max-width: 350px; /* Limit width */
    width: auto; /* Allow width to adjust based on content up to max-width */
    align-items: center; /* Center toasts if they are narrower than max-width */
}

/* Adjust position for desktop when the sidebar is visible */
@media (min-width: 993px) { /* Assuming sidebar becomes visible at 993px and is 250px wide */
    .toast-notification-container {
        left: 250px; /* Position it to the right of the sidebar */
        right: 20px; /* Keep some margin from the right edge */
        /* margin-left and margin-right auto will then center the toast
           within the space defined by `left` and `right` */
    }
}

.toast-notification-item {
    background-color: var(--toast-bg-color);
    color: var(--toast-text-color);
    padding: 12px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--toast-shadow-color);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideInOut 5s forwards; /* Changed animation name */
    min-width: 250px; /* Ensures it's not too narrow */
    border: 1px solid var(--border-color); /* Add border for consistency */
}

/* Specific styles for different toast types using theme variables */
.toast-notification-item.info {
    background-color: var(--toast-info-bg);
    color: var(--toast-info-text);
    border-color: var(--info-color); /* Use the main color for the border */
}

.toast-notification-item.success {
    background-color: var(--toast-success-bg);
    color: var(--toast-success-text);
    border-color: var(--success-color); /* Use the main color for the border */
}

.toast-notification-item.error {
    background-color: var(--toast-error-bg);
    color: var(--toast-error-text);
    border-color: var(--danger-color); /* Use the main color for the border */
}

/* Ensure icons within specific toast types use their respective main color */
.toast-notification-item.info .notification-icon {
    color: var(--info-color);
}
.toast-notification-item.success .notification-icon {
    color: var(--success-color);
}
.toast-notification-item.error .notification-icon {
    color: var(--danger-color);
}


.toast-notification-item .notification-icon {
    font-size: 1.2em;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.toast-notification-item p {
    margin: 0;
    flex-grow: 1; /* Allow text to take available space */
}

/* Keyframes for sliding animation from right to left */
@keyframes slideInOut {
    0% {
        opacity: 0;
        transform: translateX(0%) translateY(-20px); /* Start slightly above, centered */
    }
    10% {
        opacity: 1;
        transform: translateX(0%) translateY(0); /* Slide into view, centered */
    }
    90% {
        opacity: 1;
        transform: translateX(0%) translateY(0); /* Stay in view */
    }
    100% {
        opacity: 0;
        transform: translateX(0%) translateY(-20px); /* Slide out and up */
    }
}

/* Responsive adjustment for small screens: ensure it remains centered and doesn't stretch too wide */
@media (max-width: 576px) {
    .toast-notification-container {
        max-width: calc(100% - 40px); /* Max width with 20px padding on each side */
        width: auto; /* Let content dictate width up to max-width */
    }
    .toast-notification-item {
        width: 100%; /* Take full width of its container on small screens */
    }
}