/* pager.css -- paginador e cabecalho de coluna ordenavel (f9.34).
   Traducao para o CSS real do app (tokens --ctm-*, ja usados no projeto) do par de componentes
   desenhado no kit (docs/mockups/html/componentes.css: .paginador / .cab-lista / .col-ordenar / .grade-*).
   O app usa <table> nativo (regra 7 do acervo de achados de UX permite table OU role=grid completo);
   a mudanca real do kit para o CSS do app fica so na ORIGEM da cor (var(--ctm-*) em vez de var(--sup-*)/
   var(--txt-*)) e no elemento raiz do cabecalho (th nativo em vez de div/button soltos).

   Ajuste pos-deploy (capturas docs/fatias/f9.34/capturas/app-*.png): este mesmo componente aparece
   tanto no app claro (_Layout, tokens --ctm-*) quanto no backoffice escuro (_AdminLayout, tokens
   --admin-* proprios, definidos no <style> daquele layout). Sem indirecao, o paginador saia numa
   faixa BRANCA (--ctm-surface, sempre claro) dentro do .admin-card escuro. Os --pager-* abaixo sao
   só um ALIAS por var() (nunca cor literal nova): usam --admin-* quando existem (backoffice) e caem
   para --ctm-* quando nao existem (app do professor/aluno) -- nenhum componente precisa saber em
   qual layout esta. */
:root {
  --pager-text-muted: var(--admin-muted, var(--ctm-text-muted));
  --pager-text: var(--admin-text, var(--ctm-text));
  --pager-border: var(--admin-border, var(--ctm-border));
  --pager-accent: var(--admin-accent, var(--ctm-primary));
  --pager-accent-strong: var(--admin-accent, var(--ctm-primary-strong));
  /* Par "pagina atual"/"coluna ordenada ativa": no backoffice reaproveita o mesmo par neutro de
     .badge-free (--admin-border/--admin-text, ja usado no _AdminLayout) -- nunca o --admin-accent
     (ambar): ambar e so para plano pago (regra 11/kit), nao para "voce esta aqui" no paginador. */
  --pager-active-bg: var(--admin-border, var(--ctm-primary-soft));
  --pager-active-text: var(--admin-text, var(--ctm-primary-strong));
  --pager-hover-bg: var(--admin-border, var(--ctm-surface-2));
  --pager-surface: var(--admin-card-bg, var(--ctm-surface));
}

/* O CABECALHO DE COLUNA: uma unica regra por tabela (achado do dono, revisao pos-deploy) garante que
   toda <th> -- ordenavel ou fixa -- sai igual (mesmo texto, peso, caixa, cor, vertical-align). Antes,
   so as ordenaveis tinham .ctm-th-ordenar com esse estilo; as fixas ficavam no padrao grande/negrito/
   alinhado embaixo do Bootstrap. .ctm-tabela-ordenavel entra na <table>; nao precisa de classe em
   cada <th> fixo. */
.ctm-tabela-ordenavel th {
  vertical-align: middle;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--pager-text-muted);
  white-space: nowrap;
}

.ctm-th-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.ctm-th-ordenar:hover,
.ctm-th-ordenar:focus-visible {
  color: var(--pager-text);
}

.ctm-th-ordenar.atual {
  color: var(--pager-accent-strong);
}

/* Contraste >= 3:1 pelo TOKEN (nunca por opacidade -- achado de UX f9.34: opacity:.55 no kit media
   abaixo do piso em alguns pares de cor). */
.ctm-th-ordenar-icone {
  font-size: .7rem;
  color: var(--pager-text-muted);
}

.ctm-th-ordenar.atual .ctm-th-ordenar-icone {
  color: var(--pager-accent);
}

.ctm-th-ordenar-icone--desc {
  transform: rotate(180deg);
}

/* O paginador: resumo + nav (anterior/numeros/proxima) + "por pagina" (e, no celular, "ordenar por").
   Fundo transparente de proposito (achado do dono): o paginador vive dentro de .card (app claro) ou
   .admin-card (backoffice escuro) e deve herdar a cor do cartao que o envolve, nao impor a sua. */
.ctm-paginador {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--pager-border);
  background: transparent;
}

.ctm-paginador-resumo {
  display: none;
  margin: 0;
  font-size: .85rem;
  color: var(--pager-text-muted);
}

.ctm-paginador-resumo b {
  color: var(--pager-text);
}

.ctm-paginador-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ctm-paginador-seta,
.ctm-paginador-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--ctm-radius-sm);
  border: 0;
  background: none;
  color: var(--pager-text-muted);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ctm-paginador-seta[aria-disabled="true"] {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.ctm-paginador-num:hover {
  background: var(--pager-hover-bg);
}

.ctm-paginador-num.atual {
  background: var(--pager-active-bg);
  color: var(--pager-active-text);
}

.ctm-paginador-reticencias {
  color: var(--pager-text-muted);
  padding-inline: 2px;
  user-select: none;
}

.ctm-paginador-pagina-atual {
  display: inline;
  font-size: .85rem;
  font-weight: 700;
  color: var(--pager-text);
}

.ctm-paginador-controles {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ctm-paginador-tamanho {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pager-text-muted);
  white-space: nowrap;
}

.ctm-paginador-tamanho select,
.ctm-ordenar-mobile select {
  min-height: 44px;
  padding-inline: 10px;
  border: 1px solid var(--pager-border);
  border-radius: var(--ctm-radius-sm);
  background: var(--pager-surface);
  color: var(--pager-text);
  font-family: var(--ctm-font);
}

.ctm-ordenar-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pager-text-muted);
}

/* Celular primeiro (regra 22): os valores acima sao os do celular (kit: nao ha 360px para numeros,
   reticencias E o seletor de tamanho ao mesmo tempo): "Pagina X de Y" no lugar dos numeros/resumo/
   tamanho; "Ordenar por" substitui o cabecalho de coluna ordenavel (que so cabe no desktop).
   O desktop entra a partir de 576.02px: o limite antigo era max-width 576px (inclui 576), entao 576px
   continua com o visual de celular. */
@media (min-width: 576.02px) {
  .ctm-paginador {
    justify-content: space-between;
  }

  .ctm-paginador-resumo {
    display: block;
  }

  .ctm-paginador-tamanho {
    display: flex;
  }

  .ctm-paginador-pagina-atual {
    display: none;
  }

  .ctm-ordenar-mobile {
    display: none;
  }
}

/* f10.13 (regra 22): o rótulo "Ordenar por" também é alvo de toque (label for) -- 44 px de altura no celular. */
.ctm-ordenar-mobile label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}