/*!
 * Matomo - free/libre analytics platform
 *
 * @link    https://matomo.org
 * @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
 */

// Scoped to .sparklinesGrid — Matomo concatenates all LESS into one sheet, so component-prefixed
// classes avoid colliding with the legacy .sparkline styles used when the feature flag is off.
// The card frame itself lives in SparklineCard.less.
.sparklinesGrid {
  @_card-min-width: 320px; // ~4 cards per row on a typical width, mirroring the old xl3 (25%) tier

  display: grid;
  gap: 16px;
  padding: 0 8px; // 8px side inset, matching the old float grid's outer column padding

  // auto-fill (not auto-fit) keeps an incomplete last row packed left — empty tracks hold their
  // place, so items don't stretch; this matches the old float behaviour with no breakpoints.
  // less.php evaluates min()/max()/clamp() as Less functions, so the whole value is escaped with
  // ~"..." (the @{var} still interpolates). min(<w>, 100%) lets a lone card shrink below <w> on a
  // narrow screen instead of overflowing, replacing the old max-width:320px one-column floor.
  grid-template-columns: ~"repeat(auto-fill, minmax(min(@{_card-min-width}, 100%), 1fr))";
}

// Grid item wrapping one card. min-width:0 overrides the grid item's default min-width:auto, so a
// card can shrink below its content's width (long titles truncate instead of overflowing).
.sparklinesGrid__item {
  min-width: 0;
}

// Date / segment+date cards are wider (value columns + full-width sparkline), so fewer per row.
// Used on reporting pages and — combined with --framed — in dashboard widgets; a narrow widget
// still collapses to one column via the min(350px, 100%) floor.
.sparklinesGrid--wide {
  @_card-min-width-wide: 350px; // date / segment+date cards — wider than the 320px standard card

  grid-template-columns: ~"repeat(auto-fill, minmax(min(@{_card-min-width-wide}, 100%), 1fr))";
}

// Dashboard-widget frame: a tighter gutter and an even 20px frame (the widget container adds no
// padding of its own around the grid).
.sparklinesGrid--framed {
  gap: 8px;
  padding: 20px;
}

// Dashboard widgets reflow like reporting pages but with a denser minimum, so a narrow widget
// (a 3- or 4-column dashboard) drops to one column instead of cramming two in. Same escaped
// auto-fill technique as the base grid; @_widget-card-min-width is PROVISIONAL — it sets the
// one-to-two column breakpoint at widget width ~ 2*min + gap(8) + 2*frame-padding(20) (~448px
// at 200px). Tune during QA.
.sparklinesGrid--compact {
  @_widget-card-min-width: 200px;

  grid-template-columns: ~"repeat(auto-fill, minmax(min(@{_widget-card-min-width}, 100%), 1fr))";
}

// override: the reused card carries the legacy `.sparkline` class (a JS contract for
// initializeSparklines), and Morpheus' `.widget .widgetContent .sparkline` adds a left margin that
// would push the card off its grid track. Zero it, keeping enough specificity to out-rank it.
.widget .sparklinesGrid .sparkline.sparklineCard {
  margin-left: 0;
}