/* ========================================================================
   HRZ OPS — KPI Card v2
   ------------------------------------------------------------------------
   Componente KPI canônico. Substitui kpi-card legados.

   Dependências: design-tokens-v1.css (DEVE ser importado antes).

   Anatomia:
     ┌────────────────────────────────────────┐
     │ LABEL UPPERCASE                        │  → .kpi-card-v2__label
     │                                        │
     │   42,7%                                │  → .kpi-card-v2__value
     │                                        │
     │ ↑ 12% vs último mês  •  meta 35%       │  → .kpi-card-v2__comparison
     │ ░░▒▒▒▓▓▓▓                              │  → .kpi-card-v2__sparkline
     └────────────────────────────────────────┘

   Severity (cor da borda esquerda + bg sutil) é definida pela FUNÇÃO
   do dado, não pela categoria. Aplica-se via data-attribute:
     <div class="kpi-card-v2" data-severity="danger">  → SLA breached
     <div class="kpi-card-v2" data-severity="warning"> → atenção
     <div class="kpi-card-v2" data-severity="success"> → dentro da meta
     <div class="kpi-card-v2" data-severity="info">    → informativo
     <div class="kpi-card-v2" data-severity="neutral"> → padrão / sem juízo
   ======================================================================== */

/* ------------------------------------------------------------------------
   CONTAINER
   ------------------------------------------------------------------------ */
.kpi-card-v2 {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-left: 4px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 140px; /* mantém altura consistente quando empilhados em grid */
  position: relative;
  transition: border-color 150ms ease-out,
              box-shadow 150ms ease-out,
              transform 150ms ease-out;
}

/* Hover sutil — eleva o card. Não usar em cards não-interativos. */
.kpi-card-v2--interactive {
  cursor: pointer;
}
.kpi-card-v2--interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kpi-card-v2--interactive:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ------------------------------------------------------------------------
   SEVERITY VARIANTS — borda esquerda colorida + background sutil
   A função do dado define a cor.
   ------------------------------------------------------------------------ */
.kpi-card-v2[data-severity="danger"] {
  border-left-color: var(--color-danger-500);
  background: var(--color-danger-bg);
}
.kpi-card-v2[data-severity="warning"] {
  border-left-color: var(--color-warning-500);
  background: var(--color-warning-bg);
}
.kpi-card-v2[data-severity="success"] {
  border-left-color: var(--color-success-500);
  /* background mantém neutral — success é mais comum, não queimar a tela */
}
.kpi-card-v2[data-severity="info"] {
  border-left-color: var(--color-info-500);
}
.kpi-card-v2[data-severity="neutral"] {
  border-left-color: var(--color-neutral-200);
}

/* ------------------------------------------------------------------------
   LABEL — pequeno, UPPERCASE, neutro
   ------------------------------------------------------------------------ */
.kpi-card-v2__label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--color-neutral-500);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* Ícone de ajuda (?) no label — opcional */
.kpi-card-v2__label-help {
  display: inline-flex;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: 10px;
  align-items: center;
  justify-content: center;
  cursor: help;
}

/* ------------------------------------------------------------------------
   VALUE — número hero, tabular, dominante visualmente
   ------------------------------------------------------------------------ */
.kpi-card-v2__value {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-neutral-900);
  margin: 0;
}

/* Variante hero (48px) — para o KPI mais importante da tela. Use 1 por tela. */
.kpi-card-v2__value--hero {
  font-size: var(--font-size-hero);
}

/* Sufixo (R$, %, h) — menor, ao lado do número principal */
.kpi-card-v2__value-suffix {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-500);
  margin-left: var(--space-1);
}

/* Severity color para o número (opcional — use só quando o número PRECISA
   gritar). Default é neutral-900 (preto) — não polua. */
.kpi-card-v2[data-severity="danger"] .kpi-card-v2__value--colored {
  color: var(--color-danger-500);
}
.kpi-card-v2[data-severity="warning"] .kpi-card-v2__value--colored {
  color: var(--color-warning-700);
}
.kpi-card-v2[data-severity="success"] .kpi-card-v2__value--colored {
  color: var(--color-success-700);
}

/* ------------------------------------------------------------------------
   COMPARISON — vs meta, vs período, vs equipe (linha secundária)
   ------------------------------------------------------------------------ */
.kpi-card-v2__comparison {
  font-size: var(--font-size-caption);
  color: var(--color-neutral-500);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  line-height: var(--line-height-normal);
  margin: 0;
}

/* Separador "•" entre itens de comparação */
.kpi-card-v2__comparison-sep {
  color: var(--color-neutral-400);
  user-select: none;
}

