/* Material Icons — replaces https://fonts.googleapis.com/icon?family=Material+Icons

   Quasar renders icons as ligature text (<i class="q-icon material-icons">bolt</i>),
   so when this font is unavailable the browser paints the raw icon name into the
   page ("bolt", "arrow_drop_down"). That text is ~14x wider than the glyph it
   replaces, which is what pushes the layout sideways.

   Two sources: our own origin first, Google's CDN as a fallback, so a failure of
   either one is survivable. Rules below mirror Google's stylesheet — 'liga' maps
   the icon name to its glyph, and letter-spacing/text-transform are reset because
   inherited values from ancestors would break ligature formation. */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/material-icons.woff2) format('woff2'),
       url(https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Quasar renders the ligature inside an inner element:
       <i class="q-icon material-icons"><span aria-hidden="true">bolt</span></i>
   insight.css sets font-family through universal selectors (`*` at :6 and
   `.theme-luxury *` at :602). Those match that inner span DIRECTLY, and a direct
   rule always beats an inherited value — so the span rendered in Poppins/Inter and
   the ligature never formed, printing the icon's name instead. Because .q-icon is
   width:1em the name overflows its box and collides with neighbouring text.

   Descendants must be covered, not just the icon element. !important is required:
   `.q-icon *` ties with `.theme-luxury *` on specificity, and insight.css loads
   after this file, so it would otherwise win on source order. */
.material-icons, .material-icons *,
.q-icon, .q-icon * {
  font-family: 'Material Icons' !important;
}