/*
 * LOADING — spinner e skeleton para estados de carregamento.
 *
 * Cobre o gap do estado "loading": além da barra do Turbo Drive (navegação de
 * página inteira), os turbo_frame que buscam conteúdo (modal de formulário,
 * painel de notificações lazy) abriam em branco. Aqui ganham um spinner.
 *
 * Acessibilidade: a rotação só roda com `prefers-reduced-motion: no-preference`.
 * Sem movimento, o anel estático (topo em accent) ainda indica carregamento.
 */

/* Spinner reutilizável: anel com o topo destacado em accent. */
.spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.spinner--sm { width: 1rem; height: 1rem; }
.spinner--lg { width: 2.25rem; height: 2.25rem; border-width: 3px; }

/* Placeholder de conteúdo: bloco neutro que ocupa o espaço enquanto carrega.
   Use larguras/alturas utilitárias inline ou classes próprias por contexto. */
.skeleton {
  display: block;
  background-color: var(--color-surface-2);
  border-radius: var(--radius-sm);
  min-height: 1rem;
}

@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes spinner-rotate {
    to { transform: rotate(360deg); }
  }

  .spinner {
    animation: spinner-rotate 0.7s linear infinite;
  }

  /* Brilho que percorre o skeleton, sinalizando atividade. */
  @keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
  }

  .skeleton {
    animation: skeleton-pulse 1.2s ease-in-out infinite;
  }
}

/* Frames que carregam sob demanda: enquanto o Turbo busca o conteúdo, o frame
   ganha [busy]. Mostramos um spinner centralizado no lugar do branco. Escopado
   aos frames onde o vazio é visível (modal e painel de notificações). */
#modal[busy],
#notifications_panel[busy] {
  display: grid;
  place-items: center;
  min-height: 5rem;
}

#modal[busy]::after,
#notifications_panel[busy]::after {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-full);
}

@media screen and (prefers-reduced-motion: no-preference) {
  #modal[busy]::after,
  #notifications_panel[busy]::after {
    animation: spinner-rotate 0.7s linear infinite;
  }
}