/*
 * kpi.css — KPI grid 4-col + KPI card legacy selectors
 *
 * PROVENIÊNCIA
 *   Extraído de: apps/analytics-rh/pages/_internal/styles/_kpi.py
 *   Origem proto: prototipos/2026-05-06-shell-rebrand/a-topbar-pills.html L273-326
 *   Extraído em: R-2 CSS pipeline (2026-05-25)
 *   Extrator: Forge (@dm-frontend-engineer)
 *
 * RELAÇÃO COM kpi_card PRIMITIVE (R-1.4)
 *   Este arquivo é BASE/SUPERSEDIDO pelo primitive kpi_card
 *   (components/primitives/kpi_card.py — R-1.4 2026-05-25).
 *
 *   O primitive:
 *     - Renomeou todos os seletores: .arh-kpi-* → .arh-kc* (BEM)
 *     - Removeu .arh-kpi-grid (responsabilidade do caller)
 *     - Removeu .arh-kpi-delta / .arh-kpi-delta-arrow (fora da API do primitive)
 *     - Adicionou size variants (sm/md) e --arh-kc-value-color semântico
 *     - Citação explícita: kpi_card.py L80-81
 *
 *   Manter este arquivo APENAS enquanto código legacy em apps/analytics-rh/
 *   referenciar seletores .arh-kpi-* ou .arh-kpi-delta. Após migração
 *   completa para o primitive, este arquivo pode ser arquivado.
 *
 * HEX INVENTORY
 *   Zero hex hardcoded — 100% var(--token).
 *
 * TOKENS CONSUMIDOS
 *   --surface-raised, --border-subtle, --border-default,
 *   --radius-md, --shadow-card, --accent-brand, --text-primary,
 *   --text-muted, --state-success, --state-warning, --state-danger,
 *   --state-info (fallback accent-brand)
 */

/* ── KPI Grid 4 colunas (proto-A L275-280) ──────────────────────────────── */
.arh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) {
  .arh-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .arh-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ── KPI Card (proto-A L281-326) ─────────────────────────────────────────── */
.arh-kpi-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  /* A6 fix (refinamentos 2026-05-08): ease-out conforme 5 padrões DS finais.
     Antes: transition: border-color 150ms (sem timing-function = ease).
     DS final spec: 150ms ease-out para hover-card. */
  transition: border-color 150ms ease-out;
}

.arh-kpi-card:hover {
  border-color: var(--border-default);
}

/* Listra de acento no topo */
.arh-kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--kpi-accent, var(--accent-brand));
  opacity: 0.8;
}

/* Variações de accent — preferível usar style="--kpi-accent: var(--state-X);" */
.arh-kpi-card.is-success { --kpi-accent: var(--state-success); }
.arh-kpi-card.is-warning { --kpi-accent: var(--state-warning); }
.arh-kpi-card.is-danger  { --kpi-accent: var(--state-danger); }
.arh-kpi-card.is-info    { --kpi-accent: var(--state-info, var(--accent-brand)); }

/* ── Conteúdo do card ────────────────────────────────────────────────────── */
.arh-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.arh-kpi-label-icon {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1;
}

.arh-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
  font-feature-settings: 'tnum' 1;
}

/* ── Delta / tendência ───────────────────────────────────────────────────── */
.arh-kpi-delta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.arh-kpi-delta.up   { color: var(--state-success); }
.arh-kpi-delta.down { color: var(--state-danger); }

.arh-kpi-delta-arrow {
  font-size: 10px;
  line-height: 1;
}