/* ==========================================================================
   e-RSA — Google Material Symbols Outlined (Local Self-Hosted)
   - 100% Offline & PWA Compatible (Zero DNS, Zero CDN Handshake latency)
   - Pure Google Icons Design System
   ========================================================================== */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('material-symbols-outlined.woff2') format('woff2'),
       url('material-symbols-outlined.ttf') format('truetype');
}

/* Base class for Native Google Material Symbols */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  width: 1em;
  height: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: -0.125em;
  flex-shrink: 0;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Standalone / Explicit size utilities */
.material-symbols-outlined.icon-16px { font-size: 16px; width: 16px; height: 16px; }
.material-symbols-outlined.icon-18px { font-size: 18px; width: 18px; height: 18px; }
.material-symbols-outlined.icon-20px { font-size: 20px; width: 20px; height: 20px; }
.material-symbols-outlined.icon-22px { font-size: 22px; width: 22px; height: 22px; }
.material-symbols-outlined.icon-24px { font-size: 24px; width: 24px; height: 24px; }
.material-symbols-outlined.icon-28px { font-size: 28px; width: 28px; height: 28px; }
.material-symbols-outlined.icon-32px { font-size: 32px; width: 32px; height: 32px; }
.material-symbols-outlined.icon-40px { font-size: 40px; width: 40px; height: 40px; }
.material-symbols-outlined.icon-48px { font-size: 48px; width: 48px; height: 48px; }
.material-symbols-outlined.icon-empty,
.material-symbols-outlined.icon-empty-state,
.table-empty-state .material-symbols-outlined,
.table-empty-state-container .material-symbols-outlined {
  font-size: 3.25rem !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
}

/* Filled variation toggle */
.material-symbols-outlined.is-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Alignment & Proportional Sizing within Navigation, Buttons & Dropdowns */
.menu-icon.material-symbols-outlined {
  margin-right: 0.625rem;
  font-size: 1.375rem;
  width: 1.375rem;
  height: 1.375rem;
}

.dropdown-item .material-symbols-outlined,
.dropdown-menu .dropdown-item .material-symbols-outlined {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  width: 1.25rem !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  margin-right: 0.55rem !important;
  margin-inline-end: 0.55rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.btn .material-symbols-outlined {
  font-size: 1.15em;
  line-height: 1;
  vertical-align: -0.15em;
}
.btn-sm .material-symbols-outlined {
  font-size: 1.05em;
  vertical-align: -0.12em;
}
.btn-lg .material-symbols-outlined {
  font-size: 1.25em;
  vertical-align: -0.15em;
}

.badge .material-symbols-outlined {
  font-size: 0.9em;
  vertical-align: -0.1em;
}
.mobile-bottom-nav .nav-link .material-symbols-outlined {
  font-size: 1.5rem;
  line-height: 1;
}
.mobile-bottom-nav .nav-link.active .material-symbols-outlined {
  color: var(--bs-primary);
}

/* Spin animation utility (Google Icons) */
@keyframes ms-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.material-symbols-outlined.icon-spin,
.icon-spin {
  animation: ms-spin 1.5s infinite linear;
  display: inline-flex;
}