/*
 * Telas de relatório ([vvp_relatorios], [vvp_resumo], [vvp_relatorio_detalhado]).
 * Mesmo padrão visual da portaria. Depende de vvp-base.css.
 */

/* =========================================================================
 * Filtros
 * ========================================================================= */

.vvp-relatorios .vvp-bloco {
	padding: var(--vvp-e5);
	margin-bottom: var(--vvp-e5);
}

/*
 * Respiro entre o título do bloco e o conteúdo. Sem isto a tabela nasce colada
 * no título, e a linha de cabeçalho verde parece parte dele.
 */
.vvp-relatorios .vvp-bloco > .vvp-secao__titulo { margin-bottom: var(--vvp-e4); }
.vvp-relatorios .vvp-bloco > .vvp-nota { margin: calc(var(--vvp-e3) * -1) 0 var(--vvp-e4); }

/* O gráfico de barras também precisa descolar do título. */
.vvp-relatorios .vvp-bloco > #vvp-grafico-faixas { margin-top: var(--vvp-e2); }

/* =========================================================================
 * Cards de números (KPIs)
 * ========================================================================= */

/*
 * Grade FIXA de 5 colunas: são 10 cards, que fecham em 2 linhas certinhas.
 * Eram 8 em 4 colunas; com "Já fechou" e "Não fechou" a grade de 4 passaria a
 * deixar dois buracos na última linha.
 *
 * Fixa e não `auto-fit`: com auto-fit o arranjo mudava de forma a cada largura
 * de tela, e a última linha vivia com sobra à direita.
 */
.vvp-cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--vvp-e3);
	margin-bottom: var(--vvp-e5);
}

/* Entre tablet e desktop, 5 colunas espremeriam demais: 3 + 3 + 4. */
@media (max-width: 1279px) {
	.vvp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* iPad em retrato: os títulos quebrariam em três linhas com mais colunas. */
@media (max-width: 1023px) {
	.vvp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
	.vvp-cards { grid-template-columns: minmax(0, 1fr); }
}

.vvp-card-num {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	min-height: 118px;
	padding: var(--vvp-e4);
	border: 1px solid var(--vvp-borda);
	border-radius: var(--vvp-raio);
	background: var(--vvp-superficie);
	box-shadow: var(--vvp-sombra);
	transition: transform .12s ease, box-shadow .12s ease;
}

.vvp-card-num:hover { transform: translateY(-1px); box-shadow: var(--vvp-sombra-alta); }

/* Fio dourado no topo de cada card. */
.vvp-card-num::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--vvp-ouro);
	opacity: .5;
}

.vvp-card-num__rotulo {
	font-size: var(--vvp-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--vvp-texto-2);
	line-height: 1.4;
	/* Rótulos longos quebram em duas linhas em vez de serem cortados. */
	overflow-wrap: anywhere;
}

.vvp-card-num__valor {
	/* margin-top:auto empurra número e nota para a base — a fileira inteira fica
	   com os números na mesma linha, com rótulo de uma ou de duas linhas. */
	margin-top: auto;
	padding-top: var(--vvp-e2);
	/* Encolhe junto com o card: em coluna estreita o número não estoura mais. */
	font-size: clamp(22px, 4.2vw, 28px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.5px;
	color: var(--vvp-texto-forte);
}

.vvp-card-num__nota {
	margin-top: var(--vvp-e1);
	font-size: var(--vvp-t-xs);
	color: var(--vvp-texto-3);
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* Card principal: fundo da marca. */
.vvp-card-num--destaque {
	background: linear-gradient(135deg, var(--vvp-marca) 0%, var(--vvp-marca-3) 100%);
	border-color: var(--vvp-marca);
	color: #fff;
}

.vvp-card-num--destaque::before { opacity: 1; height: 3px; }
.vvp-card-num--destaque .vvp-card-num__valor { color: var(--vvp-ouro); font-size: clamp(24px, 5vw, 32px); }
.vvp-card-num--destaque .vvp-card-num__rotulo { color: rgba(255, 255, 255, .88); }
.vvp-card-num--destaque .vvp-card-num__nota { color: rgba(255, 255, 255, .62); }

/* Card de atenção (ex.: cancelados após entrar). */
.vvp-card-num--alerta { border-left: 4px solid var(--vvp-alerta); }
.vvp-card-num--alerta .vvp-card-num__valor { color: var(--vvp-alerta); }

/*
 * O comparativo tem 9 colunas. Com o min-width padrão da tabela ele estourava a
 * largura do tablet e escondia "Média" e "Presença" atrás de uma rolagem lateral
 * — justamente as colunas de leitura rápida. Aqui a tabela se adapta: fonte e
 * respiro menores, e o nome do evento quebra em vez de empurrar as demais.
 */
#vvp-tabela-eventos .vvp-tabela {
	min-width: 0;
	font-size: var(--vvp-t-xs);
}

#vvp-tabela-eventos .vvp-tabela th,
#vvp-tabela-eventos .vvp-tabela td {
	padding: var(--vvp-e2) var(--vvp-e1);
	text-align: center;
}

