/* ============================================================================
   Component: chart frame
   ----------------------------------------------------------------------------
   A fixed-height box for a Chart.js <canvas>.

   Chart.js defaults to maintainAspectRatio:true, which slaves chart HEIGHT to
   chart WIDTH. Inside .card.h-100 — a flex container — that closes a loop:
   Chart.js measures the card, resizes the canvas, the new canvas size changes
   how the flex item resolves, Chart.js measures again. On the dashboard it
   settled on a canvas 0px wide and 782px tall inside a 395px card, which is
   why the charts looked collapsed and the cards looked stretched.

   The documented fix is a wrapper with its OWN height that does not depend on
   its contents, plus maintainAspectRatio:false so Chart.js simply fills it.
   position:relative is required — Chart.js positions the canvas against the
   nearest positioned ancestor.

   Heights are deliberate, not inherited from the old canvas height attribute:
   that attribute only ever seeded an aspect ratio, it never set a height.
   ========================================================================== */

.aq-chart{
  position: relative;
  height: 260px;
  width: 100%;
}

/* Doughnuts and the compact per-class bars: they carry less axis furniture,
   so they read fine shorter and keep two of them visible without scrolling. */
.aq-chart--sm{ height: 220px; }

/* The expanded single-chart modal, where the whole point is a bigger plot. */
.aq-chart--lg{ height: 360px; }

/* A canvas is replaced-content and would otherwise impose its own intrinsic
   size on the flex/grid parent; this keeps the WRAPPER the only thing that
   decides how tall the chart is. */
.aq-chart > canvas{ display: block; max-width: 100%; }

/* Rotated category labels ("Grade 1 … Form 4") need more vertical room than a
   plain axis, and a phone has less of it to give. Taller here means the plot
   area survives once the labels have taken their share. */
@media (max-width: 767.98px){
  .aq-chart    { height: 280px; }
  .aq-chart--sm{ height: 240px; }
  .aq-chart--lg{ height: 320px; }
}