#alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

#alert-container .portal-toast {
    pointer-events: auto;
}

.portal-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: min(420px, calc(100vw - 40px));
    padding: 12px 16px;
    border-radius: 6px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    transform: translateX(100%);
    opacity: 0;
    animation: portalToastSlideIn 0.5s ease forwards;
}

.portal-toast-success { background-color: #28a745; }
.portal-toast-warning { background-color: #F9AA1B; }
.portal-toast-info { background-color: #17a2b8; }
.portal-toast-error { background-color: #dc3545; }

.portal-toast .portal-toast-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
    line-height: 1;
    padding: 0;
}

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

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

/* Instruction panels — gray background, white text */
.alert.alert-instruction,
.alert.alert-secondary.bg-secondary {
    background-color: #8592a3 !important;
    border-color: #6f7d8c !important;
    color: #fff !important;
}

.alert.alert-instruction .alert-heading,
.alert.alert-secondary.bg-secondary .alert-heading,
.alert.alert-instruction h6,
.alert.alert-secondary.bg-secondary h6 {
    color: #fff !important;
}

.alert.alert-instruction p,
.alert.alert-instruction small,
.alert.alert-instruction strong,
.alert.alert-instruction li,
.alert.alert-secondary.bg-secondary p,
.alert.alert-secondary.bg-secondary small,
.alert.alert-secondary.bg-secondary strong,
.alert.alert-secondary.bg-secondary li {
    color: #fff !important;
}

.alert.alert-instruction .text-muted,
.alert.alert-secondary.bg-secondary .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.alert.alert-instruction .alert-link,
.alert.alert-secondary.bg-secondary .alert-link,
.alert.alert-instruction a:not(.btn):not(.badge),
.alert.alert-secondary.bg-secondary a:not(.btn):not(.badge) {
    color: #fff !important;
    text-decoration: underline;
}

.alert.alert-instruction .btn-close,
.alert.alert-secondary.bg-secondary .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}

.alert.alert-instruction i.bx,
.alert.alert-secondary.bg-secondary i.bx {
    color: #fff !important;
}

/* Job / import progress toast — primary (and completed) background with white text */
#import-alert,
#import-alert.bg-primary,
#import-alert.bg-completed {
    color: #fff !important;
}

#import-alert strong,
#import-alert .small,
#import-alert span,
#import-alert #alert-title,
#import-alert #alert-progress-label,
#import-alert #extra-title {
    color: #fff !important;
}

#import-alert hr {
    border-color: rgba(255, 255, 255, 0.35);
    opacity: 1;
}