/* Sobrescritas do DataTables, para a tabela de alunos falar a mesma língua
   visual do resto do sistema.

   Mora fora do estilo.css DE PROPÓSITO: o estilo.css é carregado no <head> do
   base_admin, ANTES do bloco onde entra o css do vendor. Regra de mesma
   especificidade escrita lá perde para a do DataTables, que vem depois. Aqui,
   carregado logo em seguida ao vendor, ela ganha sem precisar de !important. */

/* O CSS do DataTables traz o proprio visual de tabela; aqui ele e puxado de
   volta para os tokens do sistema, para a tabela de alunos nao destoar das
   outras telas. So a barra de controles e a paginacao ficam com estilo
   proprio -- o corpo da tabela continua sendo o `table` do estilo.css. */
.dt-container { font-size: .9rem; }
.dt-container .dt-layout-row { align-items: center; gap: 10px; }
/* a tabela rola sozinha quando nao cabe; os controles ficam parados */
.dt-container .dt-layout-table { overflow-x: auto; }
.dt-container table.dataTable { border-collapse: collapse; }
.dt-container table.dataTable th,
.dt-container table.dataTable td { border-bottom: 1px solid var(--linha); }
.dt-container table.dataTable thead th { border-bottom: 1px solid var(--linha); }
.dt-container .dt-search input,
.dt-container .dt-length select {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 6px 9px; font: inherit; background: var(--papel); color: var(--tinta);
}
.dt-container .dt-search input { min-width: 22rem; max-width: 100%; }
/* O controle e o rotulo sao IRMAOS no DOM do DataTables (select + label), nao
   aninhados: quem alinha os dois tem de ser o container, senao o "por página"
   cai embaixo do seletor. */
.dt-container .dt-search,
.dt-container .dt-length { display: flex; align-items: center; gap: 8px; }
.dt-container .dt-search label,
.dt-container .dt-length label {
  color: var(--tinta-fraca); white-space: nowrap; font-size: .82rem; margin: 0;
}
.dt-container .dt-search input,
.dt-container .dt-length select { margin: 0; }
.dt-container .dt-info { color: var(--tinta-fraca); font-size: .82rem; }
.dt-container .dt-paging .dt-paging-button {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 5px 10px; margin-left: 4px; background: var(--papel);
  color: var(--tinta) !important;
}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled) { background: var(--fundo); }
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--azul); border-color: var(--azul); color: #fff !important;
}
.dt-container .dt-paging .dt-paging-button.disabled { opacity: .45; }