/* ==========================================================================
   T09 — Lista de Auditorias

   Composição validada como mockup em `/mockups/auditorias` (aprovada antes
   desta implementação — ver `pages/mockups/auditorias-mockup.css` para o
   histórico das decisões de layout). Este arquivo é a versão de PRODUÇÃO:
   mesmas decisões visuais, integrada ao `DataTable` real (`.tabela-wrapper`
   `.tabela__scroll` `.tabela` `.tabela__rodape`, não a `<table>` própria que
   o mockup usava para expor o seletor de itens por página).

   Nenhuma cor literal: tudo por token de `tokens.css`.
   ========================================================================== */

/* --- largura da página -----------------------------------------------------

   `.shell__conteudo` tem `max-width: 80rem`, apertado para uma tabela de 9
   colunas em monitor largo. Mesma técnica de `central-mockup.css`: o escape
   é escopado a esta página via `:has()`, nenhuma outra muda de comportamento. */
.shell__conteudo:has(.aud-pagina) {
  max-width: none;
}

.aud-pagina {
  gap: var(--e-4);
}

/* --- chips de período + botão Filtros ---------------------------------------

   Linha própria no corpo da página (acima da barra de busca/status/tipo/
   regional), separada do CTA "Nova auditoria" — que fica em `get acoes()`,
   ao lado do título/subtítulo, isolado no canto superior direito (pedido
   pontual: antes os 3 chips + Filtros + CTA disputavam a mesma fileira à
   direita do cabeçalho). Alinhada à esquerda, como o resto do conteúdo da
   página — não mais `justify-content: flex-end`, que fazia sentido quando
   vivia dentro de `.pagina-acoes`. */
.aud-acoes-topo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

/* Badge de filtros avançados ativos no botão "Filtros". */
.aud-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 var(--e-1);
  margin-left: var(--e-1);
  border-radius: 999px;
  background: var(--azul-900);
  color: var(--neutro-0);
  font-size: var(--txt-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- KPIs -------------------------------------------------------------------

   Calculados no cliente sobre a página carregada (não existe endpoint de
   agregados) — ver `kpisAuditorias.js`. `.metricas` é grid de 2 colunas por
   padrão; `--compactas` (de `divergencias.css`) reduz padding e valor: a
   tabela é a protagonista da tela, não os cartões. */
.aud-kpis {
  gap: var(--e-2);
}
@media (min-width: 640px) {
  .aud-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .aud-kpis { grid-template-columns: repeat(5, 1fr); }
}

/* --- barra de filtros -------------------------------------------------------

   Busca mais larga que os selects — é nela que se digita. */
.aud-filtros {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .aud-filtros { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .aud-filtros { grid-template-columns: 2.2fr 1fr 1fr 1fr; }
}
@media (min-width: 768px) and (max-width: 1080px) {
  /* Quatro campos em 4 colunas ficam estreitos demais para os rótulos dos
     selects ("Todos os status" virava "Todos os s…"). Duas fileiras de dois
     campos dão largura de leitura a cada um. */
  .aud-filtros { grid-template-columns: 1fr 1fr; }
}

/* --- seção da tabela --------------------------------------------------------

   O `DataTable` não tem cartão próprio — a página o envolve com `.cartao`. */
.aud-tabela-secao {
  padding: 0;
  overflow: visible; /* o menu de ações é `position: fixed`, não pode ser cortado */
  min-width: 0;
}
.aud-tabela-secao .tabela-wrapper {
  min-width: 0;
}
.aud-tabela-secao .tabela__scroll {
  overflow-x: auto;
  min-width: 0;
}
.aud-tabela-secao .tabela {
  table-layout: fixed;
  min-width: 66rem;
}
.aud-tabela-secao .tabela__rodape {
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--linha);
}

/* --- larguras de coluna ------------------------------------------------------

   Medidas no navegador durante a validação do mockup: número 168px, data
   140px (o cabeçalho "Data planejada"), status 192px (o selo "Aguardando
   justificativa"), ações 68px (o cabeçalho "Ações"). Em PORCENTAGEM, não
   `rem`: com `table-layout: fixed`, larguras absolutas nas oito colunas de
   dado curto consomem todo o container e a coluna `auto` da Loja colapsa
   para 0 (bug real medido em 1440px). Loja fica com a fatia maior porque é
   o texto que mais varia.                                                   */
.aud-col-numero { width: 15%; }
.aud-col-loja   { width: 16%; }
.aud-col-tipo   { width: 8%; }
.aud-col-data   { width: 11%; }
.aud-col-resp   { width: 11.5%; }
.aud-col-prog   { width: 13%; }
.aud-col-status { width: 13%; }
.aud-col-crit   { width: 6.5%; }
.aud-col-acoes  { width: 6%; }

/* O número da auditoria nunca quebra: em duas linhas lê como dois códigos. */
.aud-numero__link { white-space: nowrap; }

/* `.tabela th` (de `dados.css`) declara `padding` em shorthand e
   `white-space: nowrap`; colunas estreitas vizinhas colavam os títulos
   ("DATA PLANEJADARESPONSÁVEL"). O `padding-right` garante a calha. */
.aud-tabela-secao .tabela thead th {
  padding-right: var(--e-3);
  white-space: nowrap;
}

/* --- tablet: condensar, não espremer (768–1080px) ---------------------------

   Declarada DEPOIS das larguras base e de `thead th`: mesma especificidade,
   a última declaração vence. Sete colunas em ~718px úteis (sidebar de 15rem)
   truncavam nomes em três caracteres e transbordavam selos — couber não é o
   mesmo que ser legível. Com seis, cada coluna respira.
   Saem: `Tipo` (quase sempre "Geral"), `Risco` (o Status já sinaliza o que
   precisa de ação) e `Responsável` (secundário a O QUE precisa de ação — está
   no detalhe, e no celular volta no cartão). Nada fica inacessível: abaixo de
   768px TODAS voltam, porque o modo cartão dá uma linha por campo.          */
@media (min-width: 768px) and (max-width: 1080px) {
  .aud-tabela-secao .tabela { min-width: 0; }
  .aud-col-tipo,
  .aud-col-crit,
  .aud-col-resp { display: none; }
  .aud-col-numero { width: 22%; }
  .aud-col-loja   { width: auto; min-width: 0; }
  .aud-col-data   { width: 16%; }
  .aud-col-prog   { width: 19%; }
  .aud-col-status { width: 16%; }
  .aud-col-acoes  { width: 8.5%; }
  .aud-tabela-secao .tabela tbody td { padding-left: var(--e-2); padding-right: var(--e-2); }
  .aud-data { white-space: nowrap; }
  .aud-numero__link { white-space: nowrap; }
  .aud-tabela-secao .tabela thead th {
    white-space: normal;
    padding-left: var(--e-2);
    padding-right: var(--e-3);
  }
}

/* O selo de status nunca vaza para a coluna vizinha. */
.aud-tabela-secao .tabela .selo {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* --- célula: número + selo de reaberta --------------------------------------- */

.aud-numero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.aud-numero__link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--azul-700);
  cursor: pointer;
  text-align: left;
}
.aud-numero__link:hover {
  text-decoration: underline;
}
.aud-numero__link:focus-visible {
  outline: 2px solid var(--azul-500);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* RN-33: auditoria reaberta nunca volta a parecer uma finalização comum. */
.aud-selo-reaberta {
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--laranja-700);
  background: var(--laranja-100);
  border-radius: var(--raio-sm);
  padding: 0 var(--e-1);
}

