/* Staflow Icons (SVG sprite) */
.sf-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Fixed size variants - use consistently:
   --sm: navbar actions, small buttons
   --md: buttons, toolbar, badges
   --lg: page titles, headers
*/
.sf-icon--sm { width: 16px; height: 16px; }
.sf-icon--md { width: 20px; height: 20px; }
.sf-icon--lg { width: 28px; height: 28px; }

/* Legacy em-based variants */
.sf-icon--xs { font-size: 0.75em; }
.sf-icon--xl { font-size: 1.5em; }
.sf-icon--2x { font-size: 2em; }
.sf-icon--3x { font-size: 3em; }
.sf-icon--4x { font-size: 4em; }

/* Navbar specific icon size */
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Dashboard card icons */
.card-icon {
  width: 48px;
  height: 48px;
}

/* Button icons */
.btn-icon {
  width: 20px;
  height: 20px;
}

/* Spin animation */
.sf-icon--spin {
  animation: sf-spin 1s linear infinite;
}

@keyframes sf-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}