/**
 * Here Attendance App - SVG Icon System
 * 
 * Usage:
 * <svg class="icon"><use href="img/icons.svg#icon-name"></use></svg>
 * <svg class="icon icon-sm"><use href="img/icons.svg#icon-name"></use></svg>
 * <svg class="icon icon-lg text-primary"><use href="img/icons.svg#icon-name"></use></svg>
 */

/* Base icon styles */
.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.15em;
  fill: currentColor;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Size variants */
.icon-xs {
  width: 0.875em;
  height: 0.875em;
}

.icon-sm {
  width: 1em;
  height: 1em;
}

.icon-md {
  width: 1.5em;
  height: 1.5em;
}

.icon-lg {
  width: 2em;
  height: 2em;
}

.icon-xl {
  width: 2.5em;
  height: 2.5em;
}

.icon-2xl {
  width: 3em;
  height: 3em;
}

.icon-3xl {
  width: 4em;
  height: 4em;
}

/* Fixed pixel sizes for specific use cases */
.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-32 { width: 32px; height: 32px; }
.icon-40 { width: 40px; height: 40px; }
.icon-48 { width: 48px; height: 48px; }
.icon-64 { width: 64px; height: 64px; }

/* Color variants using CSS custom properties */
.icon-primary { color: var(--primary-500); }
.icon-secondary { color: var(--text-secondary); }
.icon-tertiary { color: var(--text-tertiary); }
.icon-success { color: var(--success-500); }
.icon-warning { color: var(--warning-500); }
.icon-danger { color: var(--danger-500); }
.icon-info { color: var(--info-500); }
.icon-inverse { color: var(--text-inverse); }

/* Teacher theme colors */
.icon-teacher { color: var(--teacher-primary, #7c3aed); }
.icon-teacher-light { color: var(--teacher-primary-light, #a78bfa); }

/* Student theme colors */
.icon-student { color: var(--student-primary, #0066cc); }
.icon-student-light { color: var(--student-primary-light, #3b82f6); }

/* Interactive states */
.icon-interactive {
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.icon-interactive:hover {
  opacity: 0.8;
}

.icon-interactive:active {
  transform: scale(0.95);
}

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

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

/* Pulse animation for live indicators */
.icon-pulse {
  animation: icon-pulse 1.5s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Bounce animation for notifications */
.icon-bounce {
  animation: icon-bounce 0.5s ease;
}

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

/* Navigation specific styles */
.glass-nav-icon .icon {
  width: 24px;
  height: 24px;
}

.nav-icon .icon {
  width: 20px;
  height: 20px;
}

/* Button icon alignment */
.btn .icon {
  margin-inline-end: 0.5em;
}

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

/* RTL support - flip directional icons */
[dir="rtl"] .icon-flip-rtl {
  transform: scaleX(-1);
}

/* Stat card icons */
.stat-icon .icon {
  width: 32px;
  height: 32px;
}

/* Hero section icons */
.hero-icon .icon {
  width: 48px;
  height: 48px;
}

/* Card action icons */
.card-action .icon {
  width: 18px;
  height: 18px;
}

/* Form input icons */
.input-icon .icon {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}

/* Toast icons */
.toast-icon .icon {
  width: 20px;
  height: 20px;
}

/* Status badge icons */
.badge .icon {
  width: 14px;
  height: 14px;
  margin-inline-end: 0.25em;
}

/* Empty state icons */
.empty-state-icon .icon {
  width: 64px;
  height: 64px;
  color: var(--text-tertiary);
  opacity: 0.5;
}

/* Tab icons */
.tab-icon .icon {
  width: 18px;
  height: 18px;
  margin-inline-end: 0.5em;
}

/* Modal close icon */
.modal-close .icon {
  width: 24px;
  height: 24px;
}

/* Accessibility - respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .icon-spin,
  .icon-pulse,
  .icon-bounce {
    animation: none;
  }
  
  .icon-interactive {
    transition: none;
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .icon {
  /* Icons inherit color, but ensure good contrast */
}

[data-theme="dark"] .icon-tertiary {
  color: var(--neutral-400);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .icon {
    stroke-width: 2.5;
  }
}