/* Layout base do APP Impactei. Depende de tokens.css. */

body.crm-app {
	background: var(--crm-bg-app);
	color: var(--crm-text-primary);
	font-family: var(--crm-font);
	font-size: var(--crm-font-size-md);
	line-height: 1.5;
	min-height: 100vh;
}

/* Campos nativos (select, input, botão) com a mesma fonte do app. */
body.crm-app :is(button, input, optgroup, option, select, textarea) {
	font-family: var(--crm-font);
}

p,
figcaption {
	text-wrap: pretty;
}

/* Legenda de imagem do texto rico: sai dos 16px do reset e segue a escala. */
figcaption {
	font-size: var(--crm-font-size-lg);
}

a {
	color: var(--crm-brand-text);
}

a:hover,
a:focus-visible {
	color: var(--crm-brand-hover);
}

:focus-visible {
	outline: 2px solid var(--crm-brand-text);
	outline-offset: 2px;
}

/* Acessibilidade: visualmente oculto, o mesmo padrão do core do WordPress
   (que só estiliza a classe no wp-admin). Vale para o front inteiro.
   Não use a classe direto em <table>: tabela ignora height e overflow e
   mantém a altura toda; envolva a tabela num <div class="screen-reader-text">. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Reaparece com o foco (link "Pular para o conteúdo"), como no core. */
.screen-reader-text:focus {
	background-color: var(--crm-bg-primary);
	border-radius: var(--crm-radius-sm);
	box-shadow: var(--crm-shadow-strong);
	clip: auto !important;
	clip-path: none;
	color: var(--crm-text-primary);
	display: block;
	font-size: var(--crm-font-size-md);
	font-weight: var(--crm-weight-semibold);
	height: auto;
	left: var(--crm-space-2);
	line-height: normal;
	padding: var(--crm-space-2) var(--crm-space-4);
	text-decoration: none;
	top: var(--crm-space-2);
	width: auto;
	z-index: 100000;
}

/* Barra superior */
.crm-topbar {
	align-items: center;
	background: var(--crm-bg-chrome);
	color: var(--crm-text-on-chrome);
	display: flex;
	gap: var(--crm-space-6);
	height: var(--crm-topbar-height);
	padding: 0 var(--crm-space-4);
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .crm-topbar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .crm-topbar {
		top: 46px;
	}
}

/* Fase 2.31: até 600px a barra do WordPress rola com a página (o core a deixa
   em position: absolute); a barra do app fica no topo, sem a faixa vazia. */
@media screen and (max-width: 600px) {
	.admin-bar .crm-topbar {
		top: 0;
	}
}

.crm-topbar__brand {
	display: flex;
	flex-shrink: 0;
}

.crm-topbar__brand img {
	display: block;
	height: 28px;
	width: auto;
}

.crm-nav {
	flex: 1;
	min-width: 0;
}

.crm-nav__list {
	display: flex;
	gap: var(--crm-space-1);
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
}

.crm-nav__list a {
	border-radius: var(--crm-radius-sm);
	color: var(--crm-text-on-chrome);
	display: block;
	padding: var(--crm-space-1) var(--crm-space-2);
	text-decoration: none;
	transition: background var(--crm-duration-fast) ease;
	white-space: nowrap;
}

.crm-nav__list a:hover,
.crm-nav__list .current-menu-item > a {
	background: var(--crm-chrome-hover);
	color: var(--crm-text-on-chrome-strong);
}

.crm-topbar__user {
	align-items: center;
	display: flex;
	gap: var(--crm-space-3);
	margin-left: auto;
}

.crm-topbar__name {
	align-items: center;
	border-radius: var(--crm-radius-sm);
	color: var(--crm-text-on-chrome);
	display: inline-flex;
	font-weight: var(--crm-weight-medium);
	gap: var(--crm-space-2);
	min-width: 0;
	padding: 2px var(--crm-space-2) 2px 2px;
	text-decoration: none;
}

