/* Layout base do app CRM 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;
}

p,
figcaption {
	text-wrap: pretty;
}

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

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

:focus-visible {
	outline: 2px solid var(--crm-brand);
	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;
	}
}

.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: rgba(255, 255, 255, 0.102);
	color: #ffffff;
}

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

.crm-topbar__name {
	color: var(--crm-text-on-chrome);
	font-weight: var(--crm-weight-medium);
}

.crm-topbar__logout {
	border: 1px solid rgba(255, 255, 255, 0.141);
	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: rgba(255, 255, 255, 0.102);
	color: #ffffff;
}

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

	.crm-topbar__name {
		display: none;
	}
}

/* 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;
}

/* 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;
}

/* O campo de busca já empurra o bloco do usuário para a direita. */
.crm-topsearch + .crm-topbar__user {
	margin-left: 0;
}

.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;
}

/* 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-topsearch + .crm-topbar__user {
		margin-left: auto;
	}

}