/**
 * Icon System - Unified Font Awesome Styling
 * 
 * This file provides consistent sizing, spacing, and styling for all Font Awesome icons
 * used throughout the admin panel. All icons should use these utility classes for
 * pixel-perfect consistency.
 */

/* Base Icon Sizing */
.icon-xs {
  font-size: 0.75rem;
  line-height: 1;
}

.icon-sm {
  font-size: 0.875rem;
  line-height: 1;
}

.icon-md {
  font-size: 1rem;
  line-height: 1;
}

.icon-lg {
  font-size: 1.125rem;
  line-height: 1;
}

.icon-xl {
  font-size: 1.25rem;
  line-height: 1;
}

.icon-2x {
  font-size: 1.5rem;
  line-height: 1;
}

/* Icon Spacing */
.icon-spaced {
  margin-right: 0.5rem;
}

.icon-spaced-left {
  margin-left: 0.5rem;
}

.icon-spaced-both {
  margin: 0 0.5rem;
}

.icon-gap-sm {
  margin-right: 0.25rem;
}

.icon-gap-md {
  margin-right: 0.5rem;
}

.icon-gap-lg {
  margin-right: 0.75rem;
}

/* Icon Alignment */
.icon-align-middle {
  vertical-align: middle;
}

.icon-align-text-bottom {
  vertical-align: text-bottom;
}

.icon-align-baseline {
  vertical-align: baseline;
}

/* Icon Colors */
.icon-primary {
  color: var(--primary, #f59e0b);
}

.icon-success {
  color: var(--success, #22c55e);
}

.icon-danger {
  color: var(--danger, #ef4444);
}

.icon-warning {
  color: var(--warning, #f97316);
}

.icon-info {
  color: var(--info, #3b82f6);
}

.icon-muted {
  color: var(--t2, #6b7280);
}

/* Icon in Buttons */
.btn i {
  vertical-align: middle;
  margin-right: 0.375rem;
}

.btn i:last-child {
  margin-right: 0;
}

.btn i:only-child {
  margin-right: 0;
}

/* Icon in Card Titles */
.card-title i {
  margin-right: 0.5rem;
  vertical-align: middle;
  color: var(--primary, #f59e0b);
}

/* Icon in Alerts */
.alert i {
  margin-right: 0.5rem;
  vertical-align: middle;
}

.alert i:first-child {
  margin-right: 0.5rem;
}

/* Icon in Table Cells */
td i {
  vertical-align: middle;
}

/* Icon in Status Badges */
.badge i {
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* Icon in Form Labels */
.form-label i {
  margin-right: 0.375rem;
  vertical-align: middle;
  color: var(--t2, #6b7280);
}

/* Icon in Widget Cards */
.widget-label i {
  margin-right: 0.375rem;
  vertical-align: middle;
}

.stat-lbl i {
  margin-right: 0.375rem;
  vertical-align: middle;
}

/* Icon Background Cards */
.stat-card-bg-icon {
  font-size: 2rem;
  opacity: 0.15;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

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

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

.icon-pulse {
  animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Icon Hover Effects */
.icon-hover-grow:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.icon-hover-shrink:hover {
  transform: scale(0.9);
  transition: transform 0.2s ease;
}

/* Icon Groups */
.icon-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.icon-group i {
  vertical-align: middle;
}

/* Responsive Icon Sizing */
@media (max-width: 768px) {
  .icon-lg {
    font-size: 1rem;
  }
  
  .icon-xl {
    font-size: 1.125rem;
  }
  
  .icon-2x {
    font-size: 1.25rem;
  }
}

/* Dark Theme Icon Adjustments */
[data-theme="dark"] .icon-muted {
  color: var(--t2, #9ca3af);
}

[data-theme="dark"] .card-title i {
  color: var(--primary, #fbbf24);
}