/* ==========================================================================
   DASHBOARD — the rows of figures under the first one
   --------------------------------------------------------------------------
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only, and nothing that cannot survive dir="rtl" and dir="ltr"
   alike. Loaded after app.css and apple.css, so it may rely on every token
   they define. The first row of the dashboard, its lists and its cards are
   app.css's (section 26); this file only adds what the later rows need.

   Every class is prefixed .dash-.
   ========================================================================== */

/* A figure is read whole: "12 | 3" or "1250.00 ₪" never breaks across two lines. The label and the caption still wrap. */
.dash-tiles .stat-tile__value {
  white-space: nowrap;
}

/* The money row has two tiles, each given room for an amount at the larger size. */
.dash-money {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.dash-money .stat-tile__value {
  font-size: var(--font-size-xl);
}

/* On a phone the row of counts is a grid of two, not a column of four more full-width cards: the page is already long, and a
   count and its caption need no more than half the width once the icon sits above the words. The money row keeps a full
   width each — an amount with its currency does not fit in half of 390px at the size it is read at. */
@media (max-width: 30rem) {
  .dash-tiles:not(.dash-money) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .dash-tiles:not(.dash-money) .stat-tile {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
  }

  .dash-tiles:not(.dash-money) .stat-tile__value {
    font-size: var(--font-size-xl);
  }
}