/*
 * pn-empty-state — componente reutilizavel para telas vazias do painel.
 *
 * Casos de uso previstos:
 * - Modulo/extensao nao habilitada.
 * - Listas sem resultados.
 * - Permissao negada com call-to-action de upgrade.
 * - Onboarding de feature ainda nao configurada.
 *
 * Anatomia:
 *
 *   .pn-empty-state
 *     .pn-empty-state__icon
 *     .pn-empty-state__heading
 *       .pn-empty-state__eyebrow
 *       .pn-empty-state__title
 *     .pn-empty-state__lede
 *     .pn-empty-state__actions
 */

.pn-empty-state {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	background: var(--surface-light-primary);
	border: 1px solid var(--border-light-primary);
	border-radius: var(--border-radius-lg);
	padding: var(--padding-xxl);
	text-align: center;
	box-shadow:
		0 1px 2px rgba(12, 12, 14, 0.04),
		0 12px 32px rgba(12, 12, 14, 0.06);
}

.pn-empty-state__icon {
	width: var(--scale-80);
	height: var(--scale-80);
	margin: 0 auto var(--gap-xxlg);
	border-radius: var(--border-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-light-terceary);
	border: 1px solid var(--border-light-primary);
}

.pn-empty-state__icon i {
	font-size: var(--scale-32);
	color: var(--text-dark-secundary);
}

.pn-empty-state__heading {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	margin-bottom: var(--gap-md);
}

.pn-empty-state__eyebrow {
	font-size: var(--caption-1-font-size);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-dark-terceary);
}

.pn-empty-state__title {
	margin: 0;
}

.pn-empty-state__lede {
	margin: 0 auto var(--gap-xxlg);
	max-width: 440px;
	font-size: var(--body-1-font-size);
	line-height: 1.55;
	color: var(--text-dark-secundary);
}

.pn-empty-state__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-md);
}

[data-theme="dark"] .pn-empty-state {
	background: var(--surface-light-secundary);
	border-color: var(--border-light-secundary);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.4),
		0 16px 48px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .pn-empty-state__icon {
	background: var(--surface-light-quarteary);
	border-color: var(--border-light-terceary);
}