/*
   VPP transient feedback
   Keep Radzen's notification service, but give it a bounded enterprise
   surface. Durable workflow updates belong to the header inbox.
*/

html:root {
    --rz-notification-container-background-color: transparent;
    --rz-notification-shadow: var(--vpp-shadow-lg);
    --rz-notification-border-radius: var(--vpp-radius-md);
    --rz-notification-padding: 12px 14px;
    --rz-notification-gap: 10px;
    --rz-notification-success-background-color: var(--vpp-bg-surface);
    --rz-notification-success-color: var(--vpp-text-primary);
    --rz-notification-success-icon-color: var(--vpp-success);
    --rz-notification-warning-background-color: var(--vpp-bg-surface);
    --rz-notification-warning-color: var(--vpp-text-primary);
    --rz-notification-warning-icon-color: var(--vpp-warning);
    --rz-notification-error-background-color: var(--vpp-bg-surface);
    --rz-notification-error-color: var(--vpp-text-primary);
    --rz-notification-error-icon-color: var(--vpp-danger);
    --rz-notification-info-background-color: var(--vpp-bg-surface);
    --rz-notification-info-color: var(--vpp-text-primary);
    --rz-notification-info-icon-color: var(--vpp-info);
}

/* Radzen defaults to a fixed top-right stack. Explicit bounds prevent a
   notification from inheriting a page-wide width from a theme or layout rule. */
.rz-notification {
    position: fixed !important;
    inset-block-start: 20px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 20px !important;
    width: min(400px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    z-index: 10000 !important;
    pointer-events: none;
}

.rz-notification-item-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    overflow: hidden;
    border-radius: var(--vpp-radius-md) !important;
    background: transparent !important;
    animation: vpp-toast-in 180ms ease-out both;
    pointer-events: auto;
}

.rz-notification-item {
    width: 100%;
    min-height: 60px;
    border: 1px solid var(--vpp-border-strong) !important;
    border-inline-start-width: 4px !important;
    border-radius: var(--vpp-radius-md) !important;
    box-shadow: var(--vpp-shadow-lg) !important;
    color: var(--vpp-text-primary) !important;
    background: var(--vpp-bg-surface) !important;
    font-family: var(--vpp-font-body) !important;
}

.rz-notification-success .rz-notification-item { border-inline-start-color: var(--vpp-success) !important; }
.rz-notification-warn .rz-notification-item { border-inline-start-color: var(--vpp-warning) !important; }
.rz-notification-error .rz-notification-item { border-inline-start-color: var(--vpp-danger) !important; }
.rz-notification-info .rz-notification-item { border-inline-start-color: var(--vpp-info) !important; }

.rz-notification-message {
    min-width: 0;
    gap: 3px;
}

.rz-notification-title {
    color: var(--vpp-text-primary) !important;
    font-family: var(--vpp-font-display) !important;
    font-size: 0.875rem !important;
    font-weight: var(--vpp-font-weight-semibold) !important;
    line-height: 1.3 !important;
}

.rz-notification-message {
    color: var(--vpp-text-secondary) !important;
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
}

.rz-notification-icon {
    flex: 0 0 auto;
    margin-top: 1px !important;
    font-size: 1.25rem !important;
}

.rz-notification-error .rz-notification-icon { color: var(--vpp-danger) !important; }
.rz-notification-warn .rz-notification-icon { color: var(--vpp-warning) !important; }
.rz-notification-success .rz-notification-icon { color: var(--vpp-success) !important; }
.rz-notification-info .rz-notification-icon { color: var(--vpp-info) !important; }

.rz-notification-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: -4px -4px 0 0 !important;
    border-radius: var(--vpp-radius-sm) !important;
    color: var(--vpp-text-secondary) !important;
    opacity: 0.8 !important;
    transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.rz-notification-close:hover,
.rz-notification-close:focus-visible {
    color: var(--vpp-text-primary) !important;
    background: var(--vpp-bg-subtle) !important;
    opacity: 1 !important;
    outline: 2px solid var(--vpp-border-focus);
    outline-offset: 1px;
}

@keyframes vpp-toast-in {
    from { opacity: 0; transform: translate3d(0, -8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 767px) {
    .rz-notification {
        inset-block-start: 12px !important;
        inset-inline-end: 12px !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rz-notification-item-wrapper {
        animation: none;
    }
}