/*
 * QAME v8.12.7 — Compact Wrapped Transient Alerts
 *
 * Applies ONLY to transient SweetAlert2 toast mode and Toastr notifications.
 * It intentionally does NOT restyle SweetAlert2 confirmation/dialog modals
 * and does NOT change normal Bootstrap .alert content blocks.
 */

:root {
    --qame-toast-max-width: 460px;
    --qame-toast-min-height: 44px;
    --qame-toast-radius: 10px;
}

/* SweetAlert2 transient toasts only */
.swal2-container .swal2-popup.swal2-toast,
.swal2-container .swal2-popup.swal2-toast.qame-compact-wrap-toast {
    width: auto !important;
    min-width: 240px !important;
    max-width: min(
        var(--qame-toast-max-width),
        calc(100vw - 24px)
    ) !important;
    min-height: var(--qame-toast-min-height) !important;
    padding: 8px 12px !important;
    border-radius: var(--qame-toast-radius) !important;
    box-shadow:
        0 8px 24px rgba(34, 48, 62, .16) !important;
    align-items: center !important;
    overflow: hidden !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin: 0 9px 0 0 !important;
    border-width: 2px !important;
    font-size: 13px !important;
    flex: 0 0 24px !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon-content {
    font-size: 15px !important;
    line-height: 1 !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-html-container,
.swal2-container .swal2-popup.swal2-toast.qame-compact-wrap-toast
    .qame-compact-wrap-toast-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    min-width: 0 !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
    font-weight: 500 !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-close {
    width: 24px !important;
    height: 24px !important;
    margin: 0 0 0 8px !important;
    font-size: 20px !important;
    line-height: 24px !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar {
    height: 2px !important;
}

/* Keep the top-right toast stack tight and consistent. */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
    padding: 12px !important;
    gap: 6px !important;
}

/* Toastr transient notifications */
#toast-container {
    margin: 0 !important;
}

#toast-container > div {
    width: auto !important;
    min-width: 240px !important;
    max-width: min(
        var(--qame-toast-max-width),
        calc(100vw - 24px)
    ) !important;
    min-height: var(--qame-toast-min-height) !important;
    margin: 0 0 6px 0 !important;
    padding: 10px 34px 10px 42px !important;
    border-radius: var(--qame-toast-radius) !important;
    box-shadow:
        0 8px 24px rgba(34, 48, 62, .16) !important;
    opacity: 1 !important;
}

#toast-container > div .toast-message,
#toast-container > div .toast-title {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#toast-container > div .toast-title {
    font-weight: 600 !important;
}

#toast-container .toast-progress {
    height: 2px !important;
}

/*
 * QAME v8.12.7 wrapping rule:
 * - keep each notification as one compact visual block
 * - text may wrap naturally when needed
 * - no blank-line spacing between wrapped lines
 */
.swal2-container .swal2-popup.swal2-toast .swal2-title,
.swal2-container .swal2-popup.swal2-toast .swal2-html-container,
.swal2-container .swal2-popup.swal2-toast.qame-compact-wrap-toast
    .qame-compact-wrap-toast-title,
#toast-container > div .toast-message,
#toast-container > div .toast-title {
    line-height: 1.2 !important;
    margin-block: 0 !important;
}

.swal2-container .swal2-popup.swal2-toast {
    align-items: flex-start !important;
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon {
    margin-top: 1px !important;
}

#toast-container > div {
    white-space: normal !important;
}

@media (max-width: 575.98px) {
    .swal2-container .swal2-popup.swal2-toast,
    #toast-container > div {
        max-width: calc(100vw - 20px) !important;
    }
}

#toast-container.toast-top-right {
    top: 12px !important;
    right: 12px !important;
}

/* Small screens: still exactly one compact notification row. */
@media (max-width: 575.98px) {
    :root {
        --qame-toast-max-width: calc(100vw - 20px);
    }

    .swal2-container.swal2-top-end,
    .swal2-container.swal2-top-right {
        padding: 10px !important;
    }

    #toast-container.toast-top-right {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
    }

    #toast-container > div {
        width: 100% !important;
        min-width: 0 !important;
    }
}