#vvp-tabela-eventos .vvp-tabela th:first-child,
#vvp-tabela-eventos .vvp-tabela td:first-child {
	padding-left: var(--vvp-e3);
	text-align: left;
	min-width: 128px;
}

#vvp-tabela-eventos .vvp-tabela th:last-child,
#vvp-tabela-eventos .vvp-tabela td:last-child { padding-right: var(--vvp-e3); }

/*
 * Cabeçalho em duas linhas cabe melhor que uma linha cortada — mas a quebra tem
 * de ser ENTRE palavras. O overflow-wrap:anywhere global partia "PESSOAS" ao
 * meio ("PESS/OAS"); aqui ele é desligado.
 */
#vvp-tabela-eventos .vvp-tabela th {
	white-space: normal;
	line-height: 1.25;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* =========================================================================
 * Gráfico de barras (chegadas)
 * ========================================================================= */

.vvp-barras {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e2);
}

.vvp-barra {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) 64px;
	gap: var(--vvp-e3);
	align-items: center;
	font-size: var(--vvp-t-sm);
}

.vvp-barra__rotulo {
	color: var(--vvp-texto-2);
	font-weight: 600;
	white-space: nowrap;
}

.vvp-barra__trilho {
	height: 20px;
	border: 1px solid var(--vvp-borda);
	border-radius: 5px;
	background: var(--vvp-fundo);
	overflow: hidden;
}

.vvp-barra__preenche {
	display: block;
	height: 100%;
	min-width: 3px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--vvp-marca) 0%, var(--vvp-marca-3) 70%, var(--vvp-ouro) 100%);
}

.vvp-barra__valor {
	text-align: right;
	font-weight: 700;
	color: var(--vvp-texto-forte);
}

/* =========================================================================
 * Lista detalhada
 * ========================================================================= */

.vvp-relatorios .vvp-tabela-wrap {
	max-height: 68vh;
	overflow: auto;
	box-shadow: var(--vvp-sombra);
}

.vvp-convidados-linha {
	display: block;
	margin-top: 2px;
	font-size: var(--vvp-t-xs);
	color: var(--vvp-texto-2);
	line-height: 1.4;
}

/* =========================================================================
 * Responsivo
 * ========================================================================= */

@media (max-width: 640px) {
	.vvp-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.vvp-barra { grid-template-columns: 72px minmax(0, 1fr) 48px; font-size: var(--vvp-t-xs); }
	.vvp-filtros__acoes .vvp-btn { flex: 1 1 auto; }
	.vvp-relatorios .vvp-tabela-wrap { max-height: none; }
}

/* =========================================================================
 * Aba Gráficos
 *
 * SVG desenhado no JavaScript (ver vvp-relatorios.js). As cores vêm daqui, via
 * classes, para os dois temas funcionarem sem duplicar código lá.
 * ========================================================================= */

/*
 * `align-items: stretch` (o padrão) e não `start`: os dois cards de uma linha
 * ficam da mesma altura. Com `start` o de "Presença" (rosca alta) fazia o de
 * "Origem" parecer cortado ao lado.
 */
/*
 * A grade cresce com a tela: 1 coluna no celular, 2 no tablet e 4 no desktop.
 * Antes o tablet caía para uma coluna só e a página virava uma fita de rolagem
 * — oito gráficos, um embaixo do outro, sem conseguir comparar nada.
 *
 * As séries longas (nomes, faixas de horário, tipos de ingresso) continuam
 * ocupando a linha inteira: nelas o problema não é altura, é rótulo espremido.
 */
.vvp-graficos {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--vvp-e3);
}

@media (min-width: 600px) {
	.vvp-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
	.vvp-graficos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vvp-graficos .vvp-bloco {
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

/*
 * Menos moldura nos cards de gráfico: o desenho é que precisa de espaço, não
 * a borda em volta dele. Padding menor e título compacto com a explicação na
 * mesma linha, no lugar do par título + parágrafo que tomava três linhas.
 */
.vvp-graficos .vvp-bloco--gr { padding: var(--vvp-e3); }

.vvp-gr__titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--vvp-e2);
	margin: 0 0 var(--vvp-e3);
	font-family: var(--vvp-fonte);
	font-size: var(--vvp-t-sm);
	font-weight: 700;
	line-height: 1.3;
	color: var(--vvp-texto-forte);
	letter-spacing: .01em;
	text-transform: none;
}

