/**
 * Agenda de Auditorias (RN-42) — calendário mês/semana/lista + KPIs + "Próximas
 * auditorias". Reaproveita o que já existe: `.cartao`, `.metricas`, `.selo`,
 * `.chip-periodo`, `.tabela` (dados.css/central.css, carregados globalmente)
 * — este arquivo só cobre o que não tinha, como `.metricas`/`.selo`/`.tabela`
 * já documentam para `logs.css`/`historico.css`.
 *
 * Nenhuma cor literal: tudo por token, como o resto do app.
 */

/* --- layout da página -------------------------------------------------------- */

.agenda-pagina { display: flex; flex-direction: column; gap: var(--e-3); }

.agenda-pagina__corpo {
  display: grid;
  gap: var(--e-4);
  /* Empilhado por padrão: calendário e "Próximas" um embaixo do outro — a
     coluna lateral só aparece em telas largas o bastante para não espremer
     nenhuma das duas. */
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1100px) {
  .agenda-pagina__corpo { grid-template-columns: minmax(0, 1fr) 20rem; align-items: stretch; }
}

.agenda-pagina__lateral .cartao { position: sticky; top: calc(var(--header-h) + var(--e-4)); }

@media (max-width: 1099px) {
  /* Sem a coluna lateral, "sticky" prenderia a seção no meio do scroll da
     página inteira — só faz sentido quando ela vive ao lado do calendário. */
  .agenda-pagina__lateral .cartao { position: static; }
}

/* --- viewport única no desktop (sem scroll vertical) -------------------------
   Mesma técnica de `.dashboard-pagina` (`indicadores.css`): o cabeçalho da
   PÁGINA (título+subtítulo+ações) é medido em JS
   (`AgendaPage#medirCabecalho`, `--agenda-cabecalho-h`) porque pode quebrar
   em 2 linhas numa janela mais estreita — um valor fixo travaria nesse caso.
   Abaixo de 1280px (OU 1000px de altura, ver `min-height` no media query
   logo abaixo) a página volta a rolar normalmente: "uma tela só" é
   requisito do desktop, não de qualquer largura (tablet/mobile priorizam
   a experiência funcional, ver seção 19 do pedido) — e também não de
   qualquer ALTURA: um notebook 1920×1080 com zoom do navegador acima de
   ~110% reduz a viewport CSS efetiva abaixo dos ~950px úteis que este modo
   precisa, e cada semana do calendário (`grid-template-rows: ... minmax(0,
   1fr)`, mais abaixo) ficava baixa demais — os chips de evento cortavam na
   metade (`.calendario__eventos { overflow: hidden }`), sem nenhuma
   scrollbar para revelar o resto (achado real via inspeção, mesma família
   de bug corrigida em `central-cockpit.css`). */
.shell__conteudo:has(.agenda-pagina) { padding-bottom: var(--e-4); }

