/* ================================================================
   NOTAS — quadro consolidado de notas por turma
   Visual de planilha: bordas finas, cabeçalhos agrupados por componente
   (com linha vertical mais grossa separando os agrupamentos), colunas
   N e Nome fixas — a rolagem horizontal começa na coluna SIT — e Res
   colorido.
   ================================================================ */

/* A faixa de filtros da página Notas aparece só quando há filtros ativos,
   como nas demais páginas. A escola não conta como filtro (é a base em uso). */

/* Seletor de turma no cabeçalho do card (lista com largura livre:
   nomes "curso - turma" longos não cortam) */
.notas-turma-select { display: inline-flex; align-items: center; gap: 8px; }
.notas-turma { font-size: 0.82rem; font-weight: 700; color: var(--text-muted, #64748b); }

.notas-dd { position: relative; }
.notas-dd-btn {
  display: inline-flex; align-items: center; gap: 10px; min-width: 230px; max-width: 420px;
  padding: 7px 11px; border: 1px solid var(--border, #d3dae3); border-radius: 8px;
  background: var(--surface, #fff); font-size: 0.85rem; font-weight: 600; color: inherit;
  cursor: pointer; text-align: left;
}
.notas-dd-btn:hover:not(:disabled) { border-color: #b6c2d2; }
.notas-dd-btn:disabled { opacity: 0.6; cursor: default; }
.notas-dd-rotulo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notas-dd-seta { width: 12px; height: 12px; flex: none; color: var(--text-muted, #64748b); }
.notas-dd-lista {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  min-width: 100%; width: max-content; max-width: 92vw; max-height: 340px; overflow: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface, #fff); border: 1px solid var(--border, #d3dae3);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}
.notas-dd-lista::-webkit-scrollbar { width: 12px; height: 12px; }
.notas-dd-lista::-webkit-scrollbar-track { background: #eef2f7; border-radius: 8px; }
.notas-dd-lista::-webkit-scrollbar-thumb { background: #94a3b8; border: 2px solid #eef2f7; border-radius: 999px; }
.notas-dd-opcao {
  display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 6px;
  background: none; text-align: left; font-size: 0.85rem; color: inherit;
  white-space: nowrap; cursor: pointer;
}
.notas-dd-opcao:hover { background: #eef3f9; }
.notas-dd-opcao[aria-selected="true"] { background: #e3ecfa; font-weight: 700; }

/* Página em coluna flexível: a tabela ocupa exatamente a altura
   disponível (o pé dela — e a barra de rolagem horizontal — fica
   sempre visível, sem sobrar espaço morto nem rolar a página).
   No modo tela cheia o app já fornece a mesma cadeia flex. */
.notas-page.active {
  display: flex; flex-direction: column;
  height: calc(100vh - 152px); /* topo (72 + 12 de folga) + rodapé (56) + respiro (12) */
  min-height: 440px;
}
.notas-page .page-with-nav,
.notas-page .page-nav-body,
.notas-page .page-section,
.notas-page .card.table-card,
.notas-page .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* A barra de filtros divide a faixa com Menu/Filtros e encolhe com o espaço;
   o cabeçalho do card não estica. */
.notas-page .active-filters-bar { flex: 1 1 auto; min-width: 0; }
.notas-page .card-header { flex: none; }
.notas-tabela-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.notas-barra-h { flex: none; }
.notas-tabela-host {
  flex: 1; min-height: 0;
  overflow: auto;
  border: 1px solid var(--border, #d3dae3);
  border-radius: 8px; background: var(--surface, #fff);
  scrollbar-gutter: stable;
}

/* A barra de rolagem horizontal nativa fica oculta: a barra própria,
   embaixo da tabela e sempre visível, faz esse papel. A vertical
   continua nativa e estilizada. ATENÇÃO: não usar scrollbar-color aqui —
   ele desativa o ::-webkit-scrollbar no Chromium e a barra nativa
   horizontal volta a aparecer (ficariam duas barras). */
.notas-tabela-host::-webkit-scrollbar { width: 14px; height: 0; }
.notas-tabela-host::-webkit-scrollbar-track { background: #eef2f7; }
.notas-tabela-host::-webkit-scrollbar-thumb { background: #94a3b8; border: 2px solid #eef2f7; border-radius: 999px; }
.notas-tabela-host::-webkit-scrollbar-thumb:hover { background: #64748b; }
.notas-tabela-host::-webkit-scrollbar-corner { background: #eef2f7; }

/* Barra de rolagem horizontal própria: começa na coluna SIT
   (N = 44px e Nome = 210px ficam fixas) e acompanha o scroll */
.notas-barra-h {
  position: relative; height: 14px; margin-left: 254px; flex: none;
  background: #eef2f7; border: 1px solid var(--border, #d3dae3); border-radius: 999px;
  cursor: pointer;
}
.notas-barra-h-pegador {
  position: absolute; top: 1px; left: 0; height: 10px; min-width: 40px;
  background: #94a3b8; border-radius: 999px; cursor: grab; touch-action: none;
}
.notas-barra-h-pegador:hover { background: #7c8ba1; }
.notas-barra-h-pegador:active { cursor: grabbing; background: #64748b; }

.notas-tabela { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.82rem; table-layout: fixed; }
.notas-tabela th, .notas-tabela td {
  box-sizing: border-box;
  border-right: 1px solid var(--border-strong, #d4d8dd);
  border-bottom: 1px solid var(--border-strong, #d4d8dd);
  padding: 5px 9px; text-align: center; white-space: nowrap; background: var(--surface, #fff);
  vertical-align: middle;
}
.notas-tabela th { background: var(--surface-2, #eceff3); font-weight: 700; }
.notas-tabela tr:last-child td { border-bottom: none; }
.notas-tabela th:last-child, .notas-tabela td:last-child { border-right: none; }

/* Separação dos agrupamentos por componente: linha vertical mais grossa */
.notas-tabela .notas-grupo-inicio { border-left: 3px solid #8b98a8; }

/* Colunas fixas: apenas N e Nome — a rolagem começa na coluna SIT */
.notas-tabela .notas-num { position: sticky; left: 0; width: 44px; min-width: 44px; z-index: 2; }
.notas-tabela .notas-nome {
  position: sticky; left: 44px; width: 210px; min-width: 210px; max-width: 210px;
  text-align: left; white-space: normal; overflow-wrap: anywhere; z-index: 2;
}
/* Setinha de detalhes: clicar no nome abre a ficha do estudante
   (o estilo da pílula "›" vive em css/global.css — classe aluno-seta) */
.notas-tabela tbody .notas-nome { cursor: pointer; }
.notas-tabela tbody .notas-nome:hover { background: #e8eefc; color: #1c4bb0; }
.notas-tabela .notas-sit { width: 62px; min-width: 62px; font-size: 0.72rem; font-weight: 700; }

/* Cabeçalho fixo no topo (a 2ª linha col sob a 1ª, de altura fixa) */
.notas-tabela thead th { position: sticky; top: 0; z-index: 3; height: 44px; }
.notas-tabela thead tr:nth-child(2) th { top: 44px; height: 24px; }
.notas-tabela thead .notas-num, .notas-tabela thead .notas-nome { z-index: 4; }
/* O título do componente quebra linha na própria célula: com as larguras
   padronizadas (colgroup), nomes longos não alargam as colunas do grupo. */
.notas-tabela thead .notas-disc {
  min-width: 0; white-space: normal; overflow-wrap: anywhere;
  font-size: 0.72rem; line-height: 1.15; overflow: hidden;
}
.notas-tabela .notas-bim { width: 48px; min-width: 48px; font-size: 0.75rem; }
.notas-tabela .notas-res { width: 64px; min-width: 64px; font-size: 0.75rem; }

/* Células de nota */
.notas-celula { min-width: 48px; font-variant-numeric: tabular-nums; }
.notas-vazio { color: transparent; }
.notas-bruto { color: var(--warning, #b45309); font-weight: 700; }

/* Cores de risco (mesmas faixas e tons da página Risco):
   crítico = até 3,0 inclusive; abaixo = acima de 3,0 até a média mínima */
.notas-tabela td.notas-risco-critico { background: #f5c2cb; color: #83152b; font-weight: 700; }
.notas-tabela td.notas-risco-abaixo { background: #f1d595; color: #6b4a00; font-weight: 700; }

/* Coluna Res: falta (pêssego), AP (verde), T (amarelo), Total (azul) e vazio */
.notas-res-falta { background: #fde3cd; font-weight: 700; }
.notas-res-ap { background: #e7f5e9; font-weight: 700; }
.notas-res-t { background: #fff3a0; font-weight: 700; }
.notas-res-total { background: #e8eef7; font-weight: 700; }

/* Coluna Exame: menor nota de prova para alcançar 5,0 na média final */
.notas-exame { background: #ede9fe; font-weight: 700; }
.notas-exame-impossivel { color: #7c3aed; }

/* Linha de matrícula transferida */
.notas-tabela tr.notas-transferido td { background: #fff8c9; }
.notas-tabela tr.notas-transferido .notas-res-t { background: #ffec8a; }
.notas-tabela tr.notas-transferido .notas-sit { color: #8a6d00; }

/* Blocos exclusivos da impressão (cabeçalho institucional e rodapé
   com observações e assinaturas): invisíveis na tela */
.notas-print-cabecalho, .notas-print-rodape { display: none; }

/* ================================================================
   Impressão: A4 paisagem (o @page é injetado só na hora de imprimir).
   Sai SÓ o quadro da turma (título + tabela): chrome do app, filtros,
   modais e demais telas ficam de fora — inclusive os modais, que a
   regra global de impressão do app força a aparecer.
   A LARGURA é encaixada por zoom em js/notas.js; a ALTURA fica natural
   (a compensação --notas-print-comp devolve a altura das linhas) e a
   tabela quebra em quantas folhas precisar.
   ================================================================ */
@media print {
  body.notas-imprimindo .topbar,
  body.notas-imprimindo .app-footer,
  body.notas-imprimindo .active-filters-bar,
  body.notas-imprimindo .notas-turma-select,
  body.notas-imprimindo #notasImprimirBtn,
  body.notas-imprimindo .section-expand-btn,
  body.notas-imprimindo .notas-barra-h,
  body.notas-imprimindo .toast-container,
  body.notas-imprimindo .modal-backdrop,
  body.notas-imprimindo .modal,
  body.notas-imprimindo .filter-drawer,
  body.notas-imprimindo .filter-drawer-backdrop,
  body.notas-imprimindo #sectionFullscreenClose,
  /* o cabeçalho de tela é substituído pelo cabeçalho de impressão */
  body.notas-imprimindo .notas-page .card-header { display: none !important; }

  /* Cabeçalho do documento: marca institucional, título e contexto */
  body.notas-imprimindo .notas-print-cabecalho { display: block; margin-bottom: 12px; }
  body.notas-imprimindo .notas-print-marca {
    display: flex; align-items: center; gap: 12px;
    border-bottom: 2px solid #24406b; padding-bottom: 8px; margin-bottom: 10px;
  }
  body.notas-imprimindo .notas-print-logo { height: 44px; }
  body.notas-imprimindo .notas-print-org strong { display: block; font-size: 12pt; color: #14304f; }
  body.notas-imprimindo .notas-print-org span { font-size: 9pt; color: #444; }
  body.notas-imprimindo .notas-print-titulo { margin: 0 0 4px; font-size: 14pt; color: #14304f; }
  body.notas-imprimindo .notas-print-meta { margin: 0 0 12px; font-size: 8.5pt; color: #333; }

  /* Rodapé do documento: observações pautadas, local/data e assinaturas */
  body.notas-imprimindo .notas-print-rodape {
    display: block; margin-top: 16px;
    break-inside: avoid; page-break-inside: avoid;
  }
  body.notas-imprimindo .notas-print-observacoes h2 {
    margin: 0 0 6px; font-size: 10pt; color: #14304f;
  }
  body.notas-imprimindo .notas-print-espaco {
    min-height: 26mm; border: 1px solid #8a97a8; border-radius: 4px;
    background: repeating-linear-gradient(#fff 0, #fff 7.2mm, #d7dee8 7.2mm, #d7dee8 calc(7.2mm + 1px));
  }
  body.notas-imprimindo .notas-print-localdata { margin: 14px 0 20px; font-size: 9.5pt; color: #222; }
  body.notas-imprimindo .notas-print-assinaturas { display: flex; gap: 28px; }
  /* Linhas em branco para as assinaturas dos presentes (sem rótulos) */
  body.notas-imprimindo .notas-print-assinatura {
    flex: 1; display: block; margin-top: 34px; border-top: 1px solid #222;
  }

  /* Card sem moldura; o card longo pode quebrar em várias folhas
     (a regra global .card { break-inside: avoid } é anulada aqui) */
  body.notas-imprimindo .notas-page.active {
    display: block; height: auto; min-height: 0;
  }
  body.notas-imprimindo .notas-tabela-frame { display: block; }
  body.notas-imprimindo .card {
    break-inside: auto; page-break-inside: auto;
    border: none; box-shadow: none;
  }
  body.notas-imprimindo .card-body { padding: 0; }

  body.notas-imprimindo .notas-tabela-host {
    max-height: none; overflow: visible; border: none;
    scrollbar-width: none; scrollbar-gutter: auto;
  }
  body.notas-imprimindo .notas-tabela-host::-webkit-scrollbar { display: none; }

  /* Linhas com altura natural (o zoom encolheria junto) e largura
     encaixada pelo zoom; cabeçalho repetido em cada folha */
  body.notas-imprimindo .notas-tabela th,
  body.notas-imprimindo .notas-tabela td {
    position: static !important;
    height: auto !important;
    padding: calc(5px * var(--notas-print-comp, 1)) 9px;
    line-height: calc(1.25 * var(--notas-print-comp, 1));
  }
  body.notas-imprimindo .notas-tabela thead { display: table-header-group; }
  body.notas-imprimindo .notas-tabela tr { break-inside: avoid; }

  /* Impressão em preto e branco: fonte preta em tudo e todas as bordas
     em cada célula (as cores ficam para a tela) */
  body.notas-imprimindo .notas-print-cabecalho *,
  body.notas-imprimindo .notas-print-rodape *,
  body.notas-imprimindo .notas-tabela,
  body.notas-imprimindo .notas-tabela th,
  body.notas-imprimindo .notas-tabela td { color: #000 !important; }
  body.notas-imprimindo .notas-tabela th,
  body.notas-imprimindo .notas-tabela td {
    border: 1px solid #333 !important;
  }
  body.notas-imprimindo .notas-tabela .notas-grupo-inicio { border-left: 2px solid #000 !important; }
  body.notas-imprimindo .notas-tabela th {
    background: #eceff3 !important;
  }
  body.notas-imprimindo .notas-tabela tbody tr:nth-child(even):not(.notas-transferido) td:not(.notas-risco-critico):not(.notas-risco-abaixo):not(.notas-res-falta):not(.notas-res-ap):not(.notas-res-t):not(.notas-res-total):not(.notas-exame) {
    background: #f4f7fb;
  }
}