/*
 * Relatório de transparência (etapa D8) -- a barra, o seletor de empresa e o documento.
 *
 * **Este arquivo é deliberadamente magro.** A página de relatório do estático é um `<iframe>`
 * e nada mais: não há desenho de origem para transcrever, então tudo aqui seria invenção.
 * Ficou só o necessário para a página funcionar e não sair torta; o desenho de verdade veio na
 * **G3**, quando a página foi montada e conferida -- e as duas conferências dela mexeram
 * aqui.
 *
 * O que existe segue as regras dos componentes anteriores: cores por token, sem largura de
 * conteúdo (isso é da seção que envolve, ver D2) e o ponto de quebra de sempre.
 */

.relatorio__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--seb-azul-claro);
}

.relatorio__barra-titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 20px;
  font-weight: 700;
  color: var(--seb-azul);
}

/*
 * **A lista aberta flutua sobre a página, e não empurra nada** (G3). Medido antes: abrir o
 * `<details>` levava a barra de 89px para 241px e jogava o documento para baixo -- num
 * controle de navegação, que fica no topo, isso move o conteúdo debaixo do dedo de quem
 * clicou. O original resolve do mesmo jeito, com a lista em `position: absolute`.
 *
 * O `relative` mora no `<details>` para a lista se ancorar nele, e o `z-index` a põe acima do
 * documento que vem depois.
 */
.relatorio__seletor {
  position: relative;
}

/* O seletor é o mesmo controle de divulgação da D7, com a mesma justificativa. */
.relatorio__seletor-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  font-weight: 700;
  color: var(--seb-azul);
  cursor: pointer;
  list-style: none;
}

.relatorio__seletor-rotulo::-webkit-details-marker {
  display: none;
}

.relatorio__seletor-rotulo::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--seb-azul);
  border-bottom: 2px solid var(--seb-azul);
  transform: rotate(45deg) translate(-2px, -2px);
}

.relatorio__seletor[open] .relatorio__seletor-rotulo::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/*
 * `max-height` com rolagem porque a lista é longa -- **24 empresas em produção**, uma por CNPJ,
 * contadas na G3 na página que está no ar. (Em desenvolvimento são 4, que é o que a pasta do
 * Filer local tem. E os 288 que a D8 cita existem: são o total de itens cadastrados no banco
 * entre todos os seletores, não o tamanho desta lista -- ela vem dos arquivos da pasta.) É medida de contêiner de controle, não de conteúdo.
 *
 * O `absolute` é o que a G3 corrigiu: ancorada no `<details>`, alinhada à direita dele e
 * **acima** do conteúdo. Fundo e sombra são necessários por consequência -- flutuando sobre o
 * documento, uma lista transparente seria ilegível.
 */
.relatorio__empresas {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  /* `min()` para o mínimo não vencer o máximo: abaixo de ~292px de viewport, um `260px` fixo
   * passaria por cima do `max-width` logo abaixo. */
  min-width: min(260px, 100%);
  /*
   * **E não passa da tela.** A barra é `flex-wrap`: no celular o seletor pode cair numa linha
   * própria, e uma lista de 260px ancorada à direita dele se estende para a esquerda -- em
   * tela estreita, para fora da viewport.
   */
  max-width: calc(100vw - 32px);
  /* `svh` pela mesma razão da imagem, logo abaixo: `vh` conta a barra de endereço do celular
   * que se esconde. */
  max-height: 50svh;
  overflow-y: auto;
  padding: 8px 16px;
  background-color: var(--seb-branco);
  border-radius: 8px;
  box-shadow: 0 7px 29px 0 rgb(var(--seb-azul-rgb) / 0.2);
}

.relatorio__empresa {
  display: block;
  padding: 8px 0;
  font-family: var(--seb-fonte-corpo);
  font-size: 16px;
  color: var(--seb-azul);
}

/*
 * `font-weight` só na atual, e não no hover: engrossar a fonte ao passar o mouse muda a
 * largura do item e faz a lista pular sob o cursor.
 */
.relatorio__empresa:hover {
  text-decoration: underline;
}

.relatorio__empresa--atual {
  font-weight: 700;
  text-decoration: underline;
}

/*
 * A página do documento, convertida em imagem (ver o template).
 *
 * **Quem manda é a largura, e isso é a segunda conferência da G3 corrigindo a primeira.** Na
 * primeira havia `max-height: 80svh` para o documento caber inteiro na tela; o efeito medido
 * numa janela de 900px de altura foi uma imagem de 1020px de largura -- ilegível para um
 * relatório cheio de tabelas, e foi o que a conferência apontou.
 *
 * Agora a imagem ocupa a largura que a página oferece e a altura vem da proporção dela. O
 * preço é honesto e conhecido: o documento passa da altura da janela -- e mais ainda se for
 * retrato --, e quem lê rola a página. Rolar a **página** era o que se queria desde o começo -- o que não se quer é
 * rolar *dentro* de uma janela de visualizador, com barra de ferramentas em volta.
 *
 * Sem `max-height`, então, e o teto de largura mora na folha da página, junto das outras
 * medidas dela. **No celular não há o que ajustar**: a imagem já ocupa a faixa toda, e a saída
 * para ler um documento pequeno é a ampliação do próprio navegador -- não uma janela rolável
 * dentro da página.
 */
.relatorio__pagina {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--seb-azul-claro);
}

/* Entre páginas, quando o documento tem mais de uma. */
.relatorio__pagina + .relatorio__pagina {
  margin-top: 16px;
}

.relatorio__cabecalho,
.relatorio__cnpj,
.relatorio__texto {
  font-family: var(--seb-fonte-corpo);
  color: var(--seb-azul);
}

.relatorio__cnpj {
  font-family: var(--seb-fonte-titulo);
  font-size: 28px;
  font-weight: 700;
}

@media (max-width: 768px) {
  /*
   * **Tudo centrado, e é o que resolve a lista saindo da tela** (G3, segunda conferência).
   * Aqui a barra empilha, e com `space-between` o seletor ficava colado na esquerda: a lista,
   * ancorada à **direita** dele, se estendia para fora da viewport -- medido, `left: -100px`
   * numa tela de 375px.
   *
   * Com o seletor sozinho na linha, centrado, e a lista centrada nele, ela não tem para onde
   * vazar -- o `max-width` de `100vw - 32px` que ela já tinha passa a bastar.
   */
  .relatorio__barra {
    padding: 16px;
    justify-content: center;
    text-align: center;
  }

  /*
   * O seletor **sozinho na linha**: a barra é `flex-wrap`, e perto dos 768px o título e ele
   * ainda cabem juntos -- aí o centro do `<details>` não é o centro da barra, e a lista
   * ancorada nele volta a poder passar da borda. Com `flex-basis: 100%` a linha é dele.
   */
  .relatorio__seletor {
    flex-basis: 100%;
  }

  .relatorio__empresas {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .relatorio__barra-titulo {
    font-size: 16px;
  }

  .relatorio__cnpj {
    font-size: 22px;
  }

}