/*
 * SweetAlert toast corrections.
 *
 * Two things work against this file:
 *
 * 1. SweetAlert v11 deliberately keeps its own rules at low specificity (it wraps selectors in
 *    :where()) so that a theme can override them. UBold takes that offer for the modal —
 *    `.swal2-popup` gets a 28em width and 2rem of padding, `.swal2-container .swal2-title` gets 20px
 *    — but it never adds a toast exception, so a toast came out rendered as a modal.
 * 2. Library CSS is injected with $('head').prepend(), which places it BEFORE the theme's app.css.
 *    Anything decided on source order therefore goes to UBold, not to us.
 *
 * Hence every rule is scoped through .swal2-container AND .swal2-toast, and the layout below is flex
 * rather than a correction on swal2's grid — that grid is what kept pulling the message up next to the
 * heading whenever an action button claimed a column.
 *
 * Every --theme-* token carries a fallback that reproduces SweetAlert's own popup look, so a client
 * without the UBold theme (a kiosk, a website) gets a toast that matches its plain swal popups instead
 * of an unstyled one. The UBold clients still resolve the token and stay on brand.
 */

.swal2-container .swal2-popup.swal2-toast {
	display: flex !important;
	align-items: center;
	width: auto;
	/* Bounded so a long message wraps inside the card instead of running the toast off the viewport
	   edge (swal pins the corner with `inset: auto 0 0 auto`, so unbounded growth pushes left). */
	max-width: min(24rem, calc(100vw - 1.5rem));
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--theme-border-color, #e7e7e7);
	border-radius: var(--theme-border-radius, 0.375rem);
	background-color: var(--theme-secondary-bg, #fff);
	/* Has to be re-stated: the container is click-through so it never swallows page clicks, but the
	   toast itself must still catch them or its button does nothing and the click lands on whatever
	   sits underneath. */
	pointer-events: auto;
	/* Spelled out rather than taken from --theme-box-shadow-lg, which is
	   `0 .25rem 1rem rgba(var(--theme-body-color-rgb), .2)` — in dark mode the body colour is light,
	   so that one glows pale below the box instead of grounding it. */
	box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.35), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.2);
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon {
	flex: 0 0 auto;
	/* Ring and glyph are both sized in rem so their proportion is fixed rather than depending on
	   whichever em base swal2 and the theme hand down. The ring is the icon's own border: at swal2's
	   default .25em it reads far heavier than the glyph, which strokes at 2px. */
	width: 1.5rem;
	min-width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	border-width: 2px;
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
	font-size: 1rem;
	line-height: 1;
}

/* The heading and the message both live in here, so they stack no matter what swal2 does around them. */
.swal2-container .swal2-popup.swal2-toast .swal2-title {
	flex: 1 1 auto;
	/* min-width:0 lets the flex item shrink so its text can wrap rather than force the card wider. */
	min-width: 0;
	margin: 0 0 0 0.75rem;
	padding: 0;
	text-align: initial;
}

.swal2-container .swal2-popup.swal2-toast .meriad-toast-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.swal2-container .swal2-popup.swal2-toast .meriad-toast-heading {
	font-size: 0.875rem;
	font-weight: var(--theme-font-weight-medium, 600);
	line-height: 1.45;
	/* Long headings and messages wrap inside the bounded card instead of overflowing it. */
	overflow-wrap: anywhere;
}

.swal2-container .swal2-popup.swal2-toast .meriad-toast-message {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--theme-secondary-color, #6c757d);
	overflow-wrap: anywhere;
}

/* Only present on toasts that offer an action, such as the undo after deleting an attachment. */
.swal2-container .swal2-popup.swal2-toast .swal2-actions {
	flex: 0 0 auto;
	width: auto;
	margin: 0 0 0 1rem;
	padding: 0;
}

.swal2-container .swal2-popup.swal2-toast .swal2-actions .swal2-styled {
	margin: 0;
	white-space: nowrap;
}

/* The html slot stays empty — everything is in the title — so it must not take up a line of its own. */
.swal2-container .swal2-popup.swal2-toast .swal2-html-container {
	display: none;
}

/* Without this the ring keeps SweetAlert's own #a5dc86, which sits next to the timer bar as a
   second, slightly-off green. var(--theme-*) also follows the dark theme; the fallback is swal's own
   icon colour, so a non-UBold client matches its popups exactly. */
.swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-success {
	border-color: var(--theme-success, #a5dc86);
	color: var(--theme-success, #a5dc86);
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-error {
	border-color: var(--theme-danger, #f27474);
	color: var(--theme-danger, #f27474);
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-warning {
	border-color: var(--theme-warning, #f8bb86);
	color: var(--theme-warning, #f8bb86);
}

.swal2-container .swal2-popup.swal2-toast .swal2-icon.swal2-info {
	border-color: var(--theme-info, #3fc3ee);
	color: var(--theme-info, #3fc3ee);
}

/* The bar takes the icon's colour per type (toast.js tags it meriad-toast-progress-<type>), so an
   error toast no longer counts down in green. */
.swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar.meriad-toast-progress-success {
	background-color: var(--theme-success, #a5dc86);
}

.swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar.meriad-toast-progress-error {
	background-color: var(--theme-danger, #f27474);
}

.swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar.meriad-toast-progress-warning {
	background-color: var(--theme-warning, #f8bb86);
}

.swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar.meriad-toast-progress-info {
	background-color: var(--theme-info, #3fc3ee);
}

/* The bar is absolutely positioned along the bottom edge and rounds itself with SweetAlert's own
   --swal2-border-radius, which is not the radius the toast above uses — so its corners stick out. */
.swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar-container {
	border-bottom-right-radius: var(--theme-border-radius, 0.375rem);
	border-bottom-left-radius: var(--theme-border-radius, 0.375rem);
}

/*
 * The container is position:fixed with inset:0, so it spans the full viewport height even though a
 * toast only occupies a corner of it. UBold dims and blurs that whole area through
 * `.swal2-backdrop-show`, and this SweetAlert build ignores the `backdrop: false` option (it never
 * emits the swal2-no-backdrop class the stylesheet expects). Hence the haze down the side of the
 * page. For toasts the container has to stay invisible and click-through — the toast itself puts
 * pointer-events back on.
 */
body.swal2-toast-shown .swal2-container,
body.swal2-toast-shown .swal2-container.swal2-backdrop-show {
	background: transparent;
	backdrop-filter: none;
	pointer-events: none;
}

/* SweetAlert pins the corner positions with `inset: auto 0 0 auto`, so the padding is what keeps the
   toast clear of the viewport edge.
   The z-index has to clear the app chrome: the team app's menu bar sits at 1030 and was catching
   clicks meant for the toast's button. */
body.swal2-toast-shown .swal2-container {
	z-index: 1090;
	/* swal2 fixes the toast container at 360px. A toast wider than that pushes past the left edge and
	   its shadow gets cut off there, so the container is left to size itself to whatever it holds. */
	width: auto;
	max-width: 100%;
	padding: 0.75rem;
	/* Without this the box-shadow is clipped on the top and left edges. swal2's JS writes
	   `overflow-y: hidden` inline on the container, and an inline style outranks any plain rule — so
	   restoring visible overflow needs !important (the stylesheet's own overflow-x: hidden would lose
	   on specificity alone, but the inline overflow-y would not). */
	overflow: visible !important;
}