/* ===========================================
   FontAwesome Integration - TRAC Portfolio
   Icon utilities and overrides
   =========================================== */

/* Icon base alignment */
.fa-sharp, .fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-thin, .fa-duotone {
  vertical-align: -0.125em;
}

/* Icon sizing scale */
:root {
  --icon-xs: 0.75rem;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-xl: 2rem;
  --icon-2xl: 2.5rem;
}

/* Size classes */
.icon-xs { font-size: var(--icon-xs) !important; }
.icon-sm { font-size: var(--icon-sm) !important; }
.icon-md { font-size: var(--icon-md) !important; }
.icon-lg { font-size: var(--icon-lg) !important; }
.icon-xl { font-size: var(--icon-xl) !important; }
.icon-2xl { font-size: var(--icon-2xl) !important; }

/* Semantic colors */
.icon-primary { color: var(--admin-primary, #3b82f6) !important; }
.icon-success { color: var(--admin-success, #10b981) !important; }
.icon-danger { color: var(--admin-danger, #ef4444) !important; }
.icon-warning { color: var(--admin-warning, #f59e0b) !important; }
.icon-muted { color: var(--admin-text-muted, #666) !important; }
.icon-inherit { color: inherit !important; }

/* Button icons */
.btn i,
.btn svg {
  font-size: 1.125em;
  line-height: 1;
}
.btn i:first-child,
.btn svg:first-child {
  margin-right: 0.5em;
}
.btn i:last-child:not(:first-child),
.btn svg:last-child:not(:first-child) {
  margin-left: 0.5em;
}

/* Icon-only buttons */
.btn-icon i {
  font-size: var(--icon-md);
  margin: 0 !important;
  transition: transform 150ms ease;
}
.btn-icon:hover i {
  transform: scale(1.15);
}

/* Stat card icons */
.stat-icon i {
  font-size: var(--icon-xl);
}

/* Sidebar icons */
.sidebar-link i {
  font-size: var(--icon-md);
  width: 1.5em;
  text-align: center;
  flex-shrink: 0;
}

/* Theme toggle icons */
.theme-toggle i,
.admin-theme-toggle i {
  position: absolute;
  font-size: 1.125rem;
  transition: opacity 300ms ease,
              transform 300ms ease,
              rotate 300ms ease;
}

/* Dark theme toggle states */
[data-theme="dark"] .theme-toggle .fa-moon,
[data-theme="dark"] .admin-theme-toggle .fa-moon {
  opacity: 1;
  transform: scale(1);
  rotate: 0deg;
}
[data-theme="dark"] .theme-toggle .fa-sun,
[data-theme="dark"] .admin-theme-toggle .fa-sun {
  opacity: 0;
  transform: scale(0.5);
  rotate: -180deg;
}
[data-theme="dark"] .theme-toggle:hover .fa-moon,
[data-theme="dark"] .admin-theme-toggle:hover .fa-moon {
  opacity: 0;
  transform: scale(0.5);
  rotate: 180deg;
}
[data-theme="dark"] .theme-toggle:hover .fa-sun,
[data-theme="dark"] .admin-theme-toggle:hover .fa-sun {
  opacity: 1;
  transform: scale(1);
  rotate: 0deg;
}

/* Light theme toggle states */
[data-theme="light"] .theme-toggle .fa-sun,
[data-theme="light"] .admin-theme-toggle .fa-sun {
  opacity: 1;
  transform: scale(1);
  rotate: 0deg;
}
[data-theme="light"] .theme-toggle .fa-moon,
[data-theme="light"] .admin-theme-toggle .fa-moon {
  opacity: 0;
  transform: scale(0.5);
  rotate: -180deg;
}
[data-theme="light"] .theme-toggle:hover .fa-sun,
[data-theme="light"] .admin-theme-toggle:hover .fa-sun {
  opacity: 0;
  transform: scale(0.5);
  rotate: 180deg;
}
[data-theme="light"] .theme-toggle:hover .fa-moon,
[data-theme="light"] .admin-theme-toggle:hover .fa-moon {
  opacity: 1;
  transform: scale(1);
  rotate: 0deg;
}

/* Loading states */
.btn.is-loading i:not(.fa-spinner),
.btn.is-loading i:not(.fa-circle-notch) {
  display: none;
}
.btn.is-loading .fa-spinner,
.btn.is-loading .fa-circle-notch {
  display: inline-block !important;
}
.btn .fa-spinner,
.btn .fa-circle-notch {
  display: none;
}

/* Social icons */
.nav-icons i,
.contact-social i {
  font-size: 1.25rem;
  transition: transform 150ms ease, opacity 150ms ease;
}
.nav-icons a:hover i,
.contact-social a:hover i {
  transform: scale(1.15);
}

/* Alert icons */
.alert i {
  font-size: var(--icon-lg);
  flex-shrink: 0;
}

/* Table action icons */
.table-actions .btn-icon i {
  font-size: var(--icon-sm);
}

/* Media controls - sizes handled in style.css */

/* Lightbox navigation */
.lightbox-nav i,
.lightbox-close i {
  font-size: var(--icon-lg);
}

/* Carousel navigation - sizes handled in style.css */

/* Gallery editor icons */
.grid-item-actions i {
  font-size: var(--icon-md);
}
.library-item-delete i {
  font-size: var(--icon-xs);
}
.gallery-upload-btn i {
  font-size: var(--icon-sm);
}

/* Empty states */
.empty-state i {
  font-size: 3rem;
  color: var(--admin-text-muted, #666);
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* Hover color effects */
@media (hover: hover) {
  .btn-icon:hover .icon-danger { color: #dc2626 !important; }
  .btn-icon:hover .icon-primary { color: #2563eb !important; }
  .btn-icon:hover .icon-success { color: #059669 !important; }
}

/* Animation enhancements */
.fa-spin-pulse {
  animation: fa-spin 1s steps(8) infinite;
}

/* Custom success animation */
@keyframes iconPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
.icon-pop {
  animation: iconPop 0.4s ease-out forwards;
}

/* Volume button specific - toggle handled in style.css */