/*
 * 70_admin.css — ONDA G · §12.4, §12.5, §12.7, §12.8
 * ═══════════════════════════════════════════════════════════════════════════
 * SÓ o que a onda D não tem. Botão, cartão, tabela-que-vira-cartão, medidor,
 * selo, aviso, abas, paginação e os seis estados vazios vêm de
 * `10_componentes.css` e são usados como estão — reescrever qualquer um deles
 * aqui criaria um segundo botão primário, e é assim que um design system morre.
 *
 * O que é genuinamente novo nesta onda, e por quê:
 *
 *   .faixa-elevo   §12.5 — a faixa fixa de "entrar como". Não existe em lugar
 *                  nenhum do produto porque ela é a única coisa na tela que
 *                  fala da ELEVÔ dentro da conta do CLIENTE.
 *   .lote          §12.7 — a barra de ação que aparece com a seleção. O rodapé
 *                  grudado é o que faz "Aprovar e matricular" ser alcançável
 *                  com 300 linhas na tela.
 *   .filtros       §12.4 — a faixa de filtro por filial/cargo/busca.
 *   .ficha         a lista de rótulo/valor da ficha de pessoa e do console.
 *   .barras        §12.4 — conclusões por semana, em `<meter>` nativo (a CSP
 *                  não deixa passar `style="height:…"`, e nem deveria).
 *   .painel-numero os seis números, que são CARTÕES CLICÁVEIS.
 *
 * Nenhuma regra aqui escreve hex: os tokens da onda D são a única camada com
 * valor literal, e o tema claro sai de graça por causa disso.
 *
 * NADA A PEDIR AO INTEGRADOR SOBRE CARREGAMENTO — e este parágrafo está aqui
 * porque uma versão anterior pedia o contrário, e o pedido estava ERRADO:
 * `stylesheet_link_tag :app` (layouts/application.html.erb) emite um <link>
 * para CADA folha do load path, em ordem de nome, e este arquivo já sai lá
 * depois de `10_componentes`. Conferido no <head> de `/`. Um
 * `@import "70_admin.css"` em `application.css` carregaria a folha duas vezes.
 */

/* ═══ FAIXA DE "ENTRAR COMO" (§12.5) ══════════════════════════════════════
   Fixa no topo, acima de tudo, e com a cor de ATENÇÃO — nunca a cor da marca
   do cliente: a faixa existe justamente para dizer "isto aqui não é a sua
   empresa falando com você".                                                */

.faixa-elevo {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  background: var(--cor-descanso-suave);
  color: var(--cor-descanso);
  border-bottom: 2px solid var(--cor-descanso);
  font-size: var(--texto-sm);
}
.faixa-elevo__icone { flex: none; display: inline-flex }
.faixa-elevo__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.faixa-elevo__detalhe { color: var(--texto-suave); font-size: var(--texto-xs) }
/* O "sair" é um `button_to` — FORMULÁRIO, e não link, porque o Turbo 8
   pré-carrega link no hover e o hover encerraria a impersonação sozinho. Quem
   ganha as regras de posição é o <form>; o <button> de dentro usa `.botao`. */
.faixa-elevo__sair { margin-left: auto; flex: none }

@media (max-width: 40rem) {
  .faixa-elevo { flex-wrap: wrap }
  .faixa-elevo__sair { margin-left: 0; width: 100% }
  .faixa-elevo__sair .botao { width: 100% }
}

/* ═══ PAINEL: OS SEIS NÚMEROS (§12.4) ═════════════════════════════════════
   Cada número é um LINK. Número que não leva a lugar nenhum é enfeite, e
   enfeite no painel do cliente é o que faz ele parar de abrir o painel.      */

.painel-numeros { margin-bottom: var(--esp-6) }

.painel-numero {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicao-rapida), transform var(--transicao-rapida);
}
.painel-numero:hover { border-color: var(--cor-marca-tenue); transform: translateY(-1px) }
.painel-numero:focus-visible { border-color: var(--cor-marca) }

/* ═══ CONCLUSÕES POR SEMANA (§12.4) ═══════════════════════════════════════
   `<meter>` e não `<div style="height:…">`: a CSP do projeto põe nonce em
   `style-src`, e nonce NÃO vale para atributo `style` — em produção o estilo
   inline é descartado em silêncio e a barra vira um traço. De quebra, o leitor
   de tela anuncia o valor sozinho.                                           */

.barras {
  display: flex;
  align-items: flex-end;
  gap: var(--esp-2);
  list-style: none;
  margin: 0 0 var(--esp-3);
  padding: 0;
  min-height: 8rem;
}
.barras__coluna {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  min-width: 0;
}
.barras__valor { font-size: var(--texto-xs); color: var(--texto-tenue); font-variant-numeric: tabular-nums }
.barras__rotulo { font-size: var(--texto-xs); color: var(--texto-tenue); white-space: nowrap }

/* `<meter>` na vertical: `appearance: none` e depois os dois pseudo-elementos,
   porque WebKit e Gecko não compartilham nenhum deles. */
