/* Banner de ambiente de demonstração — faixa fixa avisando que os dados
   são fictícios. Renderizado só quando IS_DEMO (APP_ENV=demo), via
   incs/demo-banner.inc.php (incluído em incs/nav.inc.php).
   Uso:
     <div class="demo-banner">…</div>
   Fixa no rodapé, largura total, sem capturar cliques (pointer-events:none)
   pra nunca atrapalhar a interação com o conteúdo logo acima. */

.demo-banner {
	position: fixed;
	/* Só sobre a área de conteúdo, fora da sidebar. `--sidebar-w` acompanha
	   o colapso/expansão da sidebar (220px / 80px); a transição casa com a
	   animação dela. No mobile (sidebar vira drawer) volta a left:0 — ver
	   media query abaixo. */
	left: var(--sidebar-w);
	right: 0;
	bottom: 0;
	transition: left 200ms ease;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 14px;
	background: #f5c518;
	color: #3a2e00;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-align: center;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .12);
	pointer-events: none;
}

.demo-banner svg {
	flex-shrink: 0;
}

/* No mobile a sidebar vira drawer (off-canvas) e o conteúdo ocupa a largura
   toda — então o banner também vai de ponta a ponta. */
@media (max-width: 768px) {
	.demo-banner {
		left: 0;
	}
}

/* Item "Resetar dados de demonstração" no menu do usuário (só em demo).
   Reset de aparência de <button> + destaque âmbar (mesma cor do banner). */
.user-popup-item--demo {
	width: 100%;
	background: none;
	border: none;
	font: inherit;
	text-align: left;
	color: #f5c518;
}

.user-popup-item--demo:hover {
	background: rgba(245, 197, 24, .12);
	color: #f5c518;
}

.user-popup-item--demo svg {
	opacity: .85;
}

/* Toast de confirmação do reset (criado via JS em pub/js/sidebar.js após o
   reload). Verde de sucesso, no topo centralizado, some sozinho. */
.demo-toast {
	position: fixed;
	top: 18px;
	left: 50%;
	z-index: 10000;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #1f9d55;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateX(-50%) translateY(-10px);
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
}

.demo-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.demo-toast svg {
	flex-shrink: 0;
}