/*
 * Componentes compartilhados do Agravo (login e painel).
 * Carregado logo depois de tokens.css e antes do CSS de cada página.
 * Só usa tokens: nada de cor, raio ou tamanho solto aqui.
 * Documentação viva: design-system.html
 */

/* ======================================================================
 * Botão
 * <button class="btn btn--primary">Salvar</button>
 * Variantes: --primary | --outline | --ghost | --icon   Modificadores: --danger | --sm | --block
 * ====================================================================== */

.btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  /* Botões não animam no hover: a cor muda na hora (azul -> secundária, claro -> cinza). */
  transition: none;
}

.btn[hidden] { display: none; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn:disabled { cursor: default; opacity: .5; }

/* Primário: a ação principal da tela (uma por área). */
.btn--primary { color: var(--primary-foreground); background: var(--primary); }
.btn--primary:hover:not(:disabled) { background: var(--primary-hover); }

/* Contorno: ações secundárias (editar, adicionar, limpar filtros). */
.btn--outline { border-color: var(--border); color: var(--foreground); background: var(--card); font-weight: 500; }
.btn--outline:hover:not(:disabled) { background: var(--hover-gray); }

/* Primário e contorno ficam quase opacos quando desabilitados porque o estado
   "Salvando..." (spinner) usa disabled e precisa continuar legível. */
.btn--primary:disabled,
.btn--outline:disabled { opacity: .85; }

/* Fantasma: ações terciárias ao lado de um primário (Cancelar). */
.btn--ghost { padding: 0 var(--space-1); color: var(--muted-foreground); }
.btn--ghost:hover:not(:disabled) { color: var(--foreground); }

/* Ícone: botão quadrado só com ícone (editar/excluir em linhas de tabela). Sempre com aria-label. */
.btn--icon { width: 36px; padding: 0; color: var(--muted-foreground); }
.btn--icon:hover:not(:disabled) { background: var(--hover-gray); }

/* Destrutivo: combina com qualquer variante. */
.btn--danger { color: var(--error); }
.btn--danger:hover:not(:disabled) { color: var(--error); background: var(--danger-bg); }

/* Tamanhos e largura. */
.btn--sm { height: 32px; padding: 0 var(--space-3); }
.btn--sm.btn--icon { width: 32px; padding: 0; }
.btn--block { width: 100%; }