/**
 * Tela de relatorios.
 *
 * O ESSENCIAL NAO ESTA AQUI. A tabela reaproveita `.leads-tabela` e a area de
 * rolagem `.leads-tabela-area`, de leads.css: e a mesma tabela densa de sempre,
 * e uma copia dela viveria o resto da vida divergindo da original a cada ajuste
 * de espacamento. Este arquivo tem so o que e proprio dos relatorios - as abas
 * que trocam de relatorio e dois detalhes de celula.
 */

/* ------------------------------------------------------------------ */
/* As abas que escolhem o relatorio                                    */
/* ------------------------------------------------------------------ */
/*
 * Botoes de verdade, e nao links: a troca de relatorio NAO muda o endereco - e
 * estado da pagina. Um <a href="#"> aqui prometeria um destino que nao existe, e
 * quebraria "abrir em nova aba" para quem tentasse.
 */
.relatorio-abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
}

.relatorio-aba {
  padding: var(--esp-2) var(--esp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--cor-texto-fraco);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  /* A borda de baixo e o unico indicador, e ela nasce transparente: sem isto a
     aba saltaria dois pixels ao ser marcada. */
  margin-bottom: -1px;
}

.relatorio-aba:hover {
  color: var(--cor-texto);
}

.relatorio-aba--ativa {
  color: var(--cor-primaria);
  border-bottom-color: var(--cor-primaria);
}

/*
 * O foco do teclado NAO e removido junto com a borda: a aba e um controle, e
 * quem navega por Tab precisa ver onde esta.
 */
.relatorio-aba:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
  border-radius: var(--raio-controle);
}

/* ------------------------------------------------------------------ */
/* Celulas                                                             */
/* ------------------------------------------------------------------ */

/*
 * O nome fantasia, sob a razao social. Mesma forma de `.leads-agencia-fantasia`
 * na lista de lojas - a classe e propria porque ali ela depende do flex do
 * `.leads-agencia`, que esta tabela nao usa.
 */
.relatorio-fantasia {
  display: block;
  color: var(--cor-texto-fraco);
  font-size: var(--txt-corpo-p);
}

.relatorio-truncado {
  margin-bottom: var(--esp-4);
}

/* ------------------------------------------------------------------ */
/* A folha impressa                                                    */
/* ------------------------------------------------------------------ */
/*
 * Fica NESTE arquivo e nao em impressao.css porque e conteudo de relatorio, e
 * impressao.css e a folha - margens, cabecalho, o que some ao imprimir. A
 * separacao e a mesma de `.ficha-*`, que mora la por ser da folha.
 *
 * As regras valem sob `.folha` para nao alcancarem a tela.
 */
.folha .relatorio-folha-recorte {
  margin: var(--esp-4) 0;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
}

.folha .relatorio-folha-filtros {
  margin: 0 0 var(--esp-2);
  font-size: var(--txt-corpo-p);
}

.folha .relatorio-folha-total {
  margin: 0;
}

.folha .relatorio-folha-aviso {
  color: var(--cor-texto-fraco);
  font-size: var(--txt-corpo-p);
}

/*
 * O CABECALHO SE REPETE a cada pagina impressa.
 *
 * Um relatorio de duzentas linhas ocupa varias folhas, e a partir da segunda
 * ninguem sabe o que cada coluna e. `thead` com `display: table-header-group` e
 * o que faz o navegador repeti-lo - e o padrao, mas basta um `display` declarado
 * na tabela para perde-lo.
 */
.folha .relatorio-folha-tabela thead {
  display: table-header-group;
}

/* Uma linha nao se parte entre duas folhas: meia loja em cada pagina. */
.folha .relatorio-folha-tabela tr {
  break-inside: avoid;
}

.folha .relatorio-folha-vazio {
  color: var(--cor-texto-fraco);
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* O placar por analista                                               */
/* ------------------------------------------------------------------ */
/*
 * Acima da lista, e estreito: tres colunas curtas esticadas na largura da tela
 * afastariam o nome do numero, e e o par que se le.
 */
.relatorio-placar {
  margin-bottom: var(--esp-4);
}

.relatorio-placar-titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--txt-rotulo-p);
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.relatorio-placar-tabela {
  width: auto;
  min-width: 360px;
}

.relatorio-placar-tabela tfoot th {
  border-top: 1px solid var(--cor-borda);
}

/* O placar na folha: estreito, antes da lista, e sem se partir entre paginas. */
.folha .relatorio-folha-placar {
  width: auto;
  margin-bottom: var(--esp-4);
  break-inside: avoid;
}