/* ── Toast notifications ── Syncfusion's own toast markup is used (Title + ContentTemplate on each ToastModel), so the theme stylesheet supplies the padding, the type scale and the icon slot. This file only does what the theme cannot: place the stack, colour it per severity, and keep it above modals. !important throughout is required, not lazy: the Syncfusion theme stylesheet is injected into at runtime by the theme switcher, so it always loads *after* this file and wins every same-specificity match. */ /* ── Placement ── Bottom-left, flush against the edge. Top-right sat over the content the user was working on and over the page's own action buttons; the bottom-left corner is the quietest region of every screen in the app. No sidebar offset: the toast deliberately overlays the navigation when it is open, which the stacking scale allows (toasts outrank the sidebar's 1001). */ .e-toast-container.e-toast-bottom-left { bottom: var(--tv-toast-offset-block, 1.25rem) !important; left: var(--tv-toast-offset-inline, 0) !important; z-index: var(--tv-z-toast, 1300) !important; } .e-toast-container .e-toast { min-width: 18rem; max-width: 26rem; border-radius: 6px !important; border-left-width: 6px !important; border-left-style: solid !important; } /* min-width:0 lets a long message wrap instead of forcing the flex row wider than the toast. */ .e-toast-container .e-toast .e-toast-message { min-width: 0; } .tv-toast-message { display: flex; align-items: baseline; gap: 0.5rem; overflow-wrap: anywhere; } /* Repeat counter on a grouped toast. Neutral rather than severity-coloured: it is metadata about the toast, not a second status. */ .tv-toast-count { flex: none; font-size: 0.75rem; font-weight: 600; line-height: 1.4; padding: 0 0.4rem; border-radius: 999px; background: var(--color-sf-table-bg-color-hover, rgba(127, 127, 127, 0.18)); font-variant-numeric: tabular-nums; } /* ── Severity ── Each surface is an opaque mix of the accent into the theme's own toast background (see --notification-*-surface in app.css), so light, dark and high contrast are all covered by one declaration and the text keeps the theme's already-contrast-checked foreground. */ .e-toast-container .e-toast.toast-info { background-color: var(--notification-info-surface) !important; border-left-color: var(--notification-info-accent) !important; } .e-toast-container .e-toast.toast-success { background-color: var(--notification-success-surface) !important; border-left-color: var(--notification-success-accent) !important; } .e-toast-container .e-toast.toast-warning { background-color: var(--notification-warning-surface) !important; border-left-color: var(--notification-warning-accent) !important; } /* Errors render as a modal dialog, not a toast. The rule is kept because the E2E toast helper still recognises the variant, and because a caller reaching for it should not get an unstyled box. */ .e-toast-container .e-toast.toast-error { background-color: var(--notification-error-surface) !important; border-left-color: var(--notification-error-accent) !important; } /* The icon and the progress bar both default to the theme primary, which reads as "info" on every severity. */ .toast-info .e-toast-icon { color: var(--notification-info-accent) !important; } .toast-success .e-toast-icon { color: var(--notification-success-accent) !important; } .toast-warning .e-toast-icon { color: var(--notification-warning-accent) !important; } .toast-error .e-toast-icon { color: var(--notification-error-accent) !important; } .toast-info .e-toast-progress { background-color: var(--notification-info-accent) !important; } .toast-success .e-toast-progress { background-color: var(--notification-success-accent) !important; } .toast-warning .e-toast-progress { background-color: var(--notification-warning-accent) !important; } .toast-error .e-toast-progress { background-color: var(--notification-error-accent) !important; } .e-toast-container .e-toast .e-toast-icon { font-size: 1.25rem; line-height: 1.3; } .e-toast-container .e-toast .e-toast-title { font-weight: 700 !important; } /* ── Reduced motion ── The slide-in is decorative; a notification appearing without it loses nothing. */ @media (prefers-reduced-motion: reduce) { .e-toast-container .e-toast { animation: none !important; transition: none !important; } } /* Forced colors mode (Windows High Contrast): the translucent tints collapse to system colours, so the severity has to be carried by a border instead. */ @media (forced-colors: active) { .e-toast-container .e-toast { border: 3px solid CanvasText !important; background-color: Canvas !important; color: CanvasText !important; } .e-toast-container .e-toast .e-toast-title, .e-toast-container .e-toast .e-toast-icon { color: CanvasText !important; } }