/*
 * CANDIDATO — sino de notificações do header (pn-notifications).
 *
 * Por que é global: o sino fica no header de toda página logada; carregar só numa
 * tela deixaria o badge e a lista sem estilo no resto do painel (candidato global
 * por natureza, design-system TECHNICAL.md §7).
 * O que cobre: só `.pn-notifications*` (contador, lista, lida/não lida). Reaproveita
 * o popover (`pn-pop`); cores por tokens semânticos, que já resolvem o tema escuro.
 * Destino ao promover: `components/notifications.css` (decisão do front-end).
 */
.pn-notifications__trigger {
	position: relative;
}

/* O botão tem o tamanho do ícone (16 px): o contador fica no canto de cima, à direita,
   sem cobrir o sino, e cresce para a esquerda ("99+" não encosta no ícone vizinho). Vermelho cheio com texto branco nos
   dois temas, como o `.pn-badge-red` — `--surface-error`/`--text-light-primary` são
   fundo de alerta e texto de superfície escura, e deixavam o número sem contraste
   (rosa-claro com branco no tema claro, vinho com cinza-escuro no escuro). O anel na
   cor do header separa o contador do ícone. */
.pn-notifications__badge {
	position: absolute;
	top: -9px;
	right: -10px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: var(--border-radius-full);
	background: var(--red-500);
	box-shadow: 0 0 0 2px var(--surface-light-primary);
	color: #fff;
	font-size: var(--caption-2-font-size);
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}

.pn-notifications .pn-notifications__box {
	width: 340px;
	max-width: calc(100vw - 24px);
	right: 0;
	transform: none;
}

.pn-notifications .pn-notifications__box::before,
.pn-notifications .pn-notifications__box::after {
	right: 10px;
}

.pn-notifications__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-sm);
	margin-bottom: var(--gap-sm);
}

.pn-notifications__list {
	max-height: 360px;
	margin: 0 0 var(--gap-sm);
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.pn-notifications__item {
	display: block;
	padding: var(--padding-sm);
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--border-light-primary);
	color: var(--text-dark-primary);
	text-decoration: none;
}

.pn-notifications__item:hover,
.pn-notifications__item:focus-visible {
	background: var(--surface-light-secundary);
	text-decoration: none;
}

.pn-notifications__item--unread {
	background: var(--surface-light-terceary);
}

.pn-notifications__item--error {
	border-left-color: var(--border-error);
}

.pn-notifications__item--warning {
	border-left-color: var(--border-warning);
}

.pn-notifications__item--success {
	border-left-color: var(--border-success);
}

.pn-notifications__title {
	display: block;
	font-weight: 600;
}

.pn-notifications__message,
.pn-notifications__date {
	display: block;
	color: var(--text-dark-secundary);
	font-size: var(--caption-1-font-size);
	line-height: var(--caption-1-line-height);
	overflow-wrap: anywhere;
}

.pn-notifications__empty {
	padding: var(--padding-sm);
	color: var(--text-dark-secundary);
}