/* Self-hosted Material Symbols Outlined (static instance: opsz 24, wght 400,
   FILL 0, GRAD 0) — the unmodified Google font file, served from our own
   static/ so no CDN request is made. Curated glyph list lives in
   static/icons/material-symbols.json. */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/material-symbols/material-symbols-outlined.woff2') format('woff2');
}

/* Base icon class. Usage: <span class="ms">factory</span> — the text node is
   the Material Symbols ligature name (= our icon slug). */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

/* size helpers */
.ms-sm { font-size: 1rem; }
.ms-lg { font-size: 1.5rem; }
.ms-xl { font-size: 2rem; }
.ms-2x { font-size: 2.75rem; }

/* colour helpers — inherit by default; these opt into muted / status tints */
.ms-muted { color: var(--bs-secondary-color, #6c757d); }
.ms-primary { color: var(--chem-primary, #0B2545); }
.ms-success { color: var(--bs-success, #198754); }
.ms-danger { color: var(--bs-danger, #dc3545); }
.ms-warning { color: var(--bs-warning, #ffc107); }

/* a round tinted "icon avatar" chip, used in list rows in place of a photo */
.icon-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--bs-tertiary-bg, #f1f3f5);
  color: var(--chem-primary, #0B2545);
  flex: 0 0 auto;
}
.icon-avatar .ms { font-size: 1.25rem; }
.icon-avatar-sm { width: 1.75rem; height: 1.75rem; }
.icon-avatar-sm .ms { font-size: 1rem; }