/* ==========================================================================
   Revisões — camada responsiva. Os estilos da tela vivem em styles.css (legado); este arquivo só corrige larguras
   menores (convenção do projeto: <= 900px celular/tablet retrato; acima, o desenho aprovado). Carregado depois de
   styles.css e antes de mobile-shell.css.
   ========================================================================== */

/* O hub é um grid sem definição de coluna: a trilha crescia até o conteúdo mais largo (as duas tabelas de ~1015px) e
   a página inteira passava de 1480px em 390/768px (e de 1189px em 1024px), levando as ações do cabeçalho para fora da
   tela. Com a trilha limitada, as tabelas rolam dentro do próprio .review-table-wrap. Vale em qualquer largura. */
.reviews-hub-page {
  grid-template-columns: minmax(0, 1fr);
}

.review-table-wrap {
  max-width: 100%;
}

/* Mesma causa um nível abaixo: em <= 1180px o legado usa `1fr` (= minmax(auto, 1fr)) nestas grades, e a coluna
   crescia até a tabela da caixa de entrada (~1055px em 768–1024px). */
.review-feature-grid > *,
.review-workspace-grid > * {
  min-width: 0;
}

@media (max-width: 1180px) {
  .review-feature-grid,
  .review-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  /* Cabeçalho: ordenação e Revisão livre lado a lado (o botão Filtros foi para a caixa de entrada). */
  .reviews-hub-head .page-context-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: "sort free";
    gap: 8px;
  }

  .reviews-hub-head .review-head-button { grid-area: filters; }
  .reviews-hub-head .review-free-button { grid-area: free; }
  .reviews-hub-head .review-sort-control { grid-area: sort; }

  .reviews-hub-head .review-head-button,
  .reviews-hub-head .review-free-button,
  .reviews-hub-head .review-sort-control {
    width: 100%;
    min-height: 44px;
    height: 44px;
  }

  /* Alturas mínimas do desktop (210px e 248px) deixavam blocos vazios nos cartões de resumo e de hoje. */
  .review-summary-card,
  .review-today-hub-card { min-height: 0; height: auto; }

  /* Alvos de toque: opções de tempo, filtros rápidos e ações das linhas passam de 40px. */
  /* Filtros rápidos + botão Filtros: quebram em duas linhas em vez de rolar (o botão Filtros ficava escondido fora da tela). */
  .review-quick-filters { flex-wrap: wrap; gap: 6px; }
  .review-quick-filters button { min-height: 38px; flex: 0 0 auto; padding-inline: 12px; font-size: 13px; }
  .review-quick-filters .review-filter-trigger { margin-left: 4px; }
  .review-recovery-card button { min-height: 40px; }
  .review-row-actions button,
  .review-history-actions button { min-height: 40px; }
  .review-icon-button { min-width: 40px; }
}

