/* Gráficos do relatório — HTML e CSS, sem biblioteca: as larguras saem do
   servidor em porcentagem e a faixa do calendário sai de uma classe.

   As séries são os próprios estados do app (verde marcado, azul faltante), e
   as cores vêm dos tokens --chart-* e --heat-*, validados em colors.css.
   Regras que valem para todo gráfico daqui: uma escala por eixo, cor presa à
   entidade e não à posição, marca fina e grade discreta, e todo recorte
   clicável tem a sua tabela embaixo. A série nunca se identifica só pela cor:
   quem a nomeia é a coluna da tabela onde o número dela sai — por isso não há
   legenda separada. */

/* ── filtro do período ────────────────────────────────── */
.rep-filter {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px;

  & :where(.field) { margin: 0; }

  & :where(.field) input, & :where(.field) select { width: auto; }

  /* São dois formulários — o atalho do quadrimestre e as duas datas —, e quem
     alinha os campos é esta faixa, não cada um deles. Sem isto, cada <form>
     vira um item de flex e as datas descem para baixo do seletor. */
  & > form { display: contents; }
}

.rep-period {
  flex: 1; text-align: right; font-family: var(--mono); font-size: 11px;
  letter-spacing: .05em; color: var(--ink-faint); white-space: nowrap;
}

/* ── números do período ───────────────────────────────
   Cinco grandezas, sem plotagem: aqui um gráfico seria enfeite. */
.stats {
  display: flex; gap: 38px; flex-wrap: wrap;
  border-top: 1px solid var(--line-strong); padding: 14px 0 0;
}

.stat {
  display: flex; align-items: baseline; gap: 8px;

  & .v {
    font-size: 26px; font-weight: 400; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--stat-color, var(--ink));
  }

  & .l {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-faint);
  }
}

.stat--marcados  { --stat-color: var(--chart-marcados); }
.stat--faltantes { --stat-color: var(--chart-faltantes); }
.stat--fora      { --stat-color: var(--ink-muted); }

/* ── mês a mês ────────────────────────────────────────
   A barra mora dentro da própria linha da tabela: o número exato importa
   tanto quanto a comparação.

   A seção não tem régua própria: quem a abre é o .mhead, que já traz o filete
   forte e os nomes das colunas. O respiro que era da régua vem daqui. */
:where(.stats) + :where(.mrolagem, .mtable) { margin-top: 34px; }

/* A tabela rola dentro do próprio quadro quando não couber — a folha nunca
   rola de lado. As sete colunas somam exatamente a largura útil da folha no
   teto dela, então abaixo de 66rem o contêiner é necessário, e acima dele não
   precisa existir. Mesma régua e mesma razão da .fila-rolagem.

   ponytail: onde a rolagem entra, o balão do [data-tip] da barra pode sair
   cortado — `overflow-x: auto` não existe sozinho, o eixo que sobra deixa de
   ser `visible` junto. É o mesmo teto que a fila já aceita. */
@media (max-width: 66rem) {
  .mrolagem { overflow-x: auto; }
}

.mtable {
  display: grid;
  grid-template-columns:
    max-content minmax(90px, 1fr) max-content max-content max-content max-content minmax(0, max-content);
  column-gap: 16px;
}

.mhead, .mrow {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line);
}

.mhead {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom-color: var(--line-strong);

  /* números alinham à direita como os valores; o mês e a barra, à esquerda */
  & span:nth-child(n+3) { justify-self: end; }
  & span:last-child { justify-self: start; }
}

.mrow {
  cursor: pointer; text-align: left; font: inherit;
  background: none; border-left: 0; border-right: 0; border-top: 0;

  &:hover { background: var(--surface-2); }

  /* O recorte escolhido: régua E fundo, o mesmo par com que o chip ligado se
     mostra na fila (.chip[aria-current]). Só a régua não bastava —
     numa lista em que toda linha já tem filete embaixo, trocar a cor de um
     deles é diferença que só se enxerga procurando. O azul continua sendo a
     escolha de quem lê, e o fundo é o do sistema, não um cinza novo.

     Vence o :hover por vir depois: os dois empatam em especificidade. */
  &.is-sel { background: var(--accent-soft); border-bottom: 2px solid var(--accent); }

  & .mm { font-size: 14.5px; font-weight: 600; }

  & .mn {
    font-family: var(--mono); font-size: 13.5px;
    font-variant-numeric: tabular-nums; justify-self: end;
  }

  & .mn--marcados { color: var(--chart-marcados); }
  & .mn--faltantes { color: var(--chart-faltantes); }

  & .mc { font-size: 12.5px; color: var(--ink-muted); }
}

