/* ═══════════════════════════════════════
   ELITE CS v4 — BASE
   Typography, icons, accessibility, keyframes
   ═══════════════════════════════════════ */

/* ─── Skip Link (Accessibility) ─── */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--s4);
  background: var(--teal);
  color: white;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
  transition: top var(--dur-micro) var(--ease);
}

.skip-link:focus {
  top: var(--s4);
}

/* ─── Focus Visible ─── */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--teal-soft);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none; /* handled by .mw-input:focus */
}

/* ─── Phosphor Icons ─── */
.ph, .ph-fill, .ph-bold {
  vertical-align: -0.125em;
}

/* ─── Typography Utilities ─── */
.page-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

.page-sub {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: var(--s1);
}

.sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
}

.sec-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.sec-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-left: var(--s3);
}

/* ─── Keyframes ─── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes drift {
  from { transform: translateY(-8px) scale(0.97); }
  to { transform: translateY(18px) scale(1.04); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── .sr-only — só para tecnologia assistiva ─────────────────────────
   Conteúdo que o leitor de tela deve anunciar e o olho não deve ver.

   PROMOÇÃO AO DS (10/08): este recipe já estava implementado no
   `.img-upload-file-input` e CITADO como "sr-only pattern" em comentário
   por 4 módulos de upload — sem que a classe existisse. Nomear é o que
   torna reutilizável, e o quinto uso (a região de status do Radar de
   Oportunidades) foi o que cobrou o nome.

   ⚠️ NÃO usar `display:none` nem `visibility:hidden`: os dois removem o
   elemento da árvore de acessibilidade, que é o oposto do objetivo — e
   `display:none` ainda quebra a associação `<label for>` no Safari.
   O `clip` mantém o elemento no fluxo, focável e anunciável.

   `.sr-only-focusable` revela ao receber foco — para "pular para o
   conteúdo" e afins, que precisam aparecer quando alcançados por teclado. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}

/* ─── Indicador de carregamento para conteúdo injetado ───
   Usado por loadContent() em forms.js. Antes, o container ficava com o conteúdo
   anterior (normalmente vazio) durante toda a espera e o usuário lia como "não
   tem nada aqui" (goRec I-260730-eliteadmin-03). */
.mw-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s8) var(--s4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.mw-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--glass-border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: mw-loading-spin 700ms linear infinite;
}
@keyframes mw-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mw-loading-spinner { animation-duration: 2s; }
}

/* ─── Paginação de resultado de busca ───
   Porte Nightdesk do modules/util/pagination.module, que era v3 puro
   (Bootstrap + Font Awesome) e renderizava sem estilo nem ícones. */
.mw-result-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-radius: var(--r-sm);
}
.mw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s3);
}
.mw-pagination-page {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
/* largura é ajustada por JS (updatePageNumberWidth) — o mínimo evita o campo
   colapsar antes do primeiro cálculo */
.mw-pagination .page-number {
  min-width: 56px;
  text-align: center;
}
.mw-pagination .page-count {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.mw-pagination .btn[disabled] { opacity: 0.4; cursor: not-allowed; }