/* --- Tabelas viradas em cartões (<= 900px). A marcação não muda; os rótulos das células vêm do CSS. --- */
@media (max-width: 900px) {
  .review-table-wrap { overflow: visible; }

  .review-inbox-table thead,
  .review-history-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .review-inbox-table,
  .review-inbox-table tbody,
  .review-history-table,
  .review-history-table tbody { display: block; width: 100%; min-width: 0; }

  .review-inbox-table tr,
  .review-history-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 6px 10px;
    padding: 11px 12px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--surface-soft);
  }

  .review-inbox-table tbody,
  .review-history-table tbody { display: grid; gap: 8px; }

  .review-inbox-table td,
  .review-history-table td {
    display: block;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .review-inbox-table td > strong,
  .review-history-table td > strong { max-width: none; }

  /* --- Caixa de entrada: prioridade, tipo e ações no topo; disciplina e tópico em largura total; prazo, atraso e
     tempo; IUR e desempenho. --- */
  .review-inbox-table tr {
    grid-template-areas:
      "prio type act"
      "disc disc disc"
      "topic topic topic"
      "due late time"
      "iur iur perf";
  }

  .review-inbox-table td:nth-child(1) { grid-area: prio; }
  .review-inbox-table td:nth-child(2) { grid-area: disc; }
  .review-inbox-table td:nth-child(3) { grid-area: topic; }
  .review-inbox-table td:nth-child(4) { grid-area: type; }
  .review-inbox-table td:nth-child(5) { grid-area: due; }
  .review-inbox-table td:nth-child(6) { grid-area: late; }
  .review-inbox-table td:nth-child(7) { grid-area: iur; }
  .review-inbox-table td:nth-child(8) { grid-area: perf; }
  .review-inbox-table td:nth-child(9) { grid-area: time; }
  /* O legado centraliza da 7ª célula em diante (colunas numéricas da tabela); no cartão tudo alinha à esquerda. */
  .review-inbox-table td:nth-child(n+7),
  .review-inbox-table td:nth-child(7) .review-score-line { text-align: left; margin-left: 0; margin-right: 0; }
  .review-inbox-table td:nth-child(10) { grid-area: act; }

  .review-inbox-table td:nth-child(2) > strong,
  .review-inbox-table td:nth-child(3) > strong { display: block; overflow: visible; white-space: normal; font-size: 13.5px; line-height: 1.25; }
  .review-inbox-table td:nth-child(3) > strong { font-weight: 500; }
  .review-inbox-table td:nth-child(3) > span { display: block; margin-top: 1px; font-size: 11px; }

  .review-inbox-table td:nth-child(5)::before,
  .review-inbox-table td:nth-child(6)::before,
  .review-inbox-table td:nth-child(7)::before,
  .review-inbox-table td:nth-child(8)::before,
  .review-inbox-table td:nth-child(9)::before,
  .review-history-table td:nth-child(5)::before,
  .review-history-table td:nth-child(6)::before,
  .review-history-table td:nth-child(7)::before,
  .review-history-table td:nth-child(8)::before,
  .review-history-table td:nth-child(9)::before,
  .review-history-table td:nth-child(10)::before {
    display: block;
    margin-bottom: 1px;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .review-inbox-table td:nth-child(5)::before { content: "Prazo"; }
  .review-inbox-table td:nth-child(6)::before { content: "Atraso"; }
  .review-inbox-table td:nth-child(7)::before { content: "IUR"; }
  .review-inbox-table td:nth-child(8)::before { content: "Desempenho"; }
  .review-inbox-table td:nth-child(9)::before { content: "Tempo est."; }

  .review-inbox-table td:nth-child(7) .review-score-line { margin: 4px 0 0; }
  .review-inbox-table td:nth-child(8) > strong { display: inline; margin-right: 6px; }
  .review-inbox-table td:nth-child(8) > span { display: inline; margin: 0; }
  .review-inbox-table td:last-child .review-row-actions { justify-content: flex-end; gap: 6px; }

  /* --- Histórico recente: data/hora, tipo e ações; disciplina; tópico; seis números em duas linhas de três. --- */
  .review-history-table tr {
    grid-template-areas:
      "dt type act"
      "disc disc disc"
      "topic topic topic"
      "dur qs hit"
      "err pct origin";
  }

  .review-history-table td:nth-child(1) { grid-area: dt; }
  .review-history-table td:nth-child(2) { grid-area: type; }
  .review-history-table td:nth-child(3) { grid-area: disc; }
  .review-history-table td:nth-child(4) { grid-area: topic; }
  .review-history-table td:nth-child(5) { grid-area: dur; }
  .review-history-table td:nth-child(6) { grid-area: qs; }
  .review-history-table td:nth-child(7) { grid-area: hit; }
  .review-history-table td:nth-child(8) { grid-area: err; }
  .review-history-table td:nth-child(9) { grid-area: pct; }
  .review-history-table td:nth-child(10) { grid-area: origin; }
  .review-history-table td:nth-child(11) { grid-area: act; }

  .review-history-table td:nth-child(4) { max-width: none; }
  .review-history-table td:nth-child(3) > strong,
  .review-history-table td:nth-child(4) > strong { display: block; overflow: visible; white-space: normal; line-height: 1.25; }

  .review-history-table td:nth-child(5)::before { content: "Duração"; }
  .review-history-table td:nth-child(6)::before { content: "Questões"; }
  .review-history-table td:nth-child(7)::before { content: "Acertos"; }
  .review-history-table td:nth-child(8)::before { content: "Erros"; }
  .review-history-table td:nth-child(9)::before { content: "% acerto"; }
  .review-history-table td:nth-child(10)::before { content: "Origem"; }

  .review-history-table td:nth-child(n+5):nth-child(-n+9) { text-align: left; }
  .review-history-table td:last-child .review-history-actions { justify-content: flex-end; }
}

/* Ações do cartão "Próxima melhor revisão": duas colunas fixas de ~105px (coluna de 240px em 1440px) não comportam
   "Revisar agora" + ícone, e os botões se sobrepunham. Empilha quando não cabem lado a lado. */
.review-next-actions {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.review-next-actions button {
  white-space: nowrap;
}

/* Entre 1321px e 1500px a grade do cartão pedia 98 + 490 + 240px (+ espaços) dentro de ~810px úteis: a coluna "Por que
   começar por aqui?" e os botões passavam da borda do cartão. Mesmo arranjo de <= 1320px: motivos abaixo do resumo. */
@media (min-width: 1321px) and (max-width: 1500px) {
  .review-next-content { grid-template-columns: 92px minmax(0, 1fr); }
  .review-next-reasons { grid-column: 1 / -1; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(139, 92, 246, 0.14); transform: none; }
}

/* Filtros avançados junto dos filtros rápidos da caixa de entrada: contagem de ativos e "Limpar filtros". */
.review-quick-filters .review-filter-trigger { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.review-quick-filters .review-filter-trigger .review-icon { width: 14px; height: 14px; }
.review-quick-filters .review-filter-trigger b { display: grid; min-width: 17px; min-height: 17px; place-items: center; border-radius: 999px; background: var(--primary); color: #fff; font-size: 10px; }
.review-quick-filters .review-filter-trigger.has-filters { border-color: rgba(217, 70, 239, .52); background: rgba(139, 92, 246, .16); color: var(--ink); }
.review-quick-filters .review-filter-clear { border-color: transparent; background: transparent; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .review-quick-filters .review-filter-trigger { margin-left: 0; }
}

/* Fatia 4c: a vista de revisões vem do servidor; na primeira abertura, enquanto ela chega. */
.review-hub-loading { display: flex; align-items: center; justify-content: center; min-height: 260px; padding: 24px; color: var(--muted, #94a3b8); font-size: 13px; text-align: center; }
.review-hub-loading p { margin: 0; }