/* activityChart — shared Activity time-series chart (component-activity-chart.js).
   Two layers: an SVG stretched to the card width for the paths and gridlines,
   and absolutely-positioned HTML on top for every label, marker and tooltip —
   the SVG uses preserveAspectRatio="none", so text inside it would be stretched. */

.ac-chart {
  --ac-color: #5F61E6;
  --ac-plot-h: 200px;
  --ac-gutter: 46px;
}

.ac-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: .65rem;
}

.ac-title {
  font-size: .78rem;
  opacity: .65;
}

.ac-badge {
  font-size: .72rem;
  opacity: .55;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ac-plot {
  display: flex;
  align-items: stretch;
}

/* Y axis. Each tick is pinned to the same coordinate as its gridline, then
   pulled up half a line so the text is centred on the rule. */
.ac-yaxis {
  position: relative;
  width: var(--ac-gutter);
  flex: 0 0 var(--ac-gutter);
  min-height: var(--ac-plot-h);
}

.ac-ytick {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-size: .68rem;
  line-height: 1;
  opacity: .5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ac-canvas {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--ac-plot-h);
}

.ac-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Permanent peak marker + value. */
.ac-peak-mark,
.ac-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--ac-color);
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
  pointer-events: none;
}

.ac-peak-label {
  position: absolute;
  transform: translate(-50%, -160%);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ac-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .12s linear;
}

.ac-canvas.ac-hover .ac-peak-label { opacity: 0; }

.ac-peak-label.ac-peak-start { transform: translate(-4px, -160%); }
.ac-peak-label.ac-peak-end   { transform: translate(calc(-100% + 4px), -160%); }

/* Hover readout: vertical guide, dot on the series, value bubble. */
.ac-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: currentColor;
  opacity: .25;
  pointer-events: none;
}

.ac-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--bs-body-color, #22303f);
  color: var(--bs-body-bg, #fff);
  font-size: .72rem;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.ac-tip.ac-tip-start { transform: translate(-8px, calc(-100% - 14px)); }
.ac-tip.ac-tip-end   { transform: translate(calc(-100% + 8px), calc(-100% - 14px)); }

.ac-tip-v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ac-tip-x { opacity: .7; }

/* X axis, on the same 0→100% track as the points so a label sits under its sample. */
.ac-xaxis {
  position: relative;
  height: 1.1rem;
  margin: 6px 0 0 var(--ac-gutter);
}

.ac-xtick {
  position: absolute;
  transform: translateX(-50%);
  font-size: .68rem;
  opacity: .55;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ac-xtick.ac-xtick-start { transform: translateX(0); }
.ac-xtick.ac-xtick-end   { transform: translateX(-100%); }

/* The component owns its own hidden state — it must not depend on Bootstrap's
   d-none being in scope wherever the chart is embedded. */
.ac-off { display: none !important; }

.ac-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  opacity: .6;
}