/* marca: 10px de altura, ponta arredondada, 2px de respiro entre segmentos */
.track {
  display: flex; gap: 2px; height: 10px; align-items: stretch;

  & i { display: block; border-radius: 0 2px 2px 0; }

  & i:first-child { border-radius: 2px; }

  & .b--marcados { background: var(--chart-marcados); }
  & .b--faltantes { background: var(--chart-faltantes); }
}

/* ── calendário-mapa ──────────────────────────────────
   A pergunta é sobre o calendário, então a resposta é um calendário: um
   quadrimestre inteiro cabe em quatro mini-meses. Quatro faixas fixas
   (1, 2, 3, 4 ou mais) — a mesma cor significa a mesma coisa em todo período. */
.cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 22px; }

.cal-month .cm-name {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 1px solid var(--line);
  padding-bottom: 5px; margin-bottom: 6px;
}

.cm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.cm-dow {
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint);
  text-align: center; padding-bottom: 2px;
}

.cm-day, .cm-pad {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
  border-radius: var(--r); border: 1px solid transparent; padding: 0;
}

/* dia sem exame: fundo quieto, número apagado, nada clicável */
.cm-day { background: var(--surface-2); color: var(--ink-faint); }

.cm-day.has {
  font-weight: 600; cursor: pointer; border: 0;

  &:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
}

.cm-day.h1 { background: var(--heat-1); color: var(--heat-1-ink); }
.cm-day.h2 { background: var(--heat-2); color: var(--heat-2-ink); }
.cm-day.h3 { background: var(--heat-3); color: var(--heat-3-ink); }
.cm-day.h4 { background: var(--heat-4); color: var(--heat-4-ink); }

/* O dia já tem fundo próprio, que é o degrau da rampa e quer dizer quantos
   exames houve: pintá-lo de azul apagaria o dado. Aqui a marca é anel por
   fora, que se vê sobre qualquer degrau e não rouba a casa de ninguém — o
   gap da grade é de 3px e o anel cabe nele. */
.cm-day.is-sel {
  border: 0;
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.cal-legend {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-faint);

  & i { width: 14px; height: 14px; border-radius: var(--r); display: block; }
}

/* ── faixas de espera ─────────────────────────────────
   Faltantes em faixas, não uma linha por exame: uma linha por exame não
   responde "quem está esperando demais". */
.buckets { display: grid; grid-template-columns: max-content minmax(90px, 1fr) max-content; column-gap: 16px; }

.bucket {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); background: none;
  font: inherit; text-align: left; cursor: pointer;

  &:hover { background: var(--surface-2); }

  &.is-sel { background: var(--accent-soft); border-bottom: 2px solid var(--accent); }

  & .bl { font-size: 13.5px; }

  & .bv {
    font-family: var(--mono); font-size: 13.5px;
    font-variant-numeric: tabular-nums; justify-self: end;
  }

  & :where(.track) i { background: var(--chart-faltantes); }
}

/* a última faixa é encalhe: vermelho, o único significado que ele tem */
.bucket--late {
  & .bl, & .bv { color: var(--urgent); font-weight: 600; }

  & :where(.track) i { background: var(--urgent); }
}

/* ── o formulário que embrulha a tela ──────────────────
   Mês, dia e faixa são <button name=… value=…> de um GET só: o recorte vai
   para a URL sem uma linha de JavaScript e sem helper — quem monta a query é o
   navegador. O form não desenha nada, então sai do layout.

   `display: contents` tira a CAIXA do form, não o NÓ. É o que importa aqui,
   porque folha.css combina irmãos: `:where(.stats) + .section-rule` dá o
   respiro da primeira régua de seção, e `.section-rule:first-of-type` zera a
   margem só dela. Por isso o form abre ANTES dos totais e fecha DEPOIS da
   última linha — dentro dele todo mundo continua irmão de todo mundo. Form
   começando no meio da folha quebra as duas regras de uma vez. */
.rep-form { display: contents; }

/* ── detalhe do recorte ───────────────────────────────── */
.detail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 8px;

  & .dh { font-size: 14.5px; font-weight: 600; }
}

.rep-empty { font-size: 13px; color: var(--ink-faint); padding: 14px 2px; }

/* A lista do recorte é a tabela da ficha do paciente com outra margem: lá a
   margem é o papel que chegou ao balcão, aqui é a pessoa. As outras quatro
   colunas — exame, data, clínica, desfecho — são as mesmas, e por isso a
   .prontuario inteira vem de graça. */
.rep-detalhe .cel-quem { width: 200px; }

/* Réguas não se duplicam: a .detail-head já é o cabeçalho deste bloco. */
.rep-detalhe .fila th { border-bottom-color: var(--line); }