.barras__barra {
  appearance: none;
  -webkit-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 100%;
  max-width: 2.5rem;
  height: 5rem;
  background: var(--fundo-fundo);
  border: 0;
  border-radius: var(--raio-1);
  overflow: hidden;
}
.barras__barra::-webkit-meter-bar { background: var(--fundo-fundo); border: 0; border-radius: var(--raio-1) }
.barras__barra::-webkit-meter-optimum-value,
.barras__barra::-webkit-meter-suboptimum-value,
.barras__barra::-webkit-meter-even-less-good-value { background: var(--cor-marca-forte) }
.barras__barra::-moz-meter-bar { background: var(--cor-marca-forte) }

/* ═══ FILTROS (§12.4) ═════════════════════════════════════════════════════ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-4);
  margin-bottom: var(--esp-5);
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
}
.filtros__campo { flex: 1 1 12rem; margin-bottom: 0 }
.filtros__acoes { display: flex; gap: var(--esp-2); flex: none }

@media (max-width: 40rem) {
  .filtros { flex-direction: column; align-items: stretch }
  .filtros__acoes > * { flex: 1 }
}

/* ═══ O LOTE: APROVAR E MATRICULAR (§12.7) ════════════════════════════════
   A barra de ação gruda no rodapé da janela ENQUANTO HÁ SELEÇÃO. Com 300
   linhas, um botão no fim da página é um botão que ninguém acha; e uma barra
   sempre visível, com "0 selecionados", é uma barra que o admin aprende a
   ignorar. Por isso ela some (`.lote--vazio`) e o Stimulus só alterna a classe.
   Sem JavaScript a barra fica visível — que é o comportamento seguro.        */

.tabela__marcar { width: 2.5rem }
.tabela__marcar input, .tabela td input[type="checkbox"] { width: 1.15rem; height: 1.15rem }
.tabela__acoes { text-align: right; white-space: nowrap }

.lote__barra {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
  padding: var(--esp-4);
  background: var(--fundo-elevado);
  border: 1px solid var(--cor-marca-tenue);
  border-radius: var(--raio-3);
  box-shadow: var(--sombra-3);
}
.lote--vazio .lote__barra { display: none }
.lote__contagem {
  margin: 0;
  font-weight: var(--peso-forte);
  color: var(--cor-marca);
  flex: 1 1 100%;
}
.lote__campos { display: flex; flex-wrap: wrap; gap: var(--esp-4); flex: 1 1 20rem }
.lote__campos .campo { margin-bottom: 0; flex: 1 1 12rem }
.lote__barra .botao { flex: none }

.campo__controle--multiplo { min-height: 6rem; padding: var(--esp-2) }
.selecao__todos { display: inline-flex; align-items: center; min-height: var(--alvo) }

@media (max-width: 48rem) {
  .lote__barra { flex-direction: column; align-items: stretch }
  .lote__barra .botao { width: 100% }
}

/* ═══ DADOS: rótulo e valor (§12.4, §12.5) ════════════════════════════════
   O bloco se chama `.dados` e NÃO `.ficha` de propósito: `.ficha` já existe,
   é da onda A (`30_identidade.css` define `.ficha__valor--codigo`) e tem a
   estrutura BEM dela (`.ficha__linha > .ficha__rotulo/.ficha__valor`), usada
   em /perfil, /admin/marca, /admin/contrato e na assinatura do contrato.
   Escrever regras para `.ficha` aqui seria pintar a tela de outra onda a
   partir do arquivo desta — e no dia em que a onda A completasse o bloco dela,
   as duas folhas disputariam a mesma tela. */

.dados { display: grid; gap: var(--esp-3); margin: 0 }
@media (min-width: 40rem) { .dados { grid-template-columns: repeat(2, 1fr) } }
.dados > div { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.dados dt { font-size: var(--texto-xs); color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 0.04em }
.dados dd { margin: 0; color: var(--texto); font-size: var(--texto-md); overflow-wrap: anywhere }
/* Número que pede ação. Âmbar e NUNCA vermelho: vermelho neste produto é
   "reprovado" (§15.1, a semântica é a língua do produto), e vídeo travado não
   reprovou ninguém. */
.dados dd.dados__alerta { color: var(--cor-descanso); font-weight: var(--peso-forte) }

.acoes-da-pessoa {
  display: grid;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--borda);
}
.acao-com-motivo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3) }
.acao-com-motivo .campo { flex: 1 1 18rem; margin-bottom: 0 }

/* ═══ IMPORTAÇÃO (§12.8) ══════════════════════════════════════════════════ */

.colunas-aceitas {
  display: block;
  padding: var(--esp-3);
  background: var(--fundo-fundo);
  border-radius: var(--raio-2);
  font-size: var(--texto-sm);
  overflow-wrap: anywhere;
}

/* A linha com problema é marcada por COR **e** por texto (a coluna Situação
   traz o selo e a frase do erro): parte considerável dos homens tem alguma
   deficiência de visão de cor, e este produto é de motoristas e de gente de
   garagem. Cor sozinha nunca carrega informação aqui. */
.tabela tbody tr.linha--erro { background: var(--cor-reprovado-suave) }
.tabela tbody tr.linha--elevo { background: var(--cor-descanso-suave) }

/* ═══ CONSOLE ═════════════════════════════════════════════════════════════ */

.quebra { overflow-wrap: anywhere; word-break: break-all; display: inline-block; max-width: 100% }