.crm-topbar__name-text {
	max-width: 22ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Foto de perfil (Fase 2.22): a foto do CRM ou a inicial do nome. */
.crm-topbar__avatar {
	align-items: center;
	background: var(--crm-chrome-hover);
	border-radius: 50%;
	color: var(--crm-text-on-chrome-strong);
	display: inline-flex;
	flex-shrink: 0;
	font-size: var(--crm-font-size-xs);
	font-weight: var(--crm-weight-semibold);
	height: 24px;
	justify-content: center;
	overflow: hidden;
	width: 24px;
}

.crm-topbar__avatar img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.crm-topbar__name:hover,
.crm-topbar__name[aria-current="page"] {
	background: var(--crm-chrome-hover);
	color: var(--crm-text-on-chrome-strong);
}

.crm-topbar__name:focus-visible {
	outline: 2px solid var(--crm-text-on-chrome);
	outline-offset: 2px;
}

.crm-topbar__logout {
	border: 1px solid var(--crm-chrome-border);
	border-radius: var(--crm-radius-sm);
	color: var(--crm-text-on-chrome);
	padding: 2px var(--crm-space-2);
	text-decoration: none;
}

.crm-topbar__logout:hover {
	background: var(--crm-chrome-hover);
	color: var(--crm-text-on-chrome-strong);
}

@media (max-width: 640px) {
	.crm-topbar {
		gap: var(--crm-space-3);
	}

	/* No celular o nome continua (é o caminho para o Meu perfil), mais curto. */
	.crm-topbar__name-text {
		max-width: 10ch;
	}
}

/* Conteúdo */
.crm-main {
	padding: var(--crm-space-6) var(--crm-space-4);
}

.crm-empty {
	background: var(--crm-bg-primary);
	border: 1px solid var(--crm-border-medium);
	border-radius: var(--crm-radius-md);
	margin: 0 auto;
	max-width: 640px;
	padding: var(--crm-space-8) var(--crm-space-6);
}

.crm-empty__title {
	font-size: var(--crm-font-size-xl);
	font-weight: var(--crm-weight-semibold);
	margin: 0 0 var(--crm-space-2);
}

.crm-empty__text {
	color: var(--crm-text-secondary);
	margin: 0;
}

/* Fallback visível só para admin em WP_DEBUG (ver inc/core/safe-module.php) */
.crm-widget-error {
	background: var(--crm-danger-soft);
	border: 1px solid var(--crm-danger);
	border-radius: var(--crm-radius-sm);
	color: var(--crm-danger);
	font-size: var(--crm-font-size-sm);
	margin: var(--crm-space-2);
	padding: var(--crm-space-2) var(--crm-space-3);
}

/* Aviso de acesso restrito (visitante sem login) */
.crm-gate {
	background: var(--crm-bg-primary);
	border: 1px solid var(--crm-border-medium);
	border-radius: var(--crm-radius-md);
	margin: var(--crm-space-8) auto 0;
	max-width: 440px;
	padding: var(--crm-space-8) var(--crm-space-6);
	text-align: center;
}

.crm-gate__title {
	font-size: var(--crm-font-size-xl);
	font-weight: var(--crm-weight-semibold);
	margin: 0 0 var(--crm-space-2);
}

.crm-gate__text {
	color: var(--crm-text-secondary);
	font-size: var(--crm-font-size-lg);
	margin: 0 0 var(--crm-space-6);
}

.crm-gate__button {
	background: var(--crm-brand);
	border-radius: var(--crm-radius-sm);
	color: var(--crm-text-on-brand);
	display: block;
	font-size: var(--crm-font-size-lg);
	font-weight: var(--crm-weight-medium);
	padding: var(--crm-space-3) var(--crm-space-4);
	text-decoration: none;
	transition: background var(--crm-duration-fast) ease;
}

.crm-gate__button:hover,
.crm-gate__button:focus-visible {
	background: var(--crm-brand-hover);
	color: var(--crm-text-on-brand);
}

.crm-gate__hint {
	color: var(--crm-text-tertiary);
	font-size: var(--crm-font-size-sm);
	margin: var(--crm-space-4) 0 0;
}

/* Fase 2.66: entrar, esqueci a senha e nova senha (visual do aviso acima). */
.crm-conta__form {
	text-align: left;
}

.crm-conta__campo {
	margin: 0 0 var(--crm-space-4);
}

.crm-conta__campo label {
	display: block;
	font-size: var(--crm-font-size-sm);
	font-weight: var(--crm-weight-medium);
	margin-bottom: var(--crm-space-1);
}

.crm-conta__campo input {
	background: var(--crm-bg-primary);
	border: 1px solid var(--crm-border-medium);
	border-radius: var(--crm-radius-sm);
	box-sizing: border-box;
	color: var(--crm-text-primary);
	font: inherit;
	font-size: var(--crm-font-size-lg);
	padding: var(--crm-space-2) var(--crm-space-3);
	width: 100%;
}

.crm-conta__campo input:focus-visible {
	border-color: var(--crm-brand);
	outline: 2px solid var(--crm-brand-border);
	outline-offset: 0;
}

.crm-conta__lembrar {
	font-size: var(--crm-font-size-sm);
	margin: 0 0 var(--crm-space-4);
}

.crm-conta__form .crm-gate__button {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	width: 100%;
}

.crm-conta .crm-gate__hint {
	text-align: center;
}

.crm-conta__aviso {
	background: var(--crm-bg-secondary);
	border: 1px solid var(--crm-border-medium);
	border-radius: var(--crm-radius-sm);
	font-size: var(--crm-font-size-sm);
	margin: 0 0 var(--crm-space-4);
	padding: var(--crm-space-2) var(--crm-space-3);
	text-wrap: pretty;
}

.crm-conta__aviso.is-erro {
	border-color: var(--crm-danger);
	color: var(--crm-danger);
}

/* Busca na barra superior (Fase 2.5): campo largo com lupa. */
.crm-topsearch {
	display: flex;
	flex: 1 1 auto;
	margin-left: auto;
	max-width: 560px;
	min-width: 0;
}

/* Menu do cabeçalho: no computador o invólucro some (display: contents) e
   a ordem visual continua logo → menu → busca → usuário. O campo de busca
   já empurra o bloco do usuário para a direita. */
.crm-topbar__menu {
	display: contents;
}

.crm-topbar__brand { order: 0; }
.crm-nav { order: 1; }
.crm-topsearch { order: 2; }
.crm-topbar__menu .crm-topbar__user { order: 3; }

.crm-topsearch ~ .crm-topbar__menu .crm-topbar__user,
.crm-topbar:has(.crm-topsearch) .crm-topbar__user {
	margin-left: 0;
}

/* Botão do menu e vaga do sino: só no celular. */
.crm-topbar__toggle,
.crm-topbar__notif-slot {
	display: none;
}

.crm-topsearch__field {
	align-items: center;
	display: flex;
	position: relative;
	width: 100%;
}

.crm-topsearch__icon {
	color: var(--crm-text-tertiary);
	left: var(--crm-space-3);
	pointer-events: none;
	position: absolute;
}

/* Seletor reforçado: estilos globais de input[type=search] (tema/plugins)
 * sobrescreviam o padding e a lupa ficava em cima do texto. */
.crm-topbar .crm-topsearch input.crm-topsearch__input {
	background: var(--crm-bg-primary);
	border: 1px solid var(--crm-border-medium);
	border-radius: var(--crm-radius-md);
	color: var(--crm-text-primary);
	font: inherit;
	font-size: var(--crm-font-size-md);
	height: 36px;
	padding: 0 var(--crm-space-3) 0 36px;
	width: 100%;
}

.crm-topsearch__input::placeholder {
	color: var(--crm-text-tertiary);
}

.crm-topbar .crm-topsearch input.crm-topsearch__input:focus-visible {
	border-color: var(--crm-brand);
	box-shadow: 0 0 0 2px var(--crm-brand-border);
	outline: 0;
}

/* Computador e notebook (acima de 640px): o menu aparece sempre inteiro e
   não encolhe; a busca ocupa só o espaço que sobra (largura variável). Quando
   sobra pouco, ela fica só com a lupa e, com o foco, abre por cima da barra. */
@media (min-width: 641px) {
	.crm-nav {
		flex: 0 0 auto;
	}

	.crm-nav__list {
		flex-wrap: nowrap;
		overflow-x: visible;
	}

	.crm-nav__list a {
		white-space: nowrap;
	}

	.crm-topsearch {
		flex: 1 1 240px;
		min-width: 40px;
	}

	.crm-topbar .crm-topsearch input.crm-topsearch__input {
		min-width: 0;
		text-overflow: ellipsis;
	}

	/* Caixa estreita (só a lupa): sem pedaço do texto de exemplo. */
	.crm-topsearch__field {
		container-type: inline-size;
	}

	@container (max-width: 120px) {
		.crm-topbar .crm-topsearch input.crm-topsearch__input::placeholder {
			color: transparent;
		}
	}
}

@media (min-width: 641px) and (max-width: 1279px) {
	.crm-topbar {
		gap: var(--crm-space-4);
	}

	/* Notebook: o nome do usuário vira só o avatar (o nome fica no title do
	   link), para o menu caber inteiro. */
	.crm-topbar__name-text {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	/* Busca estreita: ao focar, cobre a barra inteira até o usuário sair. */
	.crm-topsearch:focus-within {
		left: var(--crm-space-4);
		max-width: none;
		position: absolute;
		right: var(--crm-space-4);
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}
}

/* Celular: a busca vira uma linha própria, em largura total, abaixo do logo. */
@media (max-width: 640px) {
	:root {
		--crm-topbar-height: 112px;
	}

	.crm-topbar {
		align-content: center;
		flex-wrap: wrap;
		row-gap: var(--crm-space-2);
	}

	.crm-topsearch {
		flex: 1 0 100%;
		margin-left: 0;
		max-width: none;
		order: 10;
	}

	.crm-topbar .crm-topbar__user {
		margin-left: auto;
	}

}

/* Celular com JS (topbar.js marca .crm-topbar--recolhe): logo à esquerda,
   sino e botão do menu à direita, busca em linha própria com respiro
   embaixo. Menu, aparência, perfil e Sair abrem num painel abaixo da barra.
   Sem JS, a barra fica como antes (nada some). */
@media (max-width: 640px) {
	.crm-topbar--recolhe {
		--crm-topbar-height: 108px;
		height: var(--crm-topbar-height);
		padding: var(--crm-space-2) var(--crm-space-4) var(--crm-space-4);
	}

	:root:has(.crm-topbar--recolhe) {
		--crm-topbar-height: 108px;
	}

	.crm-topbar--recolhe .crm-topbar__brand {
		margin-right: auto;
	}

	.crm-topbar--recolhe .crm-topbar__notif-slot {
		display: flex;
		order: 1;
	}

	.crm-topbar--recolhe .crm-topbar__notif-slot:empty {
		display: none;
	}

	.crm-topbar--recolhe .crm-topbar__toggle {
		align-items: center;
		background: transparent;
		border: 1px solid var(--crm-chrome-border);
		border-radius: var(--crm-radius-sm);
		color: var(--crm-text-on-chrome);
		cursor: pointer;
		display: inline-flex;
		height: 40px;
		justify-content: center;
		order: 2;
		padding: 0;
		width: 40px;
	}

	.crm-topbar--recolhe .crm-topbar__toggle:hover,
	.crm-topbar--recolhe .crm-topbar__toggle[aria-expanded="true"] {
		background: var(--crm-chrome-hover);
		color: var(--crm-text-on-chrome-strong);
	}

	.crm-topbar--recolhe .crm-topbar__toggle:focus-visible {
		outline: 2px solid var(--crm-text-on-chrome);
		outline-offset: 2px;
	}

	.crm-topbar__toggle-fechar,
	.crm-topbar__toggle[aria-expanded="true"] .crm-topbar__toggle-abrir {
		display: none;
	}

	.crm-topbar__toggle[aria-expanded="true"] .crm-topbar__toggle-fechar {
		display: block;
	}

	/* Painel: abre logo abaixo da barra, ocupa a largura toda. */
	.crm-topbar--recolhe .crm-topbar__menu {
		background: var(--crm-bg-chrome);
		border-top: 1px solid var(--crm-chrome-border);
		box-shadow: 0 12px 24px rgb(0 0 0 / 0.25);
		display: none;
		flex-direction: column;
		gap: var(--crm-space-4);
		left: 0;
		padding: var(--crm-space-3) var(--crm-space-4) var(--crm-space-4);
		position: absolute;
		right: 0;
		top: 100%;
	}

	.crm-topbar--recolhe .crm-topbar__menu.is-aberto {
		display: flex;
	}

	.crm-topbar--recolhe .crm-nav {
		flex: 0 0 auto;
	}

	.crm-topbar--recolhe .crm-nav__list {
		flex-direction: column;
		gap: 2px;
		overflow: visible;
	}

	.crm-topbar--recolhe .crm-nav__list a {
		font-size: var(--crm-font-size-lg);
		padding: var(--crm-space-3);
	}

	.crm-topbar--recolhe .crm-topbar__menu .crm-topbar__user {
		border-top: 1px solid var(--crm-chrome-border);
		flex-wrap: wrap;
		gap: var(--crm-space-3);
		margin-left: 0;
		padding-top: var(--crm-space-4);
	}

	.crm-topbar--recolhe .crm-topbar__name {
		flex: 1 1 auto;
		padding: var(--crm-space-2);
	}

	.crm-topbar--recolhe .crm-topbar__name-text {
		max-width: none;
	}

	.crm-topbar--recolhe .crm-topbar__logout {
		padding: var(--crm-space-2) var(--crm-space-4);
	}

	/* O botão de aparência fica à esquerda: o menu dele abre para a direita. */
	.crm-topbar--recolhe .crm-topbar__menu .crm-tema__menu {
		left: 0;
		right: auto;
	}
}

/* Fase 2.31: de 1280px para cima, o menu nunca encolhe, quebra nem fica
   escondido atrás da rolagem; quem cede espaço é a busca (entre 160px e
   480px) e, abaixo de 1440px, o nome do usuário. Abaixo de 1280px o menu
   volta a rolar para o lado, como antes. A barra já é fixa no topo (sticky)
   em todas as páginas; no Quadro, a página nem rola (board.css). */
@media (min-width: 1280px) {
	.crm-topbar {
		gap: clamp(var(--crm-space-3), 1.6vw, var(--crm-space-6));
	}

	.crm-nav {
		flex: 0 0 auto;
	}

	.crm-nav__list {
		overflow: visible;
	}

	.crm-topsearch {
		flex: 1 1 480px;
		max-width: clamp(240px, 30vw, 480px);
		min-width: 160px;
	}

	.crm-topbar__user {
		flex: 0 0 auto;
	}
}

@media (min-width: 1280px) and (max-width: 1439px) {
	.crm-topbar__name-text {
		max-width: 12ch;
	}
}