/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ------------------------------------------------------------------
 * Sparkline hover behavior — see app/views/shared/_sparkline.html.erb
 *
 * Each data point in a sparkline has a wide invisible <rect> hit-target
 * plus a visible <circle> dot and an optional vertical guide <line>,
 * all wrapped in <g class="sparkline-point">. Default state is fully
 * transparent so the sparkline reads as a clean trend line. Hovering
 * the hit-target reveals the dot + guide, and the native browser
 * tooltip (from the <title> child) shows period + value.
 *
 * Pure CSS — no JS dependency. Accessible: <title> is read by screen
 * readers and surfaced as the standard browser tooltip on hover.
 * ------------------------------------------------------------------ */
.sparkline-svg {
  overflow: visible;            /* let the dot ring extend past the viewBox */
}
.sparkline-svg .sparkline-hit {
  cursor: crosshair;
}
.sparkline-svg .sparkline-dot {
  transition: opacity 80ms ease-out, r 80ms ease-out;
}
.sparkline-svg .sparkline-guide {
  transition: opacity 80ms ease-out;
}
.sparkline-svg .sparkline-point:hover .sparkline-dot {
  opacity: 1;
}
.sparkline-svg .sparkline-point:hover .sparkline-guide {
  opacity: 0.55;
}
/* Halo ring around the hovered dot — gives a clear "you're here" cue. */
.sparkline-svg .sparkline-point .sparkline-halo {
  opacity: 0;
  transition: opacity 80ms ease-out;
}
.sparkline-svg .sparkline-point:hover .sparkline-halo {
  opacity: 0.25;
}

/* Floating tooltip — one global element (in layout), positioned by the
 * inline JS in app/views/layouts/application.html.erb. Pure CSS controls
 * the look + transition; JS only sets position and toggles .visible. */
#sparkline-tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: #1c1917;
  color: #fafaf9;
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 80ms ease-out;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
#sparkline-tooltip.visible {
  opacity: 1;
}
#sparkline-tooltip .sl-tt-label {
  color: #a8a29e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#sparkline-tooltip .sl-tt-value {
  font-weight: 600;
  font-size: 12px;
}