/* ============================================================================
 * ec-badge-status — Badge de estado universal
 * ----------------------------------------------------------------------------
 * Story 4.2 / EPIC-004
 *
 * Pílula neutra com um dot indicador, usada para representar QUALQUER
 * estado de objeto (pedido, pagamento, mensagem, conexão, etc.).
 *
 * Substitui as variantes coloridas do Bootstrap (.badge bg-warning,
 * bg-success, bg-danger, etc.) pela gramática EY: fundo branco, borda
 * 0.5px gray-100, dot 6px com cor semântica, texto DM Sans 500 11px.
 *
 * Variantes (modificadores):
 *   .ec-badge-status              — base (pendente, neutro)
 *   .ec-badge-status.is-paid      — sucesso (preto)
 *   .ec-badge-status.is-progress  — em andamento (amarelo)
 *   .ec-badge-status.is-error     — erro (bordô)
 *   .ec-badge-status.is-warning   — aviso (cinza escuro)
 *
 * Acessibilidade:
 * - Texto SEMPRE acompanha o dot (feedback nunca depende só de cor).
 * - Estados dinâmicos devem usar role="status" e aria-live="polite"
 *   (responsabilidade do template chamador, não do CSS).
 *
 * Referência: ux-design-specification.md §"Estratégia de Componentes"
 * ========================================================================= */

.ec-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--ec-radius-pill);
  border: 0.5px solid var(--ec-gray-100);
  background: var(--ec-white);
  color: var(--ec-gray-600);
  font-family: var(--ec-font-sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
  /* Reset Bootstrap quando coexiste com .badge */
  text-transform: none;
  letter-spacing: 0;
}

.ec-badge-status__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ec-gray-400);
  flex-shrink: 0;
}

/* ─── Modificadores ─────────────────────────────────────────────────── */

.ec-badge-status.is-paid {
  color: var(--ec-black);
  border-color: var(--ec-gray-100);
}

.ec-badge-status.is-paid .ec-badge-status__dot {
  background: var(--ec-black);
}

.ec-badge-status.is-progress {
  color: var(--ec-black);
}

.ec-badge-status.is-progress .ec-badge-status__dot {
  background: var(--ec-yellow);
  /* Borda escura no dot amarelo para garantir visibilidade contra fundo branco */
  box-shadow: 0 0 0 0.5px var(--ec-gray-100) inset;
}

.ec-badge-status.is-error {
  color: var(--ec-state-error);
}

.ec-badge-status.is-error .ec-badge-status__dot {
  background: var(--ec-state-error);
}

.ec-badge-status.is-warning {
  color: var(--ec-gray-800);
}

.ec-badge-status.is-warning .ec-badge-status__dot {
  background: var(--ec-gray-800);
}

/* Variante "fechada" — sem borda, mais compacta — uso opcional em listas densas */
.ec-badge-status--bare {
  border: none;
  padding: 2px 6px;
  background: transparent;
}

/* Ícone (opcional — quando o template usa ícone Bootstrap em vez de dot) */
.ec-badge-status .bi {
  font-size: 11px;
  line-height: 1;
}