/*
 * data-table.css — Data table + badges OK/Risco/Fora + live indicator
 *
 * Proveniência: apps/analytics-rh/pages/_internal/styles/_data_table.py
 *   CSS literal extraído em 2026-05-25 (R-2 CSS pipeline).
 *   Fonte primária: prototipos/2026-05-06-shell-rebrand/a-topbar-pills.html
 *   linhas 399-437.
 *
 * Tokens consumidos: --border-subtle, --surface-hover, --text-muted,
 *                    --text-primary, --text-secondary,
 *                    --state-success, --state-warning, --state-danger,
 *                    --accent-brand-text
 *
 * Padrão usado em: Painel BI (consultor x SLA), Geral (top performers).
 * Namespace: .arh-data-table, .arh-badge*, .arh-live-pill
 */

/* ── Data Table (proto-A linhas 399-425) ──────────────────────────── */
.arh-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.arh-data-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  white-space: nowrap;
}
.arh-data-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 100ms;
}
.arh-data-table tbody tr:last-child {
  border-bottom: none;
}
.arh-data-table tbody tr:hover {
  background: var(--surface-hover);
}
.arh-data-table td {
  padding: 10px 12px;
  color: var(--text-secondary);
  vertical-align: middle;
}
.arh-data-table td:first-child {
  color: var(--text-primary);
  font-weight: 500;
}
.arh-data-table td.is-numeric {
  text-align: right;
  font-feature-settings: 'tnum' 1;
}

/* Badges OK/Risco/Fora (proto-A linhas 426-437) */
.arh-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  gap: 4px;
  line-height: 1.4;
  white-space: nowrap;
}
.arh-badge-ok {
  background: rgba(46, 204, 113, 0.15);
  color: var(--state-success);
}
.arh-badge-warn {
  background: rgba(217, 160, 32, 0.15);
  color: var(--state-warning);
}
.arh-badge-danger {
  background: rgba(231, 76, 60, 0.15);
  color: var(--state-danger);
}
.arh-badge-neutral {
  background: var(--surface-hover);
  color: var(--text-muted);
}
.arh-badge-brand {
  background: rgba(29, 78, 216, 0.15);
  color: var(--accent-brand-text);
}

/* Live indicator (small dot + label) — usado em pages como "Visão Geral · live" */
.arh-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--state-success);
}
.arh-live-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--state-success);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.20);
  animation: arh-live-pulse 2s ease-in-out infinite;
}
@keyframes arh-live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.20); }
  50%      { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0.10); }
}