/* The Analytics page, and the charts anywhere else they turn up.
 *
 * The colours themselves are set on the shapes from JavaScript — a bar's
 * colour is data, not decoration, and a loss has to come out red whatever a
 * stylesheet later decides. What lives here is everything ROUND the colour:
 * the card, the grid, the type. */

.cx-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 22px;
}

.cx-card {
  background: var(--card, #fff);
  border: 1px solid var(--line, #e6e9f0);
  border-radius: 10px;
  padding: 12px 14px 6px;
}

.cx-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.cx-title { font-size: 13.5px; font-weight: 700; color: var(--ink, #111); }

/* The line under the title says what the chart is FOR. A chart nobody knows
 * how to read is a decoration, and this page has enough of them that one
 * sentence each is cheaper than a chemist guessing. */
.cx-sub { font-size: 11.5px; color: var(--muted, #64748b); }

/* Two to a row where there is room, one under the other where there is not.
 * The day-by-day chart always keeps the full width — it is the one people
 * came for. */
.cx-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 1000px) {
  .cx-two { grid-template-columns: 1fr; }
}

/* An SVG with no height of its own collapses to nothing. The viewBox sets the
 * shape; this sets how tall it actually is on the page. */
.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cx-donut { max-width: 340px; margin: 0 auto; }

.cx-grid { stroke: var(--line, #e6e9f0); stroke-width: 1; }

/* Zero is not just another gridline on a chart that goes below it. */
.cx-zero { stroke: #94a3b8; stroke-width: 1.5; }

.cx-ax {
  font-size: 11px;
  fill: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
}

.cx-name { font-size: 12.5px; fill: var(--ink, #111); }
.cx-val {
  font-size: 12px;
  font-weight: 700;
  fill: var(--ink, #111);
  font-variant-numeric: tabular-nums;
}

.cx-hole {
  font-size: 22px;
  font-weight: 800;
  fill: var(--ink, #111);
  font-variant-numeric: tabular-nums;
}
.cx-holecap { font-size: 11px; fill: var(--muted, #64748b); }
.cx-key { font-size: 11.5px; fill: var(--ink, #111); }
.cx-keyval {
  font-size: 11.5px;
  fill: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
}

.cx-empty { font-size: 13px; fill: var(--muted, #64748b); }

/* The trend line and the wash beneath it. Their colour is DATA and is set on
 * the shape itself; what belongs here is only what a colour cannot say — a
 * stroke that stays one pixel however the chart is scaled. */
.cx-line { vector-effect: non-scaling-stroke; }
.cx-fill { pointer-events: none; }

.cx-bar { transition: opacity .12s; }
.cx-bar:hover, .cx-slice:hover { opacity: .82; }

.cx-slice { stroke: var(--card, #fff); stroke-width: 1.5; }

.cx-legend {
  display: flex;
  gap: 14px;
  margin: 0 0 4px 46px;
  font-size: 11.5px;
  color: var(--muted, #64748b);
}

.cx-legend-item { display: inline-flex; align-items: center; gap: 5px; }

.cx-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* Printing. A page of charts is the one report a chemist takes to his
 * accountant, so the cards must not break across a page and the hover states
 * must not survive onto paper. */
@media print {
  .cx-card { break-inside: avoid; border-color: #ccc; }
  .cx-two { grid-template-columns: 1fr 1fr; }
  .cx-bar:hover, .cx-slice:hover { opacity: 1; }

  /* Browsers drop "decorative" colour when printing, and on a chart the
   * colour IS the reading — without this the whole page comes out as white
   * bars on a white sheet, which is the one form nobody can use. */
  .cx-bar, .cx-slice, .cx-fill, .cx-line, .cx-legend-item i {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}