/* ==========================================================================
   CAOSmarada Design System · Sparkline
   --------------------------------------------------------------------------
   Série temporal inline (7d default) ao lado de cada ativo em tabelas densas.
   SVG path com stroke 1.8px e stroke-linecap round.
   Cores: emerald quando sobe, rose quando desce, dashed cinza se sem dado.
   Preview: .planning/design-preview/components.html (seção "Sparklines inline").
   ========================================================================== */

.cmd-spark {
  background: var(--cmd-bg-surface);
  border: 1px solid var(--cmd-border-subtle);
  border-radius: var(--cmd-r-md);
  padding: var(--cmd-sp-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--cmd-sp-4);
}

.cmd-spark__tk {
  font: var(--cmd-w-medium) 13px/1 var(--cmd-ff-mono);
  color: var(--cmd-text-primary);
}

.cmd-spark__svg {
  height: 36px;
  width: 100%;
  display: block;
}

.cmd-spark__delta {
  font: var(--cmd-w-regular) var(--cmd-f-caption)/1 var(--cmd-ff-mono);
  color: var(--cmd-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Variantes semânticas do delta */
.cmd-spark__delta--up {
  color: var(--cmd-em);
}

.cmd-spark__delta--down {
  color: var(--cmd-sell);
}

.cmd-spark__delta--nd {
  color: var(--cmd-text-muted);
  font-size: var(--cmd-f-micro);
}

/*
   Path stroke — defaults aplicáveis via classe no <path> ou inline.
   Use stroke="var(--cmd-em)" / var(--cmd-sell) / var(--cmd-text-tertiary).
*/
.cmd-spark__path {
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmd-spark__path--up {
  stroke: var(--cmd-em);
}

.cmd-spark__path--down {
  stroke: var(--cmd-sell);
}

.cmd-spark__path--nd {
  stroke: var(--cmd-text-tertiary);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

/* Variante compacta inline (sem card, só svg + delta) — pra ActionRow */
.cmd-spark--inline {
  background: transparent;
  border: none;
  padding: 0;
  grid-template-columns: 1fr auto;
}

.cmd-spark--inline .cmd-spark__svg {
  height: 24px;
  max-width: 80px;
}