@media (min-width: 1280px) and (min-height: 1000px) {
  /* Full-bleed (mesmo padrão de `.dashboard-pagina`, `indicadores.css`): a
     largura de leitura confortável (`max-width: 80rem` do `.shell__conteudo`
     padrão) é certa para tabela/formulário, mas aqui custava a largura que
     faltava para a visão Lista caber sem rolar de lado com a coluna
     "Próximas auditorias" ao lado do calendário. */
  .shell__conteudo:has(.agenda-pagina) { max-width: none; padding-left: var(--e-5); padding-right: var(--e-5); }
  .shell__conteudo:has(.agenda-pagina) > .pagina-cabecalho { margin-bottom: var(--e-3); }

  .agenda-pagina {
    height: calc(100dvh - var(--header-h) - (2 * var(--e-6)) - var(--agenda-cabecalho-h, 4rem));
    min-height: 0;
    overflow: hidden;
  }

  .agenda-pagina > .metricas { flex: 0 0 auto; }

  .agenda-pagina__corpo { flex: 1 1 auto; min-height: 0; }

  .agenda-pagina__calendario { display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .agenda-pagina__calendario .calendario { height: 100%; min-height: 0; }
  .agenda-pagina__calendario .calendario__topo { flex: 0 0 auto; }
  .agenda-pagina__calendario .calendario__corpo { flex: 1 1 auto; min-height: 0; overflow: hidden; }

  /* A lateral "Próximas auditorias" segue a MESMA altura do calendário ao
     lado (`align-items: stretch` no grid acima) — o cartão vira coluna flex
     para o corpo (a lista) ocupar o resto e decidir sozinho quantos itens
     cabem, em vez de vazar para fora do cartão. Nada de `position: sticky`
     aqui: a coluna já não tem overflow de página para acompanhar. */
  .agenda-pagina__lateral { min-height: 0; height: 100%; }
  .agenda-pagina__lateral .cartao {
    position: static;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .agenda-pagina__lateral .central-secao__topo { flex: 0 0 auto; }
  .agenda-pagina__lateral .central-secao__topo,
  .agenda-pagina__lateral > .cartao > *:not(.central-secao__topo) { min-height: 0; }
  .agenda-pagina__lateral .agenda-lista,
  .agenda-pagina__lateral .estado-vazio-cartao { flex: 1 1 auto; min-height: 0; overflow: hidden; }
}

/* --- calendário: cabeçalho -------------------------------------------------- */

.calendario { display: flex; flex-direction: column; gap: var(--e-3); }

.calendario__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.calendario__navegacao {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.calendario__titulo {
  font-size: var(--txt-md);
  font-weight: 600;
  color: var(--texto);
  margin: 0 0 0 var(--e-2);
  text-transform: none;
  white-space: nowrap;
}

/* Visões (Mês/Semana/Lista) + botão Filtros — um grupo só, para a toolbar
   inteira caber numa linha no desktop (seção 7 do pedido: "não criar duas ou
   três linhas de controles"). */
.calendario__acoes {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
}

/* Com filtro ativo, o botão ganha a mesma cor de destaque do texto
   "Filtros (N)" — reforço visual sutil, não um badge separado. */
.btn--filtros-ativos { border-color: var(--azul-500); color: var(--azul-700); }

.calendario__visoes {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .calendario__navegacao { width: 100%; justify-content: space-between; }
  .calendario__titulo { flex: 1; text-align: center; margin: 0; }
  .calendario__acoes { width: 100%; }
  .calendario__visoes { flex: 1 1 auto; }
  .calendario__visoes .chip-periodo { flex: 1; text-align: center; }
}

/* --- grade mensal/semanal ---------------------------------------------------- */

.calendario__grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  /* SEM `overflow: hidden`: o tooltip do evento (`.cal-tooltip`) precisa
     escapar da grade quando o chip está na primeira linha — um `overflow`
     aqui recortaria o popover inteiro, não só o excesso visual. As quinas
     arredondadas vêm de arredondar as 4 células de canto individualmente
     (abaixo), não de recortar o container. */
}

.calendario__cabecalho-dia:first-child { border-top-left-radius: var(--raio); }
.calendario__cabecalho-dia:nth-child(7) { border-top-right-radius: var(--raio); }
.calendario__dia:nth-last-child(7) { border-bottom-left-radius: var(--raio); }
.calendario__dia:last-child { border-bottom-right-radius: var(--raio); }

.calendario__cabecalho-dia {
  background: var(--surface-2);
  color: var(--texto-2);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  padding: var(--e-2);
}

.calendario__dia {
  background: var(--surface);
  min-height: 6.5rem;
  padding: var(--e-2);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

/* Modo sem-scroll (≥1280px E ≥1000px de altura, mesmo guard do bloco acima):
   a grade do mês ocupa 100% da altura que `.calendario__corpo` tiver
   disponível, e cada semana divide esse espaço em partes iguais
   (`--calendario-semanas`, calculado em `gradeMes`) — nunca um `min-height`
   fixo por célula, que é exatamente o "resolver diminuindo tudo" que o
   pedido pediu para NÃO fazer (a régua vertical vem de quantas semanas o mês
   tem, não de uma altura adivinhada). Abaixo do guard de altura, a grade usa
   `grid-auto-rows` com um piso em rem (ver a regra companheira no fallback
   de página) — cada semana cresce pelo PRÓPRIO conteúdo em vez de dividir um
   espaço fixo pequeno demais. */
@media (min-width: 1280px) and (min-height: 1000px) {
  .calendario__grade {
    height: 100%;
    grid-template-rows: auto repeat(var(--calendario-semanas, 6), minmax(0, 1fr));
  }
  .calendario__dia { min-height: 0; }
  .calendario__eventos { min-height: 0; overflow: hidden; }
}

.calendario__dia--fora { background: var(--ground); }
.calendario__dia--fora .calendario__numero { color: var(--texto-3); }

.calendario__dia--hoje {
  box-shadow: inset 0 0 0 2px var(--laranja);
}

.calendario__numero {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-2);
}

.calendario__eventos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* --- grade semanal: grade de horas -------------------------------------------
   8 colunas (rótulo de hora + 7 dias) × N linhas (uma por hora do expediente,
   mais "Sem horário" quando existe evento sem hora definida). Cada célula
   hora×dia empilha os chips lado a lado — ver `gradeSemana` em
   calendarioGrades.js. */

/* `overflow-x: auto` sozinho faria o `overflow-y` computado virar `auto`
   também (regra do CSS ao combinar eixos) — isso recortaria o tooltip de um
   evento na última linha de hora. `overflow-y: visible` mantém o scroll só
   no eixo horizontal. */
.calendario__grade-semana-wrap { overflow-x: auto; overflow-y: visible; border-radius: var(--raio); border: 1px solid var(--linha); }

.calendario__grade--semana {
  grid-template-columns: 4.5rem repeat(7, minmax(7rem, 1fr));
  border: none;
  border-radius: 0;
  min-width: 40rem;
}

.calendario__grade--semana .calendario__cabecalho-dia { text-align: center; }

.calendario__canto { background: var(--surface-2); }

.calendario__rotulo-hora {
  background: var(--surface-2);
  color: var(--texto-2);
  font-size: var(--txt-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: var(--e-2);
  white-space: nowrap;
}

.calendario__hora-celula {
  background: var(--surface);
  min-height: 2.75rem;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
}

.calendario__hora-celula--hoje { background: var(--surface-2); }

/* Modo sem-scroll (≥1280px): 07h–19h inteiro (13 linhas) quase nunca cabe
   junto com KPIs+toolbar numa viewport de notebook (1366×768). Em vez de
   encolher a régua de horário até ficar ilegível (o pedido pede
   explicitamente para NÃO fazer isso), o scroll — se ainda for preciso —
   fica PRESO à área do calendário: a página continua sem rolar, só a grade
   de horas rola dentro de si mesma. `max-height: 100%` (não `height`) deixa
   a grade menor que isso quando o mês tem menos altura pedida (ex.: só a
   linha "Sem horário" + poucas horas com evento). */
@media (min-width: 1280px) {
  /* Troca deliberada: `overflow-y` sai de `visible` (que protegia o tooltip
     de ser cortado, ver comentário acima) para `auto` só aqui, porque a
     alternativa era a PÁGINA rolar — o requisito central do pedido. Efeito
     colateral aceito: com o scroll interno ativo, o tooltip de um evento
     perto da borda inferior do calendário pode ficar parcialmente cortado
     por este wrapper. Fora deste breakpoint (scroll normal da página), o
     tooltip continua 100% protegido. */
  .calendario__grade-semana-wrap { max-height: 100%; overflow-y: auto; }

  /* Densidade um degrau maior (2.75rem → 2.25rem): ainda confortável para
     clicar/ler, mas mostra mais horas de uma vez antes de precisar do
     scroll interno acima — 1366×768 (a régua mais apertada) passa de ~5
     linhas visíveis para ~7 sem chegar perto de "fonte minúscula", que o
     pedido pede para evitar. */
  .calendario__hora-celula { min-height: 2.25rem; }
}

.calendario__grade--semana .cal-evento { flex: 1 1 6rem; min-width: 5rem; }

/* --- chip de evento ---------------------------------------------------------- */

.cal-evento {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-1);
  min-width: 0;
  font: inherit;
  font-size: var(--txt-xs);
  text-align: left;
  background: var(--surface-2);
  border: none;
  border-left: 3px solid var(--linha-2);
  border-radius: var(--raio-sm);
  padding: 2px var(--e-2);
  cursor: pointer;
  min-height: var(--toque-min);
}

@media (min-width: 900px) {
  /* Em telas largas o clique é pelo mouse — o alvo mínimo de toque só
     importa nas visões que o celular usa (a grade vira lista abaixo de
     768px, ver `Calendario.js`). */
  .cal-evento { min-height: auto; }
}

.cal-evento__hora { font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cal-evento__loja { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-evento--info    { border-left-color: var(--info); }
.cal-evento--ativo   { border-left-color: var(--azul-700); }
.cal-evento--erro    { border-left-color: var(--falta); }
.cal-evento--ok      { border-left-color: var(--conforme); }
.cal-evento--neutro  { border-left-color: var(--linha-2); opacity: .7; }

.cal-evento--mais {
  color: var(--texto-2);
  font-weight: 600;
  justify-content: center;
  background: transparent;
  border-left-color: transparent;
}
.cal-evento--mais:hover { background: var(--surface-2); }

/* --- tooltip do evento (desktop apenas) --------------------------------------
   Popover CSS puro: aparece no hover/foco do chip, some no mouse leave. Não
   existe em telas sem mouse de verdade — abaixo de 900px a grade some (vira
   lista) antes mesmo do breakpoint de mobile (768px) do Calendario.js, então
   o tooltip nunca chega a competir com toque. */
.cal-tooltip {
  display: none;
  position: absolute;
  z-index: 20;
  /* Abre para BAIXO do chip, não para cima: o chip costuma estar perto do
     topo da própria célula, e tanto `.calendario__grade` quanto
     `.calendario__grade-semana-wrap` são containers que um popover para
     cima acabaria clipando na primeira linha (visto na verificação visual —
     ver docs/09-plano-de-fases.md, entrega do refinamento T06). */
  top: calc(100% + var(--e-2));
  left: 0;
  width: 16rem;
  max-width: max(16rem, 60vw);
  padding: var(--e-3);
  background: var(--azul-900);
  color: var(--neutro-0);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
  font-size: var(--txt-xs);
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

@media (min-width: 900px) {
  .cal-evento:hover .cal-tooltip,
  .cal-evento:focus-visible .cal-tooltip { display: block; }
}

.cal-tooltip__numero { display: block; font-size: var(--txt-sm); }
.cal-tooltip__loja { font-weight: 600; margin-top: 2px; }
.cal-tooltip__tipo { color: var(--creme); opacity: .85; margin-bottom: var(--e-2); }

.cal-tooltip__linha {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-1) 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.cal-tooltip__linha span:last-child { text-align: right; }

.cal-tooltip__rotulo { color: var(--creme); opacity: .75; flex: 0 0 auto; }

.cal-tooltip__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding-top: var(--e-2);
  margin-top: var(--e-1);
  border-top: 1px solid rgba(255, 255, 255, .15);
}

/* --- visão Lista: sem scroll de página ---------------------------------------
   Mesma lógica da grade semanal: no modo sem-scroll (≥1280px), se a tabela
   tiver mais linhas do que cabem, quem rola é o CONTAINER da tabela, nunca
   a página. `thead` fica fixo no topo do próprio scroll (seção 15 do
   pedido: mostrar só o que cabe + navegação, aqui via scroll contido em vez
   de paginação — a Lista já busca só a janela do mês corrente, o mesmo
   volume que Mês/Semana mostram, então uma paginação própria duplicaria
   controle sem necessidade real). */
@media (min-width: 1280px) {
  .agenda-pagina__calendario .tabela-wrapper { height: 100%; display: flex; flex-direction: column; }
  .agenda-pagina__calendario .tabela__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .agenda-pagina__calendario .tabela thead th { position: sticky; top: 0; z-index: 1; }

  /* A coluna do calendário divide a largura com a lateral de 20rem (grid de
     `.agenda-pagina__corpo`) — as 8 colunas da Lista (Data/Hora/Auditoria/
     Loja/Tipo/Responsável/Status/Ações) com o padding padrão de `.tabela`
     (12px 16px) forçavam scroll horizontal mesmo em 1366px full-bleed.
     Padding mais enxuto + quebra de texto em vez de nowrap: cabe sem scroll
     de lado, sem recorrer a fonte menor (mesma régua de tamanho, só menos
     ar ao redor e menos colunas competindo por largura mínima). */
  .agenda-pagina__calendario .tabela th,
  .agenda-pagina__calendario .tabela td { padding: var(--e-2) var(--e-2); white-space: normal; }
  .agenda-pagina__calendario .tabela td.mono { white-space: nowrap; font-size: var(--txt-xs); }
  /* Largura-alvo nas colunas mais longas ("Nome Sobrenome, Nome Sobrenome",
     "AUD-2026-000002", "Cancelada") — sem isso o `auto` do `<table>` dava a
     cada uma mais espaço do que qualquer coluna vizinha disputava de volta,
     e a soma passava da largura disponível mesmo com padding já reduzido. */
  .agenda-pagina__calendario .tabela th:nth-child(3),
  .agenda-pagina__calendario .tabela td:nth-child(3) { width: 7.5rem; }
  .agenda-pagina__calendario .tabela th:nth-child(6),
  .agenda-pagina__calendario .tabela td:nth-child(6) { width: 10rem; }
  .agenda-pagina__calendario .tabela th:nth-child(7),
  .agenda-pagina__calendario .tabela td:nth-child(7) { width: 6rem; }
}

/* --- visão Lista: cabeçalho ordenável ----------------------------------------- */

.tabela__botao-ordenar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.tabela__botao-ordenar:hover { color: var(--azul-900); }

.tabela__seta { font-size: var(--txt-xs); color: var(--azul-500); }

.tabela__th--ordenada { color: var(--azul-900); }

/* --- visão dia / lista de agenda (fallback mobile) --------------------------- */

.agenda-lista { display: flex; flex-direction: column; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }

.agenda-lista__grupo + .agenda-lista__grupo { margin-top: var(--e-3); }

.agenda-lista__data {
  position: sticky;
  top: 0;
  background: var(--ground);
  color: var(--texto-2);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--e-2) 0;
  margin: 0 0 var(--e-1);
}

.proximas__item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  font: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: var(--e-3);
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.proximas__item:hover { box-shadow: var(--sombra); border-color: var(--linha-2); }
.proximas__item:focus-visible { outline: 2px solid var(--azul-500); outline-offset: 2px; }

.proximas__quando { flex: 0 0 auto; min-width: 5.5rem; }
.proximas__quando strong { display: block; }
.proximas__onde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.proximas__onde strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  .proximas__item { flex-wrap: wrap; }
  .proximas__quando { min-width: 0; }
}

/* Quantos itens de "Próximas auditorias" ficaram de fora — texto discreto
   dentro do próprio botão "Ver todas", nunca um badge chamativo: é
   informação de apoio, o número principal já é o rótulo do botão. */
.proximas__ocultos { color: var(--texto-3); font-weight: 400; }

/* --- drawer de detalhe do evento --------------------------------------------- */

.drawer-evento__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--linha);
  font-size: var(--txt-lg);
}

/* "Outubro de 2026", não "Outubro De 2026": `capitalize` sobe a inicial de
   TODA palavra, inclusive a preposição — só a primeira letra vai para
   maiúscula. */
.calendario__titulo::first-letter { text-transform: uppercase; }

/* Lateral de 20rem: data + loja numa linha, o selo de status desce para a
   linha de baixo em vez de sobrepor o nome da loja. */
.agenda-pagina__lateral .proximas__item { flex-wrap: wrap; align-items: flex-start; row-gap: var(--e-2); }
.agenda-pagina__lateral .proximas__onde { flex: 1 1 8rem; }
.agenda-pagina__lateral .proximas__item > .selo { margin-left: calc(5.5rem + var(--e-3)); }