/*
 * sparkline.css — Mini sparklines SVG + trend indicators + SLA badges
 *
 * Proveniência: apps/analytics-rh/pages/_internal/styles/_sparkline.py
 *   CSS literal extraído byte-identical (CSS = """...""", linhas 25-117).
 *   Story 2.4.1. Proto: prototipos/2026-05-06-geral-refinement/a-refinement-conservador.html
 *   Linhas proto: .sparkline 224-227 · .kpi-trend 229-237 · .badge-sla 256-263
 *
 * Tokens consumidos: --state-success, --state-danger, --text-muted,
 *                    --border-default, --border-subtle, --surface-sunken, --accent-brand
 *
 * Anti-pattern evitado: cores hardcoded — caller passa stroke="var(--*)" no
 *   SVG inline para herdar tema dark/light automaticamente.
 *   EXCEÇÃO documentada: arh-badge-sla-ok/bad usam rgba() green/red de
 *   rascunho proto-A; mapeamento para token semântico pendente (R-2 pipeline).
 *
 * Hex inventário: rgba(46,204,113,…) [green — badge-sla-ok × 2]
 *                 rgba(231,76,60,…)  [red   — badge-sla-bad × 2]
 */

/* ── Mini sparkline SVG (Story 2.4.1 — proto-A linhas 224-227) ───── */
.arh-sparkline {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: bottom;
}
.arh-sparkline-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arh-spark-area {
  opacity: 0.15;
}

/* ── Trend indicator (Story 2.4.1 — proto-A linhas 229-237) ──────── */
.arh-kpi-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.arh-trend-up {
  color: var(--state-success);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.arh-trend-down {
  color: var(--state-danger);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.arh-trend-flat {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.arh-trend-sep {
  color: var(--border-default);
  font-size: 10px;
}
.arh-trend-label {
  color: var(--text-muted);
}

/* ── Badges shadcn-style refinadas (Story 2.4.1) ─────────────────── */
/* badge-period: outline neutro p/ período */
.arh-badge-period {
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1px 7px;
  background: var(--surface-sunken);
  display: inline-block;
}

/* badge-sla: variant success / destructive (proto-A linhas 256-263) */
.arh-badge-sla {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.arh-badge-sla-ok {
  background: rgba(46, 204, 113, 0.12);
  color: var(--state-success);
  border: 1px solid rgba(46, 204, 113, 0.25);
}
.arh-badge-sla-bad {
  background: rgba(231, 76, 60, 0.12);
  color: var(--state-danger);
  border: 1px solid rgba(231, 76, 60, 0.25);
}