/*
 * Redesign — Etapa 5, sub-etapa 2: Badges (.status-pill).
 *
 * Achado antes de escrever isto: .status-pill (index.php:20349-20353) só
 * existe dentro de @media (max-width:900px) — no desktop essa classe hoje
 * nao tem NENHUM estilo (nao existe definicao fora do mobile). Entao esta
 * regra nao "altera" comportamento responsivo nenhum - so preenche uma
 * lacuna que nunca teve estilo no desktop, sem tocar em uma linha sequer
 * da definicao mobile (que fica 100% como esta).
 *
 * Cores em tom "tingido" (fundo na cor em baixa opacidade + texto/borda
 * na cor solida), mesmo padrao ja usado no resto do redesign (chips de
 * KPI da Etapa 4, badges do Figma como o "trend" do dashboard:
 * text-red-400 bg-red-400/10).
 *
 * Fora de escopo desta sub-etapa (fica pra depois, cada um com sua
 * pesquisa propria): as ~6 familias de badge paralelas que ja existem
 * (.os-status-badge, .suporte-status-badge, .cadastro-venda-badge,
 * .dash-completo-badge, .admin-site-banner-type-badge,
 * .tech-os-servico-badge) - cada uma tem seu proprio vocabulario de
 * status e merece ser revisada com o mapeamento certo, nao um chute.
 */

@media (min-width: 901px) {
  body[data-theme-preset="dark"] .status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
  }
  body[data-theme-preset="dark"] .status-pill.aberto {
    color: var(--ds-primary);
    background: color-mix(in srgb, var(--ds-primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--ds-primary) 35%, transparent);
  }
  body[data-theme-preset="dark"] .status-pill.vencido {
    color: var(--ds-destructive);
    background: color-mix(in srgb, var(--ds-destructive) 16%, transparent);
    border-color: color-mix(in srgb, var(--ds-destructive) 35%, transparent);
  }
  body[data-theme-preset="dark"] .status-pill.pago {
    color: #10B981;
    background: color-mix(in srgb, #10B981 16%, transparent);
    border-color: color-mix(in srgb, #10B981 35%, transparent);
  }
  body[data-theme-preset="dark"] .status-pill.default {
    color: var(--ds-muted-foreground);
    background: color-mix(in srgb, var(--ds-muted-foreground) 14%, transparent);
    border-color: color-mix(in srgb, var(--ds-muted-foreground) 30%, transparent);
  }
}