/* Delta (variação vs período anterior) — verde sobe, vermelho desce.
   IMPORTANTE: a semântica "subir é bom" depende do KPI. Para métricas
   onde subir é RUIM (ex: churn, custo), inverter as classes no template.
   O componente em si é semanticamente neutro: --up é positivo, --down é
   negativo. Caller decide qual aplica. */
.kpi-card-v2__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.kpi-card-v2__delta--up {
  color: var(--color-success-500);
}
.kpi-card-v2__delta--down {
  color: var(--color-danger-500);
}
.kpi-card-v2__delta--flat {
  color: var(--color-neutral-500);
}

/* Setas inline — usar com pseudo ou inline SVG. Estes são fallbacks com glyph. */
.kpi-card-v2__delta--up::before   { content: "↑"; font-weight: normal; }
.kpi-card-v2__delta--down::before { content: "↓"; font-weight: normal; }
.kpi-card-v2__delta--flat::before { content: "→"; font-weight: normal; }

/* ------------------------------------------------------------------------
   SPARKLINE — gráfico em miniatura no rodapé
   ------------------------------------------------------------------------
   Injeção via SVG (preferível) ou via canvas. Reservar altura fixa
   para evitar layout shift quando o dado chegar.
   ------------------------------------------------------------------------ */
.kpi-card-v2__sparkline {
  height: 32px;
  width: 100%;
  margin-top: var(--space-2);
  /* SVG path/canvas é injetado via JS. O placeholder mantém altura. */
}
.kpi-card-v2__sparkline svg {
  width: 100%;
  height: 100%;
  display: block;
}
.kpi-card-v2__sparkline path {
  fill: none;
  stroke: var(--color-info-500);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-card-v2[data-severity="danger"]  .kpi-card-v2__sparkline path { stroke: var(--color-danger-500); }
.kpi-card-v2[data-severity="warning"] .kpi-card-v2__sparkline path { stroke: var(--color-warning-500); }
.kpi-card-v2[data-severity="success"] .kpi-card-v2__sparkline path { stroke: var(--color-success-500); }

/* Área preenchida (opcional) — adicione classe .has-fill no SVG */
.kpi-card-v2__sparkline .sparkline-fill {
  fill: var(--color-info-500);
  fill-opacity: 0.1;
  stroke: none;
}

/* ------------------------------------------------------------------------
   META BAR — barra de progresso vs meta (opcional)
   ------------------------------------------------------------------------ */
.kpi-card-v2__meta-bar {
  height: 4px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}
.kpi-card-v2__meta-bar-fill {
  height: 100%;
  background: var(--color-success-500);
  border-radius: var(--radius-full);
  transition: width 300ms ease-out;
}
.kpi-card-v2[data-severity="danger"]  .kpi-card-v2__meta-bar-fill { background: var(--color-danger-500); }
.kpi-card-v2[data-severity="warning"] .kpi-card-v2__meta-bar-fill { background: var(--color-warning-500); }

/* ------------------------------------------------------------------------
   LOADING / EMPTY STATES
   ------------------------------------------------------------------------ */
.kpi-card-v2--loading .kpi-card-v2__value,
.kpi-card-v2--loading .kpi-card-v2__comparison,
.kpi-card-v2--loading .kpi-card-v2__sparkline {
  background: linear-gradient(
    90deg,
    var(--color-neutral-100) 0%,
    var(--color-neutral-200) 50%,
    var(--color-neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: kpi-card-v2-shimmer 1.5s ease-in-out infinite;
  color: transparent;
  border-radius: var(--radius-sm);
}

@keyframes kpi-card-v2-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.kpi-card-v2--empty .kpi-card-v2__value {
  color: var(--color-neutral-400);
  font-weight: var(--font-weight-regular);
}
.kpi-card-v2--empty .kpi-card-v2__value::before {
  content: "—"; /* em dash — semanticamente "sem dado" */
}

/* ------------------------------------------------------------------------
   GRID HELPER — útil para empilhar KPIs lado a lado
   Mobile-first: 1 coluna no mobile, 2 a partir de 640px, 4 a partir de 1024px.
   ------------------------------------------------------------------------ */
.kpi-card-v2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .kpi-card-v2-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .kpi-card-v2-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Variante 3 colunas (para dashboards mais focados) */
@media (min-width: 1024px) {
  .kpi-card-v2-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------------------------------------------------
   DARK MODE — overrides específicos do componente
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  .kpi-card-v2 {
    background: var(--color-neutral-100); /* invertido pelo token */
    border-color: var(--color-neutral-200);
  }
  .kpi-card-v2__value {
    color: var(--color-neutral-900); /* já invertido pelo token */
  }
}

/* ========================================================================
   END — kpi-card-v2.css
   ======================================================================== */