/* Centralized notification styling for toastr and SweetAlert2 */

#toast-container {
    z-index: 200000 !important;
    pointer-events: none !important;
}

#toast-container > div {
    pointer-events: auto !important;
    position: relative !important;
    min-width: min(24rem, calc(100vw - 1.5rem)) !important;
    max-width: min(30rem, calc(100vw - 1.5rem)) !important;
    width: auto !important;
    margin: 0 0 0.75rem !important;
    padding: 0.95rem 2.5rem 0.95rem 4.25rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-left: 5px solid rgba(148, 163, 184, 0.8) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.35) !important;
    background-image: none !important;
    font-family: inherit !important;
    transition: opacity 0.32s ease, transform 0.32s ease, box-shadow 0.2s ease !important;
    transform: translateY(0) scale(1) !important;
}

#toast-container > div::before {
    content: '' !important;
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.98) url('/img/aio-erp-logo-mark.png') center center / 1.7rem 1.7rem no-repeat !important;
    border-radius: 14px !important;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18), 0 12px 24px -18px rgba(15, 23, 42, 0.35) !important;
    pointer-events: none !important;
}

#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-info {
    background-image: none !important;
}

#toast-container > .toast-success { border-left-color: #16a34a !important; }
#toast-container > .toast-error { border-left-color: #dc2626 !important; }
#toast-container > .toast-warning { border-left-color: #f59e0b !important; }
#toast-container > .toast-info { border-left-color: var(--color-primary, #147cbb) !important; }

#toast-container > .toast-success {
    background: #f0fdf4 !important;
    border-color: rgba(22, 163, 74, 0.2) !important;
}

#toast-container > .toast-error {
    background: #fef2f2 !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}

#toast-container > .toast-warning {
    background: #fffbeb !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

#toast-container > .toast-info {
    background: #eff6ff !important;
    border-color: rgba(20, 124, 187, 0.2) !important;
}

#toast-container > div .toast-title {
    display: block !important;
    margin: 0 0 0.18rem !important;
    padding-right: 0.75rem !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #0f172a !important;
    white-space: normal !important;
    word-break: break-word !important;
}

#toast-container > div .toast-message {
    display: block !important;
    margin: 0 !important;
    padding-right: 0.35rem !important;
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    color: #334155 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

#toast-container > div .toast-close-button {
    position: absolute !important;
    top: 0.72rem !important;
    right: 0.78rem !important;
    float: none !important;
    margin: 0 !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    color: rgba(100, 116, 139, 0.95) !important;
    opacity: 0.7 !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

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

#toast-container > div .toast-progress {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    background: rgba(15, 23, 42, 0.18) !important;
    border-radius: 0 0 16px 16px !important;
}

.swal2-container {
    z-index: 210000 !important;
}

.swal2-popup,
.swal2-popup.aio-standard-modal {
    width: min(32rem, calc(100vw - 1.5rem)) !important;
    max-width: min(32rem, calc(100vw - 1.5rem)) !important;
    padding: 1.5rem 1.5rem 1.25rem !important;
    border-radius: 22px !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    background: var(--card, #ffffff) !important;
    color: var(--card-foreground, #0f172a) !important;
    box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.45) !important;
    font-family: inherit !important;
}

.swal2-title,
.swal2-title.aio-font-style {
    padding: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: inherit !important;
    font-family: inherit !important;
}

.swal2-html-container,
.swal2-html-container.aio-font-style {
    margin: 0.75rem 0 0 !important;
    padding: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    color: rgba(71, 85, 105, 0.96) !important;
    font-family: inherit !important;
}

.swal2-icon {
    margin: 0 auto 0.9rem !important;
    width: 4rem !important;
    height: 4rem !important;
    border-width: 0.2rem !important;
}

.swal2-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(128px, 32vw) !important;
    max-height: 128px !important;
    margin: 0 auto 1rem !important;
    object-fit: contain !important;
}

.swal2-actions {
    width: 100% !important;
    margin: 1.15rem 0 0 !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
}

.swal2-styled.swal2-confirm,
.swal2-confirm {
    min-width: 8.5rem !important;
    margin: 0 !important;
    padding: 0.78rem 1rem !important;
    border-radius: 14px !important;
    border: 1px solid var(--color-primary, #147cbb) !important;
    background: var(--color-primary, #147cbb) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

.swal2-styled.swal2-cancel,
.swal2-cancel {
    min-width: 8.5rem !important;
    margin: 0 !important;
    padding: 0.78rem 1rem !important;
    border-radius: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    background: rgba(248, 250, 252, 0.95) !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

.swal2-loader {
    border-color: var(--color-primary, #147cbb) transparent var(--color-primary, #147cbb) transparent !important;
}

.swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

html.dark-mode #toast-container > div {
    border-color: rgba(148, 163, 184, 0.16) !important;
    background: #111827 !important;
    color: #e5e7eb !important;
}

html.dark-mode #toast-container > div .toast-message {
    color: rgba(203, 213, 225, 0.92) !important;
}

html.dark-mode #toast-container > div .toast-close-button {
    color: rgba(203, 213, 225, 0.85) !important;
}

html.dark-mode #toast-container > div::before {
    background-color: rgba(15, 23, 42, 0.96) !important;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18), 0 12px 24px -18px rgba(2, 6, 23, 0.65) !important;
}

html.dark-mode #toast-container > .toast-success {
    background: #0f1f17 !important;
    border-color: rgba(22, 163, 74, 0.3) !important;
}

html.dark-mode #toast-container > .toast-error {
    background: #2a1317 !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}

html.dark-mode #toast-container > .toast-warning {
    background: #2a2110 !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
}

html.dark-mode #toast-container > .toast-info {
    background: #102030 !important;
    border-color: rgba(20, 124, 187, 0.3) !important;
}

html.dark-mode .swal2-popup,
html.dark-mode .swal2-popup.aio-standard-modal {
    border-color: rgba(148, 163, 184, 0.14) !important;
    background: #121821 !important;
    color: #f8fafc !important;
}

html.dark-mode .swal2-html-container,
html.dark-mode .swal2-html-container.aio-font-style {
    color: rgba(203, 213, 225, 0.9) !important;
}

html.dark-mode .swal2-styled.swal2-cancel,
html.dark-mode .swal2-cancel {
    background: rgba(30, 41, 59, 0.96) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

@media (max-width: 640px) {
    #toast-container {
        left: 0.75rem !important;
        right: 0.75rem !important;
    }

    #toast-container > div {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        padding: 0.92rem 2.3rem 0.92rem 3.95rem !important;
    }

    #toast-container > div::before {
        left: 0.9rem !important;
        top: 1rem !important;
        width: 1.9rem !important;
        height: 1.9rem !important;
        transform: none !important;
        background-size: 1.35rem 1.35rem !important;
    }

    .swal2-popup,
    .swal2-popup.aio-standard-modal {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        padding: 1.2rem 1rem 1rem !important;
    }

    .swal2-actions {
        flex-direction: column-reverse !important;
    }

    .swal2-styled.swal2-confirm,
    .swal2-confirm,
    .swal2-styled.swal2-cancel,
    .swal2-cancel {
        width: 100% !important;
    }
}