/* ==========================================================================
   Questões — camada responsiva. Os estilos da tela vivem em styles.css (legado, com !important e seletores por id
   como #questionDisciplineTable); aqui só 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.
   ========================================================================== */
@media (max-width: 900px) {
  /* Cabeçalho: quatro controles em grade 2×2 (Filtros | período; Exportar | Registrar questões). */
  .questions-header .page-context-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .questions-header .page-context-actions > * {
    width: 100%;
    min-height: 44px;
    height: 44px;
  }

  /* KPIs em 2×2 (eram quatro blocos de ~150px empilhados). */
  .questions-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }

  /* Rosca ao lado da legenda (como no Desempenho); margin-top negativo do desktop a fazia cobrir o título. */
  .questions-donut-layout {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 12px;
    justify-items: stretch;
  }

  .questions-donut {
    width: 116px;
    margin: 0;
  }

  .questions-donut::after {
    width: 72px;
    height: 72px;
  }

  .questions-donut strong { font-size: 18px; }
  .questions-donut span { font-size: 10px; }

  /* Legenda: margem de 70px à esquerda e -30px acima (posição do desktop) empurravam os nomes por cima das
     porcentagens; aqui ocupa a coluna ao lado da rosca, o nome quebra e a % fica fixa à direita. */
  .questions-donut-list { margin: 0; gap: 9px; }
  .questions-donut-list div { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 13px; line-height: 1.25; }
  .questions-donut-list i { margin-top: 4px; }
  .questions-donut-list b { white-space: nowrap; }

  /* Gráfico de evolução: o SVG (viewBox 720×270) ficava com ~120px de altura dentro de um min-height de 260px, e os
     rótulos, em unidades do viewBox, saíam com ~4px. Sem min-height e com rótulos maiores. */
  .questions-chart-wrap { min-height: 0; }
  .questions-line-chart { min-height: 0; height: auto; aspect-ratio: 720 / 270; }
  .questions-line-chart .axis-label,
  .questions-line-chart .point-label { font-size: 18px; }
  .questions-line-chart .axis-label.right { font-size: 16px; }
  .questions-chart-wrap .questions-line-chart .axis-label.bottom { font-size: 19px; }
  .chart-labels { font-size: 11px; }

  /* Cartão de KPI em meia largura: ícone de 46px ao lado do texto deixava ~61px ao conteúdo (título de 13 letras
     estourava em 360px). Ícone acima, conteúdo em largura total, quebra permitida. */
  .questions-stat-card { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; padding: 12px; }
  .questions-stat-card .questions-stat-icon { width: 34px; height: 34px; }
  .questions-stat-card .questions-stat-body { min-width: 0; }
  .question-highlight-card .highlight-title { overflow-wrap: anywhere; font-size: 15px; line-height: 1.25; }

  /* "73% de acerto" passava do cartão de KPI em meia largura (360px). */
  .question-highlight-card .highlight-result { flex-wrap: wrap; column-gap: 6px; }

  /* Alvos de toque: ícones das tabelas, ações no rodapé dos cartões e o seletor 7/15/30 dias. */
  .question-table-icon { min-width: 40px; min-height: 40px; }
  .questions-page .card-bottom-action { min-height: 44px; }
  .questions-page .attention-row .ghost { min-height: 40px; }
  .questions-page .ds-segmented-option { min-height: 36px; }
}

/* --- Tabelas em cartões (<= 900px). A marcação não muda; os rótulos das células vêm do CSS. !important porque o legado
   usa !important e seletores por id nestas tabelas. --- */
