/*
 * Imob Engine — sistema de toasts (público e administrativo compartilham o
 * visual base). Claro/escuro via tokens; respeita prefers-reduced-motion.
 */

.ie-toast-region {
	position: fixed;
	z-index: var(--ie-z-toast, 1100);
	/* Canto superior direito, logo abaixo do cabeçalho. `--ie-header-h` é a
	   altura real dele (publicada por `navigation.js`, que também acompanha o
	   redimensionamento); o valor de reserva cobre o intervalo entre o
	   primeiro pixel pintado e a medição. */
	top: calc(var(--ie-header-h, 72px) + var(--wp-admin--admin-bar--height, 0px) + 1rem);
	right: 1rem;
	transition: top var(--ie-transition, 220ms) ease;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	width: min(380px, calc(100vw - 2rem));
	pointer-events: none;
}

.ie-toast {
	pointer-events: auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: .7rem;
	position: relative;
	overflow: hidden;
	background: var(--ie-surface, #fff);
	color: var(--ie-text, #181818);
	border: 1px solid var(--ie-border, #d9d1c1);
	border-left: 4px solid var(--ie-brand-fg, #181818);
	border-radius: var(--ie-radius, 12px);
	box-shadow: var(--ie-shadow-md, 0 8px 24px rgba(0, 0, 0, .14));
	padding: .8rem .9rem;
	opacity: 0;
	/* Entra e sai por cima: é de lá que a região vem agora. */
	transform: translateY(-12px);
	transition: opacity var(--ie-transition, 220ms) ease, transform var(--ie-transition, 220ms) ease;
}
.ie-toast.is-in { opacity: 1; transform: translateY(0); }
.ie-toast.is-out { opacity: 0; transform: translateY(-12px); }

.ie-toast--success { border-left-color: var(--ie-success, #256b45); }
.ie-toast--error { border-left-color: var(--ie-danger, #a13131); }
.ie-toast--warning { border-left-color: var(--ie-warning, #8a5a00); }
.ie-toast--info { border-left-color: var(--ie-info, #1f6feb); }

.ie-toast__icon { display: flex; margin-top: .1rem; }
.ie-toast--success .ie-toast__icon { color: var(--ie-success, #256b45); }
.ie-toast--error .ie-toast__icon { color: var(--ie-danger, #a13131); }
.ie-toast--warning .ie-toast__icon { color: var(--ie-warning, #8a5a00); }
.ie-toast--info .ie-toast__icon { color: var(--ie-info, #1f6feb); }

.ie-toast__body { min-width: 0; }
.ie-toast__title { margin: 0 0 .15rem; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.ie-toast__msg { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--ie-text-muted, #625f58); word-wrap: break-word; }
.ie-toast__title + .ie-toast__msg { color: var(--ie-text-muted, #625f58); }

.ie-toast__action {
	grid-column: 2 / 3;
	justify-self: start;
	margin-top: .4rem;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--ie-brand-fg, #181818);
	font: inherit;
	font-weight: 600;
	font-size: .88rem;
	cursor: pointer;
}
.ie-toast__action:hover { color: var(--ie-brand-fg-hover, #000); }
.ie-toast__action:focus-visible { outline: none; box-shadow: var(--ie-focus-ring); border-radius: 4px; }

.ie-toast__close {
	background: transparent;
	border: none;
	padding: .2rem;
	margin: -.2rem -.2rem 0 0;
	color: var(--ie-text-muted, #625f58);
	cursor: pointer;
	border-radius: var(--ie-radius-sm, 8px);
	line-height: 0;
}
.ie-toast__close:hover { color: var(--ie-text, #181818); background: var(--ie-surface-strong, #eee7d8); }
.ie-toast__close:focus-visible { outline: none; box-shadow: var(--ie-focus-ring); }

.ie-toast__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	transform-origin: left center;
	background: var(--ie-brand-fg, #181818);
	opacity: .5;
}
.ie-toast--success .ie-toast__progress { background: var(--ie-success, #256b45); }
.ie-toast--error .ie-toast__progress { background: var(--ie-danger, #a13131); }
.ie-toast--warning .ie-toast__progress { background: var(--ie-warning, #8a5a00); }
.ie-toast--info .ie-toast__progress { background: var(--ie-info, #1f6feb); }

/* Mobile: ocupa a largura da viewport logo abaixo do cabeçalho. */
@media (max-width: 480px) {
	.ie-toast-region {
		left: 1rem; right: 1rem; width: auto;
		top: calc(var(--ie-header-h, 64px) + var(--wp-admin--admin-bar--height, 0px) + .75rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ie-toast { transition: opacity .001ms; transform: none; }
	.ie-toast.is-in, .ie-toast.is-out { transform: none; }
	.ie-toast__progress { display: none; }
}