/* ==========================================================================
   CRM GOTD — Icon Library Styles
   Unified icon system using inline SVG
   ========================================================================== */

/* Base icon styles */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 1;
}

/* Size variants */
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* Color modifiers using CSS variables */
.icon-primary { color: var(--primary, #0ea5e9); }
.icon-secondary { color: var(--secondary, #64748b); }
.icon-success { color: var(--success, #10b981); }
.icon-warning { color: var(--warning, #f59e0b); }
.icon-danger { color: var(--danger, #ef4444); }
.icon-info { color: var(--info, #06b6d4); }
.icon-muted { color: var(--text-muted, #94a3b8); }
.icon-light { color: rgba(255, 255, 255, 0.8); }
.icon-dark { color: var(--text-primary, #1e293b); }

/* Trophy/Medal colors for leaderboard */
.icon-gold { color: #fbbf24; }
.icon-silver { color: #9ca3af; }
.icon-bronze { color: #d97706; }

/* Status colors */
.icon-online { color: #10b981; }
.icon-offline { color: #94a3b8; }
.icon-busy { color: #ef4444; }
.icon-away { color: #f59e0b; }

/* Button icon spacing */
.btn .icon {
  margin-right: 0.375rem;
}

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

/* Icon-only buttons */
.btn-icon {
  padding: 0.5rem;
  line-height: 1;
}

.btn-icon .icon {
  margin: 0;
}

/* Spinning animation for loading states */
.icon-spin {
  animation: icon-spin 1s linear infinite;
}

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

/* Pulse animation for notifications */
.icon-pulse {
  animation: icon-pulse 2s ease-in-out infinite;
}

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

/* Bounce animation */
.icon-bounce {
  animation: icon-bounce 1s ease infinite;
}

@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Icon in input fields */
.input-icon-wrapper {
  position: relative;
}

.input-icon-wrapper .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted, #94a3b8);
}

.input-icon-wrapper .icon-left {
  left: 0.75rem;
}

.input-icon-wrapper .icon-right {
  right: 0.75rem;
}

.input-icon-wrapper input.with-icon-left {
  padding-left: 2.5rem;
}

.input-icon-wrapper input.with-icon-right {
  padding-right: 2.5rem;
}

/* Badge with icon */
.badge .icon {
  margin-right: 0.25rem;
}

.badge .icon:only-child {
  margin-right: 0;
}

/* Alert icons */
.alert .icon {
  flex-shrink: 0;
  margin-right: 0.75rem;
}

/* Table action icons */
.table-actions .icon {
  cursor: pointer;
  transition: color 0.15s ease;
}

.table-actions .icon:hover {
  color: var(--primary, #0ea5e9);
}

/* Nav icons */
.nav-item .icon {
  margin-right: 0.5rem;
}

/* Dropdown icons */
.dropdown-item .icon {
  margin-right: 0.5rem;
  color: var(--text-muted, #94a3b8);
}

/* Card header icons */
.card-header .icon {
  margin-right: 0.5rem;
}

/* List icons */
.list-icon .icon {
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* Icon button group */
.icon-btn-group {
  display: flex;
  gap: 0.25rem;
}

.icon-btn-group .btn-icon {
  padding: 0.375rem;
}

/* Responsive icon sizes */
@media (max-width: 640px) {
  .icon-responsive {
    width: 16px;
    height: 16px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .icon-adaptive {
    filter: invert(1);
  }
}

/* Hover effects */
.icon-hover-scale {
  transition: transform 0.15s ease;
}

.icon-hover-scale:hover {
  transform: scale(1.1);
}

.icon-hover-rotate {
  transition: transform 0.3s ease;
}

.icon-hover-rotate:hover {
  transform: rotate(15deg);
}

/* Focus state for accessibility */
button:focus .icon,
a:focus .icon {
  outline: none;
}

/* Print styles */
@media print {
  .icon {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}