/* --- célula: loja, tipo, responsável ------------------------------------------ */

.aud-loja,
.aud-tipo,
.aud-resp {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.aud-loja__nome,
.aud-loja__meta,
.aud-tipo__categoria,
.aud-resp__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.aud-loja__nome { font-weight: 600; }
.aud-data { font-variant-numeric: tabular-nums; }

.aud-vazio {
  color: var(--texto-3);
}

/* --- célula: progresso (etapa do ciclo) --------------------------------------- */

.aud-progresso {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.aud-progresso__valor {
  font-size: var(--txt-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
  min-width: 2.5rem;
  text-align: right;
}
.aud-progresso__etapa {
  font-size: var(--txt-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aud-preenchimento--andamento { background: var(--azul-500); }
.aud-preenchimento--ok        { background: var(--conforme); }
.aud-preenchimento--neutro    { background: var(--neutro-300); }

/* --- célula: risco -------------------------------------------------------- */

.aud-risco {
  display: inline-block;
  font-size: var(--txt-xs);
  font-weight: 600;
  padding: 1px var(--e-2);
  border-radius: 999px;
  white-space: nowrap;
}
.aud-risco--baixa   { color: var(--crit-baixa);   background: var(--conforme-100); }
.aud-risco--media   { color: var(--atencao-texto); background: var(--atencao-100); }
.aud-risco--alta    { color: var(--laranja-700);  background: var(--laranja-100); }
.aud-risco--critica { color: var(--crit-critica); background: var(--falta-100); }

/* --- célula: ações -------------------------------------------------------- */

.aud-col-acoes { text-align: right; }
.aud-tabela-secao .tabela thead .aud-col-acoes { padding-right: var(--e-4); }
.aud-acoes {
  display: inline-block;
}
.aud-acoes .menu-botao__gatilho {
  padding: var(--e-1) var(--e-2);
  min-height: 2rem;
}
.aud-acoes .menu-botao__gatilho span:not(.menu-botao__seta) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.aud-acoes .menu-botao__seta {
  display: none;
}

/* --- celular: a tabela vira lista de cartões --------------------------------

   `dados.css` já transforma `.tabela` em cartões abaixo de 768px, usando o
   `data-label` de cada `<td>`. O que falta é desfazer as larguras fixas do
   modo tabela. */
@media (max-width: 767px) {
  .aud-tabela-secao .tabela {
    table-layout: auto;
    min-width: 0;
  }
  .aud-tabela-secao .tabela__scroll {
    overflow-x: visible;
  }
  .aud-col-numero,
  .aud-col-loja,
  .aud-col-tipo,
  .aud-col-data,
  .aud-col-resp,
  .aud-col-prog,
  .aud-col-status,
  .aud-col-crit,
  .aud-col-acoes {
    width: auto;
  }
  .aud-col-acoes { text-align: left; }
  .aud-acoes .menu-botao__gatilho span:not(.menu-botao__seta) {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }
  .aud-tabela-secao .tabela tbody .aud-col-acoes::before { content: none; }
  .aud-tabela-secao .tabela tbody .aud-col-crit:has(.aud-vazio) { display: none; }
  .aud-acoes-topo {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aud-numero__link,
  .aud-acoes .menu-botao__gatilho {
    transition: none;
  }
}