/* =====================================================
 * ICONS SYSTEM - BLUEPRINT NOIR
 * Unified icon sizing across all components
 * ===================================================== */

/* ===== NAVIGATION ICONS ===== */

/* User menu icons */
.nav-user-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  transition: transform var(--transition-quick);
}

.nav-dropdown-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* ===== BREADCRUMB ICONS ===== */

.breadcrumb-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.breadcrumb-chevron,
.breadcrumb-separator svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ===== BADGE & STATUS ICONS ===== */

.badge-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.status-check {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* ===== FORM & INPUT ICONS ===== */

.input-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.search-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* ===== NAVIGATION & ACTION ICONS ===== */

.back-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Admin back link - needs specific selector for SVG inside link */
.admin-back-link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* ===== DANGER & WARNING ICONS ===== */

.danger-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  color: var(--error, #EF4444);
}

.danger-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== EMPTY STATE ICONS ===== */

.empty-state-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  color: rgba(212, 165, 116, 0.3);
}

.empty-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.empty-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

/* Large empty state icons */
.empty-icon-wrapper .empty-icon {
  width: 5rem;
  height: 5rem;
}

/* ===== FEATURE & MODULE ICONS ===== */

.feature-icon {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.module-start-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ===== MODAL ICONS ===== */

.modal-icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  color: var(--accent-copper, #D4A574);
}

/* ===== FLASH MESSAGE ICONS ===== */

.flash-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ===== TIMELINE & MISC ICONS ===== */

.timeline-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.placeholder-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--text-muted, #6B7280);
}

.thumb-icon-placeholder {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--text-muted, #6B7280);
  transition: all var(--transition-quick);
}

.thumb-icon-placeholder.active {
  color: var(--accent-copper, #D4A574);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  /* Slightly smaller icons on mobile for better density */
  .nav-user-icon {
    width: 1rem;
    height: 1rem;
  }

  .breadcrumb-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .breadcrumb-chevron {
    width: 0.875rem;
    height: 0.875rem;
  }

  .empty-state-icon,
  .empty-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .empty-icon-wrapper .empty-icon {
    width: 4rem;
    height: 4rem;
  }

  .danger-icon {
    width: 2rem;
    height: 2rem;
  }

  .modal-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 640px) {
  .feature-icon {
    width: 100%;
    height: 100%;
  }

  .flash-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}