/* badge.css */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border: 1px solid transparent;
}

.badge--module {
  background: var(--surface-selected);
  color: var(--brand-navy);
}

.badge--developer {
  background: var(--surface-card-solid);
  color: var(--brand-navy);
  border-color: var(--border-control);
  font-weight: 700;
}

/* estado de permissão — nunca só cor: sempre ícone (glifo textual) + rótulo.
   Usa os tokens *-text (revisão visual 3), não os tokens de status originais
   — status.success/warning/disabled falham AA como texto pequeno, mesmo
   sobre fundo branco puro (ver theme/themes/visiontech-claro.css). */
.perm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

.perm--total {
  background: rgba(0, 141, 114, 0.12);
  color: var(--status-success-text);
}
.perm--total::before {
  content: "✓";
}

.perm--limitado {
  background: rgba(181, 118, 0, 0.12);
  color: var(--status-warning-text);
}
.perm--limitado::before {
  content: "◐";
}

.perm--nenhum {
  background: rgba(169, 183, 187, 0.18);
  color: var(--status-disabled-text);
}
.perm--nenhum::before {
  content: "–";
}

/* versão compacta (revisão visual 3, item 6) — só o glifo, sem o rótulo de
   texto ("total"/"limitado"/"nenhum") visível em cada célula; o rótulo
   continua acessível via aria-label no próprio elemento, e o significado de
   cada glifo é explicado uma única vez pela legenda (.matrix-legend), não
   repetido em cada célula. Usada só na matriz-resumo da página de
   referência — a matriz completa continua com o badge cheio (.perm). */
.perm-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.perm-glyph--total {
  background: rgba(0, 141, 114, 0.14);
  color: var(--status-success-text);
}
.perm-glyph--total::before {
  content: "✓";
}

.perm-glyph--limitado {
  background: rgba(181, 118, 0, 0.14);
  color: var(--status-warning-text);
}
.perm-glyph--limitado::before {
  content: "◐";
}

.perm-glyph--nenhum {
  background: rgba(169, 183, 187, 0.2);
  color: var(--status-disabled-text);
}
.perm-glyph--nenhum::before {
  content: "–";
}

.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.matrix-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* pill de status genérico (UI-3): reutilizado por qualquer coluna de
   "status"/"situação"/"sincronização" nas páginas de lista operacionais —
   evita repetir rgba/var em cada página (cor sempre via var(--token),
   nunca solta — mesmos tokens *-text já usados em .perm/.perm-glyph acima,
   mesma régua de contraste AA já verificada nessas classes). */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.status-pill--success {
  background: rgba(0, 141, 114, 0.12);
  color: var(--status-success-text);
}
.status-pill--warning {
  background: rgba(181, 118, 0, 0.12);
  color: var(--status-warning-text);
}
.status-pill--danger {
  background: rgba(179, 38, 30, 0.12);
  color: var(--status-danger);
}
.status-pill--neutral {
  background: var(--surface-selected);
  color: var(--brand-navy);
}