/* ========================================================
   INLINE SVG ICONS
   ========================================================
   Replaces Font Awesome. Glyph geometry lives in the sprite
   (templates/partials/_icon_sprite.html); everything about how an icon
   LOOKS is set here, so restyling the whole icon set is a one-file change.

   Sized in `em` so an icon inherits the font-size of whatever contains it —
   exactly how the Font Awesome icons behaved, which means existing
   `font-size` rules on icon containers keep working unchanged.
   ======================================================== */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;   /* optical centring against the text baseline */
  flex-shrink: 0;             /* never squash inside a flex row */

  /* Lucide icons are stroked, not filled. These live on the class rather
     than on each <symbol> so one change restyles all of them. */
  fill: none;
  stroke: currentColor;       /* inherits colour from the text around it */
  stroke-width: 1.75;         /* slightly lighter than Lucide's default 2,
                                 which is drawn for 24px and reads heavy at
                                 the 13-16px sizes used through this UI */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Solid-ish emphasis for status glyphs that need to read at a glance
   (toast icons, inventory status). Thicker stroke, not a fill, so the
   icon stays legible at 12-14px. */
.icon-bold { stroke-width: 2.25; }

/* Explicit size steps. Prefer these over ad-hoc font-size on the parent. */
.icon-sm { width: 0.875em; height: 0.875em; }
.icon-lg { width: 1.25em; height: 1.25em; }
.icon-xl { width: 1.5em; height: 1.5em; }

/* ========================================================
   SPIN (replaces Font Awesome's fa-spin)
   ======================================================== */
.icon-spin {
  animation: iconSpin 0.9s linear infinite;
  transform-origin: center;
}

@keyframes iconSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep a slow spin rather than freezing entirely — a motionless spinner
     next to a disabled "Processing..." button reads as a hung form. */
  .icon-spin { animation-duration: 2.4s; }
}

/* ========================================================
   CONTEXT TWEAKS
   ======================================================== */
/* Icons inside buttons sit next to a text label; the gap is owned by the
   button's flex layout, so the icon just needs to not add its own. */
.btn .icon, .btn-action .icon, .nav-logout .icon { margin: 0; }

/* The large decorative icons on empty states and error pages. */
.empty-state .icon { width: 48px; height: 48px; stroke-width: 1.25; opacity: 0.55; }
.error-icon.icon   { width: 56px; height: 56px; stroke-width: 1.25; }

/* KPI icon boxes size their glyph via font-size on .kpi-icon-box. */
.kpi-icon-box .icon { width: 1.1em; height: 1.1em; }