/* ============================================================
   SVG Icon System - Lucide Icons (inline SVG)
   Replace all emoji icons with consistent SVG icons
   ============================================================ */

/* Base icon styles */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xs { width: 14px; height: 14px; }
.icon-xl { width: 32px; height: 32px; }

/* Icon inside stat cards */
.stat-icon .icon {
  width: 24px;
  height: 24px;
}

/* Icon inside nav items */
.nav-item .nav-icon .icon {
  width: 18px;
  height: 18px;
}

/* Icon inside buttons */
.btn .icon {
  width: 16px;
  height: 16px;
}

/* Icon inside empty state */
.empty-state .icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

/* Icon inside notification items */
.notification-icon .icon {
  width: 18px;
  height: 18px;
}

/* Icon inside section titles */
.section-title .icon {
  width: 20px;
  height: 20px;
}

/* Icon helper for logo */
.logo-icon .icon {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

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

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

/* Toast icons */
.toast .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}