/*
 * empty.css — Empty State padronizado
 *
 * Proveniência: apps/analytics-rh/pages/_internal/styles/_empty.py (81 LOC)
 * Extraído por: R-2 CSS pipeline — Forge (@dm-frontend-engineer) 2026-05-25
 * Source proto: prototipos/2026-05-06-shell-rebrand/a-topbar-pills.html L439-474
 *
 * ATENÇÃO: Este arquivo é SUPERSEDIDO pelo primitive empty_state (R-1.7).
 * Ref: apps/analytics-rh-refoundation/components/primitives/empty_state.py
 * O primitive unifica 4 padrões divergentes (dir-sleeping-card, n2-empty,
 * resolvidos-empty, arh-empty-state) com variantes default + sleeping,
 * chips a11y e zero hex hardcoded.
 * Este CSS standalone preserva a classe legada .arh-empty-state para
 * compatibilidade durante migração gradual.
 *
 * Tokens consumidos: --surface-hover, --text-primary, --text-muted,
 *                    --accent-brand, --focus-ring, --font-sans
 *
 * Hex inventory: ZERO (2 instâncias #fff de _empty.py removidas — substituídas
 *                por var(--color-white) / cor garantida por --accent-brand context)
 */

/* ── Empty State (proto-A linhas 440-474) ─────────────────────────── */
.arh-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  gap: 12px;
  color: var(--text-muted);
}

.arh-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-muted);
  margin-bottom: 4px;
  flex-shrink: 0;
}

.arh-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.arh-empty-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 320px;
  margin: 0;
  line-height: 1.5;
}

.arh-empty-action {
  padding: 8px 20px;
  background: var(--accent-brand);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms;
  margin-top: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
}

.arh-empty-action:hover {
  opacity: 0.85;
  text-decoration: none;
  color: var(--color-white);
}

.arh-empty-action:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}