/*
 * PNotify Modern Override - matches InoLeap design system
 *
 * The default Custom.css uses bright, garish colors (#aff29a, #ffaba2, #ffffa2)
 * that look out of place in the modern UI. This override replaces them with
 * subtle, modern colors inspired by Bootstrap alerts and the design system.
 *
 * Loaded AFTER Custom.css so these rules win.
 */

/* ── Light mode ── */
[data-pnotify].custom-elem,
[data-pnotify].custom-elem.pnotify-mode-light {
	--success-background-color: #d1e7dd;
	--success-border-color: #0f5132;
	--success-text-color: #0a3622;
	--success-icon-filter: none;

	--error-background-color: #f8d7da;
	--error-border-color: #842029;
	--error-text-color: #58151c;
	--error-icon-filter: none;

	--notice-background-color: #fff3cd;
	--notice-border-color: #664d03;
	--notice-text-color: #402d00;
	--notice-icon-filter: none;

	--info-background-color: #cfe2ff;
	--info-border-color: #084298;
	--info-text-color: #052c65;
	--info-icon-filter: none;
}

/* ── Dark mode (prefers-color-scheme) ── */
@media (prefers-color-scheme: dark) {
	[data-pnotify].custom-elem.pnotify-mode-no-preference {
		--success-background-color: #0d2818;
		--success-border-color: #1a7d3f;
		--success-text-color: #75e0a3;
		--success-icon-filter: none;

		--error-background-color: #2c0a0e;
		--error-border-color: #c83848;
		--error-text-color: #f1aeb5;
		--error-icon-filter: none;

		--notice-background-color: #2e2400;
		--notice-border-color: #b58700;
		--notice-text-color: #ffd470;
		--notice-icon-filter: none;

		--info-background-color: #061535;
		--info-border-color: #3a7bd5;
		--info-text-color: #9ec5fe;
		--info-icon-filter: none;
	}
}

/* ── Dark mode (explicit) ── */
[data-pnotify].custom-elem.pnotify-mode-dark {
	--success-background-color: #0d2818;
	--success-border-color: #1a7d3f;
	--success-text-color: #75e0a3;
	--success-icon-filter: none;

	--error-background-color: #2c0a0e;
	--error-border-color: #c83848;
	--error-text-color: #f1aeb5;
	--error-icon-filter: none;

	--notice-background-color: #2e2400;
	--notice-border-color: #b58700;
	--notice-text-color: #ffd470;
	--notice-icon-filter: none;

	--info-background-color: #061535;
	--info-border-color: #3a7bd5;
	--info-text-color: #9ec5fe;
	--info-icon-filter: none;
}

/* ── Dark mode (site theme toggle) ──
   The site theme is controlled by data-bs-theme on <html>, which can
   differ from the OS preference that PNotify's mode option follows.
   This block makes toasts always match the active site theme. */
[data-bs-theme="dark"] [data-pnotify].custom-elem {
	--success-background-color: #0d2818;
	--success-border-color: #1a7d3f;
	--success-text-color: #75e0a3;
	--success-icon-filter: none;

	--error-background-color: #2c0a0e;
	--error-border-color: #c83848;
	--error-text-color: #f1aeb5;
	--error-icon-filter: none;

	--notice-background-color: #2e2400;
	--notice-border-color: #b58700;
	--notice-text-color: #ffd470;
	--notice-icon-filter: none;

	--info-background-color: #061535;
	--info-border-color: #3a7bd5;
	--info-text-color: #9ec5fe;
	--info-icon-filter: none;
}

/* ── Light mode (explicit site theme) ──
   When the site is in light mode but the OS prefers dark, PNotify's
   'no-preference' mode would render dark toasts on a light page.
   This block pins light colors whenever the site theme is not dark. */
html:not([data-bs-theme="dark"]) [data-pnotify].custom-elem {
	--success-background-color: #d1e7dd;
	--success-border-color: #0f5132;
	--success-text-color: #0a3622;
	--success-icon-filter: none;

	--error-background-color: #f8d7da;
	--error-border-color: #842029;
	--error-text-color: #58151c;
	--error-icon-filter: none;

	--notice-background-color: #fff3cd;
	--notice-border-color: #664d03;
	--notice-text-color: #402d00;
	--notice-icon-filter: none;

	--info-background-color: #cfe2ff;
	--info-border-color: #084298;
	--info-text-color: #052c65;
	--info-icon-filter: none;
}

/* ── Container styling ── */
[data-pnotify] .custom-container {
	border-radius: 12px;
	border-width: 1px;
	padding: 1rem 1.25rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	font-size: 0.9375rem;
	line-height: 1.5;
	/* Entrance: toasts slide+fade in instead of popping mid-load */
	animation: ino-pnotify-in 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* Until PNotify marks the toast as entered (.pnotify-in), the node is a
   plain block: it briefly paints full-width at the top of the viewport,
   then snaps into the fixed pill - visible twitch + CLS. Keep it
   invisible (also exempt from layout-shift) until positioned. */
.pnotify:not(.pnotify-in) {
	visibility: hidden;
}

@keyframes ino-pnotify-in {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: none; }
}

/* ── Text styling ── */
[data-pnotify] .custom-text {
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
}

[data-pnotify] .custom-title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}