/*
 * BAR CHART — gráfico de barras em SVG puro (sem lib JS). Receita por mês:
 * eixo Y a partir de 0 com grade + valores, barras na cor de ação (corpo
 * claro + capa sólida no topo) e linha de tendência pontilhada costurando os
 * topos. Estica para preencher o card (preserveAspectRatio="none").
 */
.bar-chart {
  position: relative; /* âncora das sobreposições (ponto + tooltip) */
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 16rem;
}

.bar-chart__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bar-chart__grid {
  stroke: var(--color-border);
  stroke-width: 1;
}

/* Corpo da barra: cor de ação suave (preenchimento translúcido). */
.bar-chart__bar {
  fill: var(--color-accent);
  opacity: 0.2;
}

/* Barra em destaque (hover): corpo mais sólido, "acende" o mês apontado. */
.bar-chart__bar--active {
  opacity: 0.4;
  transition: opacity 0.12s ease;
}

/* Capa do topo: cor de ação sólida, dá o destaque da ponta. */
.bar-chart__cap {
  fill: var(--color-accent);
}

/* Faixas invisíveis de captura do mouse (uma por mês). Focáveis por teclado. */
.bar-chart__hit {
  fill: transparent;
  cursor: pointer;
}

/* Foco de teclado: `outline` em <rect> SVG não renderiza de forma confiável,
   então o anel vem do stroke (que o SVG sempre desenha). O tooltip/guia que
   aparecem no foco reforçam o indicador. */
.bar-chart__hit:focus-visible {
  outline: none;
  stroke: var(--color-focus-ring);
  stroke-width: 2px;
  rx: 6px;
}

/* Linha-guia vertical no mês apontado. */
.bar-chart__guide {
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Ponto no topo da barra apontada (overlay HTML, centrado no ponto). */
.bar-chart__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px; /* centra no (left, top) */
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
  pointer-events: none;
}

/* Tooltip flutuante: mês + valor + Δ%. Ancorado acima do ponto. */
.bar-chart__tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.bar-chart__tip-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.bar-chart__tip-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.bar-chart__tip-value {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.bar-chart__tip-delta {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.bar-chart__tip-delta--good { color: var(--color-success); }
.bar-chart__tip-delta--bad { color: var(--color-danger); }

/* Tendência: linha pontilhada na cor de ação, costurando os topos. */
.bar-chart__trend {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
  opacity: 0.65;
  vector-effect: non-scaling-stroke;
}

/* Rótulos dos eixos (valores Y e meses X). */
.bar-chart__axis {
  fill: var(--color-text-muted);
  font-size: 14px;
}

.bar-chart__axis--y {
  text-anchor: end;
  dominant-baseline: middle;
}

.bar-chart__axis--x {
  text-anchor: middle;
}