@media (max-width: 900px) {
  .questions-page .table-wrap { overflow: visible !important; }

  .questions-page .questions-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .questions-page .questions-table,
  .questions-page .questions-table tbody {
    display: grid;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px;
  }

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

  .questions-page .questions-table td {
    display: block;
    height: auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible;
  }

  .questions-page .questions-table td::before {
    display: block;
    margin-bottom: 1px;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .questions-page .questions-table .row-actions,
  .questions-page .questions-table td:last-child { display: flex; justify-content: flex-end; gap: 6px; }

  /* Desempenho por disciplina: nome e ação; questões, acertos, erros; taxa, tempo médio, última prática. */
  .questions-page .questions-table:not(.recent) tr {
    grid-template-areas:
      "name name act"
      "qs hit err"
      "rate time last";
  }

  .questions-page .questions-table:not(.recent) td:nth-child(1) { grid-area: name; font-size: 14px; font-weight: 600; }
  .questions-page .questions-table:not(.recent) td:nth-child(2) { grid-area: qs; }
  .questions-page .questions-table:not(.recent) td:nth-child(3) { grid-area: hit; }
  .questions-page .questions-table:not(.recent) td:nth-child(4) { grid-area: err; }
  .questions-page .questions-table:not(.recent) td:nth-child(5) { grid-area: rate; }
  .questions-page .questions-table:not(.recent) td:nth-child(6) { grid-area: time; }
  .questions-page .questions-table:not(.recent) td:nth-child(7) { grid-area: last; }
  .questions-page .questions-table:not(.recent) td:nth-child(8) { grid-area: act; }

  .questions-page .questions-table:not(.recent) td:nth-child(2)::before { content: "Questões"; }
  .questions-page .questions-table:not(.recent) td:nth-child(3)::before { content: "Acertos"; }
  .questions-page .questions-table:not(.recent) td:nth-child(4)::before { content: "Erros"; }
  .questions-page .questions-table:not(.recent) td:nth-child(5)::before { content: "Taxa"; }
  .questions-page .questions-table:not(.recent) td:nth-child(6)::before { content: "Tempo médio"; }
  .questions-page .questions-table:not(.recent) td:nth-child(7)::before { content: "Última prática"; }

  /* Últimos registros: data/hora e ações; disciplina; tópico e subtópico; questões, acertos, erros; taxa, tempo,
     médio; origem. */
  .questions-page .questions-table.recent tr {
    grid-template-areas:
      "dt dt act"
      "disc disc disc"
      "topic topic topic"
      "sub sub sub"
      "qs hit err"
      "rate time avg"
      "origin origin origin";
  }

  .questions-page .questions-table.recent td:nth-child(1) { grid-area: dt; font-weight: 600; }
  .questions-page .questions-table.recent td:nth-child(2) { grid-area: disc; font-size: 14px; font-weight: 600; }
  .questions-page .questions-table.recent td:nth-child(3) { grid-area: topic; }
  .questions-page .questions-table.recent td:nth-child(4) { grid-area: sub; color: var(--muted); font-size: 12px; }
  .questions-page .questions-table.recent td:nth-child(5) { grid-area: qs; }
  .questions-page .questions-table.recent td:nth-child(6) { grid-area: hit; }
  .questions-page .questions-table.recent td:nth-child(7) { grid-area: err; }
  .questions-page .questions-table.recent td:nth-child(8) { grid-area: rate; }
  .questions-page .questions-table.recent td:nth-child(9) { grid-area: time; }
  .questions-page .questions-table.recent td:nth-child(10) { grid-area: avg; }
  .questions-page .questions-table.recent td:nth-child(11) { grid-area: origin; }
  .questions-page .questions-table.recent td:nth-child(12) { grid-area: act; }

  .questions-page .questions-table.recent td:nth-child(5)::before { content: "Questões"; }
  .questions-page .questions-table.recent td:nth-child(6)::before { content: "Acertos"; }
  .questions-page .questions-table.recent td:nth-child(7)::before { content: "Erros"; }
  .questions-page .questions-table.recent td:nth-child(8)::before { content: "Taxa"; }
  .questions-page .questions-table.recent td:nth-child(9)::before { content: "Tempo"; }
  .questions-page .questions-table.recent td:nth-child(10)::before { content: "Médio"; }
  .questions-page .questions-table.recent td:nth-child(11)::before { content: "Origem"; }
}

/* Datas do eixo x: texto dentro do SVG, centralizado no x do ponto. */
.questions-line-chart .axis-label.bottom { text-anchor: middle; font-size: 13px; }

/* Botão que alterna "Ver todas… / Mostrar menos" (expansão inline). */
.questions-page .card-bottom-action[aria-expanded="true"] { border-color: rgba(139, 92, 246, 0.45); }

/* Últimos registros (desktop): a tabela tinha min-width de 1180px e crescia com nomes longos de subtópico, gerando rolagem.
   Layout fixo com colunas proporcionais: disciplina/tópico/subtópico cortam com reticências (o nome completo fica no
   title) e a tabela cabe na largura do cartão, sem rolagem. No celular seguem os cartões. */
@media (min-width: 901px) {
  .records-card .table-wrap { overflow: visible; }
  .records-card .questions-table.recent { width: 100%; min-width: 0; table-layout: fixed; }
  .records-card .questions-table.recent th,
  .records-card .questions-table.recent td { padding-inline: 6px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .records-card .questions-table.recent th:nth-child(1) { width: 10%; }
  .records-card .questions-table.recent th:nth-child(2) { width: 12%; }
  .records-card .questions-table.recent th:nth-child(3) { width: 14%; }
  .records-card .questions-table.recent th:nth-child(4) { width: 14%; }
  .records-card .questions-table.recent th:nth-child(5) { width: 7.5%; }
  .records-card .questions-table.recent th:nth-child(6) { width: 6.5%; }
  .records-card .questions-table.recent th:nth-child(7) { width: 5.5%; }
  .records-card .questions-table.recent th:nth-child(8) { width: 5.5%; }
  .records-card .questions-table.recent th:nth-child(9) { width: 8.5%; }
  .records-card .questions-table.recent th:nth-child(10) { width: 6.5%; }
  .records-card .questions-table.recent th:nth-child(11) { width: 6%; }
  .records-card .questions-table.recent th:nth-child(12) { width: 6%; }
}