/* ==========================================================================
   Empovio — Charts
   Styling for the hand-built SVG charts in js/components/charts.js.
   Shared by the marketing homepage and the authenticated dashboard so both
   surfaces draw identical charts — one chart system, never two.
   ========================================================================== */

/* Charts fill the width of their card but hold a fixed height, so a wide card
   never turns into a wall of chart. Axis labels are HTML (see .chart-axis) and
   therefore stay at a readable, constant size. */
.chart {
  display: block;
  width: 100%;
  height: 116px;
}

.chart-donut {
  display: block;
  flex: none;
}

.chart-axis {
  display: grid;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-disabled);
  text-align: center;
}

.chart-axis span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column count for the hand-written hero chart. */
.chart-axis--7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Line charts: labels sit under their data points, not in centred columns. */
.chart-axis--spread {
  display: flex;
  justify-content: space-between;
}

.chart__grid-line {
  stroke: var(--n-150);
  stroke-width: 1;
}

.chart__bar {
  fill: var(--primary-600);
  transform-origin: bottom;
}

.chart__bar--muted {
  fill: var(--primary-200);
}

.chart__line {
  fill: none;
  stroke: var(--primary-600);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart__area {
  fill: var(--primary-600);
  opacity: 0.08;
}

.chart__point {
  fill: var(--n-0);
  stroke: var(--primary-600);
  stroke-width: 2;
}

.chart__donut-track {
  fill: none;
  stroke: var(--n-150);
}

.chart__donut-value {
  fill: none;
  stroke-linecap: round;
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--sp-12);
  font-size: 10px;
  color: var(--text-secondary);
}

.chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chart__legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--n-300);
}

/* Animate charts once when they become visible. Never loops (Part E motion). */
.chart.is-animated .chart__bar {
  animation: bar-grow 250ms var(--ease-out) both;
}

.chart.is-animated .chart__line {
  stroke-dasharray: var(--line-length, 600);
  stroke-dashoffset: var(--line-length, 600);
  animation: line-draw 250ms var(--ease-out) forwards;
}

@keyframes bar-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes line-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   Segmented meter — a single bar split into labelled parts
   (attendance split, shift coverage, employee distribution)
   -------------------------------------------------------------------------- */

.d-meter {
  display: flex;
  height: 8px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background-color: var(--n-150);
}

.d-meter span {
  display: block;
  height: 100%;
}