/*
 * A casca de toda tela do plugin (`2.117.0`, `Core\Support\Screen`).
 *
 * Pedido do usuário: "Eu quero que todas as partes do nosso plugin tenham o
 * mesmo espaçamento, margens do app do mecânico, né? Nosso plugin tem que ser
 * padronizado."
 *
 * A medida é a da ficha do mecânico, que é a tela mais usada e a que já foi
 * ajustada à mão com o usuário (2.113.0 e 2.113.1):
 * - no computador, um cartão branco com 16px de recuo, borda clara e canto de
 *   6px, centrado, 16px abaixo;
 * - no celular, de ponta a ponta, sem borda dos lados, 8px em cima e 12px de
 *   cada lado ("Sem margem nenhuma também ficou esquisito": 12px, não 6);
 * - o título da tela é um <h2> de dentro, igual em todas: 24px, e 22px no
 *   celular.
 *
 * A folha de cada tela carrega esta como dependência e cuida só do que é dela.
 * Toda cor aqui é declarada: a tela roda dentro do tema do site.
 */

.oficina-crm-tela {
	box-sizing: border-box;
	max-width: 900px;
	margin: 0 auto 16px;
	padding: 16px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
}

/* As três larguras: um formulário só; o resto (a largura da barra); o Quadro. */
.oficina-crm-tela.tela-estreita {
	max-width: 460px;
}

.oficina-crm-tela.tela-larga {
	max-width: 1200px;
}

/* O título da tela. A ficha ajusta o dela (a placa), que vem colado na linha
 * de identificação. */
.oficina-crm-tela h2 {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.2;
}

/* **Os campos de escrita livre sem o canto de puxar** (`2.183.1`), em toda
 * tela do plugin. Pedido do usuário: *"Eu não gosto que o campo de escrita
 * livre fica com o espaço com redimensionamento livre"*. No lugar, o campo
 * cresce sozinho com o texto (`field-sizing`, no Chrome do celular), a partir
 * de umas quatro linhas; o navegador sem isso o deixa do tamanho de sempre,
 * rolando por dentro. */
.oficina-crm-tela textarea {
	resize: none;
	field-sizing: content;
	min-height: 96px;
}

/* **O tema, em toda tela do plugin.** Até a `2.116.0` isto valia só para a
 * ficha, o Início, a Nova ficha e Veículos (`app-bar.css`). Agora toda tela tem
 * o recuo dela, então:
 * - o título da página do tema sai — cada tela diz o seu no <h2>, e as do app
 *   que não dizem (Início, Quadro) têm a barra marcando onde se está (a Nova
 *   ficha, fora da barra desde a `2.156.1`, ganhou o <h2>);
 * - no celular, a margem lateral do tema sai, e a tela encosta na borda.
 * Só nas páginas que têm uma tela do plugin (`:has`): o resto do site fica
 * como o tema desenha. Navegador sem `:has()` ignora as duas regras, e a
 * página fica como era. */
body:has(.oficina-crm-tela) .entry-header {
	display: none;
}

/* **O menu e o rodapé do tema saem das telas do plugin** (`2.184.2`). Pedido
 * do usuário, com o print do cabeçalho no celular: *"Devíamos remover esse
 * menu do tema, ele não está agregando nada"*; e as escolhas dele: sai só o
 * botão do menu (o nome do site fica) e sai o rodapé. O menu só repetia o que
 * a tela já tem: a equipe anda pela barra preta (Início, Central, Sair), e o
 * cliente tem o Trocar senha e o Sair na própria tela. Sai o botão do celular
 * (e a gaveta que ele abre), o menu do computador e o rodapé, pelos nomes do
 * Astra 4.13, o tema do site. O resto do site fica como o tema desenha. */
body:has(.oficina-crm-tela) #masthead [data-section="section-header-mobile-trigger"],
body:has(.oficina-crm-tela) #masthead [data-section="section-hb-menu-1"],
body:has(.oficina-crm-tela) #masthead .ast-mobile-header-content,
body:has(.oficina-crm-tela) #ast-mobile-popup-wrapper,
body:has(.oficina-crm-tela) #colophon {
	display: none;
}

/* **A tela do plugin só rola quando o conteúdo passa da tela** (`2.184.3`).
 * Pedido do usuário, com o print do Início no celular: *"Tem muito Scrolls
 * desnecessios na página inicial"*. O Astra dá ao `#page` a altura mínima de
 * `100vh`, para empurrar o rodapé para baixo; no Chrome do celular o `100vh`
 * é a altura com a barra de endereço escondida, maior que a área visível, e
 * a página curta rolava essa diferença. Sem o rodapé (`2.184.2`), a altura
 * mínima não serve para nada: a página tem a altura do que mostra. */
body:has(.oficina-crm-tela) #page {
	min-height: 0;
}

@media (max-width: 560px) {
	body:has(.oficina-crm-tela) #content .ast-container {
		padding-left: 0;
		padding-right: 0;
	}

	.oficina-crm-tela {
		margin-bottom: 8px;
		padding: 8px 12px;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}

	.oficina-crm-tela h2 {
		font-size: 22px;
	}
}