/* Layout específico do redesign do admin — consome os tokens de
 * shared/themes.css e os componentes de admin/components/*.css. Carregado
 * SÓ nas páginas do admin (ver comentário em themes.css) — nada aqui
 * afeta as outras 4 telas do app.
 *
 * Fase 0: só a assinatura visual do design system inteiro (glow "pulso de
 * brasa"), porque ela não pertence a nenhum componente específico —
 * aplica-se a QUALQUER elemento que precise dela (countdown de sala
 * agendada, indicador de sala ao vivo), então vive aqui, no nível de
 * layout, não em button.css/badge.css/etc. O resto do layout do admin
 * (grid, menu lateral, dashboard...) é construído nas Fases 1-4 — este
 * arquivo cresce fase a fase, nunca tudo de uma vez.
 */

/* Assinatura visual do design system: SÓ em countdown de sala agendada e
 * indicador de sala ao vivo — nada mais no admin tem animação de
 * destaque (decisão explícita do SPEC). `prefers-reduced-motion` respeitado
 * desde já, mesmo a validação formal desse comportamento ficando pra
 * Fase 5 (que cobre o design system inteiro, não só esta animação). */
@keyframes ds-ember-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 177, 61, 0);
    opacity: 0.15;
  }
  50% {
    box-shadow: var(--shadow-ember-glow);
    opacity: 0.4;
  }
}

.ds-ember-glow {
  animation: ds-ember-pulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ds-ember-glow {
    animation: none;
    box-shadow: var(--shadow-ember-glow);
    opacity: 0.4;
  }
}

/* --- Skeleton loading (Fase 2) -----------------------------------------
 * Placeholder de carregamento — pulso suave de opacidade, NÃO o glow
 * "pulso de brasa" (esse é assinatura visual exclusiva do countdown/
 * indicador ao vivo, ver acima). `.ds-skeleton` é um bloco genérico;
 * `.ds-skeleton-line`/`.ds-skeleton-title` são atalhos de tamanho comuns
 * (linha de texto, título) pra não repetir width/height em todo lugar que
 * usar. Fase 5 padroniza o uso disso no resto do design system — aqui é
 * só a introdução do componente + o primeiro uso real (lista de salas). */
@keyframes ds-skeleton-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
}

.ds-skeleton {
  display: block;
  background: var(--bg-surface-raised);
  border-radius: var(--radius-control);
  animation: ds-skeleton-pulse 1.4s ease-in-out infinite;
}

.ds-skeleton-line {
  height: 0.9rem;
  width: 60%;
}

.ds-skeleton-title {
  height: 1.1rem;
  width: 40%;
  margin-bottom: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .ds-skeleton {
    animation: none;
    opacity: 0.7;
  }
}

/* --- Dashboard: banner de erro + estado vazio (Fase 2) ------------------ */

#dashboard-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-surface));
  border-color: var(--danger);
}

#dashboard-load-error-text {
  color: var(--danger);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

/* O estado vazio do painel virou o componente oficial do DS 1.0 (`.ds-empty`,
   em public/css/admin/components/empty-state.css). O protótipo `.ds-empty-state`
   que morava aqui foi removido na UX-05A — o helper `dashEmptyState()` do
   admin.js agora gera `.ds-empty`. Nada mais no produto referencia a classe
   antiga. */