.vvp-gr__titulo span {
	font-size: var(--vvp-t-xs);
	font-weight: 400;
	color: var(--vvp-texto-3);
}

/* O gráfico ocupa a sobra e se centraliza quando o card estica. */
.vvp-graficos .vvp-gr {
	flex: 1 1 auto;
	justify-content: center;
}

/* Chegadas, comparativo, tipos e atendentes ocupam a linha inteira. */
.vvp-bloco--largo { grid-column: 1 / -1; }

/*
 * Aviso de "não se aplica": aparece no lugar da rosca de presença quando há
 * filtro de tipo ou atribuição. A base da Sympla não sabe de que consultora é
 * um ingresso que ninguém usou, então qualquer percentual ali seria inventado.
 */
.vvp-gr-aviso {
	margin: 0;
	padding: var(--vvp-e3);
	border: 1px dashed var(--vvp-borda-2);
	border-radius: var(--vvp-raio-sm);
	background: var(--vvp-alerta-suave);
	color: var(--vvp-texto-2);
	font-size: var(--vvp-t-sm);
	line-height: 1.45;
}

.vvp-gr-aviso strong { color: var(--vvp-texto-forte); }

.vvp-gr {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e3);
	min-height: 120px;
}

.vvp-svg { width: 100%; height: auto; display: block; }
.vvp-svg--rosca { max-width: 190px; margin: 0 auto; }

.vvp-svg__trilho { stroke: var(--vvp-borda); }
.vvp-svg__arco   { stroke: var(--vvp-ok); }
.vvp-svg__barra  { fill: var(--vvp-marca-3); }
.vvp-svg__linha  { stroke: var(--vvp-ouro); stroke-width: 2.5; }
.vvp-svg__base   { stroke: var(--vvp-borda-2); stroke-width: 1; }

.vvp-svg__num {
	fill: var(--vvp-texto-forte);
	font-family: var(--vvp-fonte);
	font-size: 26px;
	font-weight: 800;
}

.vvp-svg__leg,
.vvp-svg__eixo {
	fill: var(--vvp-texto-2);
	font-family: var(--vvp-fonte);
	font-size: 11px;
}

/* ---- Legenda ---- */

.vvp-legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vvp-e2) var(--vvp-e4);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
}

.vvp-legenda li { display: flex; align-items: center; gap: var(--vvp-e2); }
.vvp-legenda b { color: var(--vvp-texto-forte); }

.vvp-legenda__cor {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--vvp-ok);
}

.vvp-legenda__cor--vazio { background: var(--vvp-borda-2); }

/* ---- Barras horizontais (HTML, não SVG: rótulo longo quebra sozinho) ---- */

.vvp-barras {
	display: flex;
	flex-direction: column;
	gap: var(--vvp-e3);
}

.vvp-barras__linha {
	display: grid;
	/*
	 * Rótulo em porcentagem, não em pixels fixos: com 190px fixos o rótulo
	 * comia dois terços de um card estreito e a barra sumia.
	 */
	grid-template-columns: minmax(72px, 32%) minmax(0, 1fr) auto;
	gap: var(--vvp-e3);
	align-items: center;
}

.vvp-barras__rotulo {
	font-size: var(--vvp-t-sm);
	color: var(--vvp-texto-2);
	line-height: 1.3;
}

.vvp-barras__trilho {
	height: 14px;
	border-radius: 999px;
	background: var(--vvp-borda);
	overflow: hidden;
}

.vvp-barras__preenche {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--vvp-marca-3), var(--vvp-ouro));
}

.vvp-barras__valor {
	font-size: var(--vvp-t-md);
	font-weight: 700;
	color: var(--vvp-texto-forte);
	white-space: nowrap;
}

.vvp-barras__valor small {
	font-size: var(--vvp-t-xs);
	font-weight: 500;
	color: var(--vvp-texto-3);
}

@media (max-width: 560px) {
	.vvp-barras__linha { grid-template-columns: minmax(0, 1fr) auto; }
	.vvp-barras__rotulo { grid-column: 1 / -1; }
}

/* ---- Tema escuro: as barras precisam de mais contraste sobre o verde ---- */

.vvp-app.vvp-escuro .vvp-svg__barra { fill: #3f7f6d; }
.vvp-app.vvp-escuro .vvp-svg__arco  { stroke: #4FA97C; }
.vvp-app.vvp-escuro .vvp-svg__trilho { stroke: rgba(255, 255, 255, .12); }
.vvp-app.vvp-escuro .vvp-barras__trilho { background: rgba(255, 255, 255, .12); }
.vvp-app.vvp-escuro .vvp-legenda__cor { background: #4FA97C; }
.vvp-app.vvp-escuro .vvp-legenda__cor--vazio { background: rgba(255, 255, 255, .18); }