/**
 * SVG States CSS
 * This file contains styles related to SVG icon states (default, hover, active)
 * Created on May 20, 2025
 *
 * Simple approach: Show/hide SVG icons with smooth transitions
 * - First SVG (outline version) is shown by default
 * - Second SVG (filled version) is shown on hover/active
 */

/* Fade-in animation for smooth page load */
@keyframes navIconFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   COMMON STYLES FOR ALL ICON CONTAINERS
   ========================================== */

/* Generic Styling for SVG Icon Containers */
.nav-icon,
.dashboard-card,
.missed-activity li {
  position: relative;
}

/* Animation for all icon containers */
.nav-icon {
  display: inline-block;
  width: auto;
  height: 2.5rem;
  min-height: 18px;
  animation: navIconFadeIn 0.4s ease forwards;
}

/* SVG transitions for all types */
.nav-icon svg,
.dashboard-card svg:not(.add-svg_icon), /* Exclude single centered icons - underscore */
.missed-activity li .nav-icon svg { /* Corrected selector for missed activity icons */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-icon svg {
  width: auto;
  height: 100%;
}
/* ==========================================
   NAVIGATION ICON STYLES
   ========================================== */

/* For Material Icons */
.nav-icon .material-symbols-outlined {
  transition: font-variation-settings 0.3s ease, color 0.3s ease;
  font-variation-settings: 'FILL' 0;
  color: var(--brown);
}

/* Default states */
/* First SVG (outline) - visible by default */
.nav-icon svg:nth-of-type(1) {
  opacity: 1;

  display: inline-block;
}

/* Second SVG (filled) - hidden by default */
.nav-icon svg:nth-of-type(2) {
  opacity: 0;

  display: none !important; /* Changed from inline-block to none, ADDED !important */
}

.iconSvgClass svg:nth-of-type(1) {
  opacity: 1;

  display: inline-block;
}

/* Second SVG (filled) - hidden by default */
.iconSvgClass svg:nth-of-type(2) {
  opacity: 0;

  display: none !important; /* Changed from inline-block to none, ADDED !important */
}

/* Hover and active states */
/* Hide the outline SVG */
.iconSvgClass:hover svg:nth-of-type(1) {
  opacity: 0;

  display: none; /* Added */
}

.iconSvgClass:hover svg:nth-of-type(2) {
  opacity: 1;

  display: inline-block !important; /* Added, ADDED !important */
}

/* Hover and active states */
/* Hide the outline SVG */
.nav-item:hover .nav-icon svg:nth-of-type(1),
.nav-item.active .nav-icon svg:nth-of-type(1) {
  opacity: 0;

  display: none; /* Added */
}

/* Show the filled SVG */
.nav-item:hover .nav-icon svg:nth-of-type(2),
.nav-item.active .nav-icon svg:nth-of-type(2) {
  opacity: 1;

  display: inline-block !important; /* Added, ADDED !important */
}

/* Material Icons hover/active state */
.nav-item:hover .nav-icon .material-symbols-outlined,
.nav-item.active .nav-icon .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
  color: var(--color-text-primary);
}

/* Focus state for accessibility */
.nav-item:focus-within .nav-icon svg:nth-of-type(1) {
  opacity: 0;

  display: none; /* Added */
}

.nav-item:focus-within .nav-icon svg:nth-of-type(2) {
  opacity: 1;

  display: inline-block !important; /* Added, ADDED !important */
}

.nav-item:focus-within .nav-icon .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
  color: var(--color-text-primary);
}

/* Add keyboard focus indicator */
.nav-item:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Text styling */
.nav-title {
  font-weight: 500;
  color: var(--brown);
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.nav-item:hover .nav-title,
.nav-item.active .nav-title,
.nav-item:focus-within .nav-title {
  color: var(--color-text-primary);
  font-weight: 600;
}



.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  transform: scale(1.05);
}

/* Fix for Firefox and other browsers that might have issues with absolute positioning - REMOVED */

/* Cross-browser compatibility for other browsers */
@supports not (-moz-appearance: none) {
  .nav-icon svg:nth-of-type(1),
  .nav-icon svg:nth-of-type(2) {
    will-change: opacity;
    backface-visibility: hidden;
  }
}

/* Adjustments for mobile */
@media (max-width: 767px) {
  .nav-item:hover .nav-icon,
  .nav-item.active .nav-icon {
    transform: scale(1.02);
  }

  .nav-icon {
    padding: 2px;
  }

  /* Faster transitions on mobile for better perceived performance */
  .nav-icon svg {
    transition: opacity 0.2s ease;
  }

  .nav-title {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Touch-specific enhancements */
  @media (pointer: coarse) {
    /* Slightly larger touch target */
    .nav-icon {
      min-width: 28px;
      min-height: 28px;
    }

    /* Subtle feedback for touch devices */
    .nav-item:active .nav-icon {
      transform: scale(0.95);
      transition: transform 0.1s ease;
    }
  }
}

/* High contrast mode support for accessibility */
@media (forced-colors: active) {
  .nav-icon svg {
    forced-color-adjust: none;
  }

  .nav-icon svg:nth-of-type(1) {
    fill: ButtonText !important;
  }

  .nav-item:hover .nav-icon svg:nth-of-type(2),
  .nav-item.active .nav-icon svg:nth-of-type(2),
  .nav-item:focus-within .nav-icon svg:nth-of-type(2) {
    fill: Highlight !important;
  }

  .nav-title {
    color: ButtonText;
  }

  .nav-item:hover .nav-title,
  .nav-item.active .nav-title,
  .nav-item:focus-within .nav-title {
    color: Highlight;
  }

  .nav-item:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-icon {
    animation: none !important;
  }

  .nav-icon svg,
  .nav-title,
  .nav-icon .material-symbols-outlined {
    transition-duration: 0.1s !important;
  }

  .nav-item:hover .nav-icon,
  .nav-item.active .nav-icon {
    transform: none !important;
  }
}

/* ==========================================
   DASHBOARD CARD ICON STYLES
   ========================================== */

/* Position SVGs in dashboard cards - REMOVED generic absolute positioning */

/* First SVG (outline) in dashboard cards - visible by default */
.dashboard-card svg:nth-of-type(1):not(.add-svg_icon) { /* underscore */
  opacity: 1;

  display: block; /* Added */
}

/* Second SVG (filled) in dashboard cards - hidden by default */
.dashboard-card svg:nth-of-type(2):not(.add-svg_icon) { /* underscore */
  opacity: 0;

  display: none !important; /* Added, ADDED !important */
}

/* Hover and active states for dashboard cards */
.dashboard-card:hover svg:nth-of-type(1):not(.add-svg_icon), /* underscore */
.dashboard-card.active svg:nth-of-type(1):not(.add-svg_icon) { /* underscore */
  opacity: 0;

  display: none; /* Added */
}

.dashboard-card:hover svg:nth-of-type(2):not(.add-svg_icon), /* underscore */
.dashboard-card.active svg:nth-of-type(2):not(.add-svg_icon) { /* underscore */
  opacity: 1;

  display: block !important; /* Added, ADDED !important */
  transform: scale(1.08); /* Simplified transform, centering by margin */
}

/* Card content styling */
.card-content {
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--brown);
}

/* ==========================================
   MISSED ACTIVITY ICON STYLES
   ========================================== */
/* Base styling for SVGs within missed activity list items can be added here if needed,
   e.g., vertical-align: middle; or specific margins/padding.
   The default display/opacity for SVGs within .nav-icon is handled by the general .nav-icon rules. */

/* Hover, Active, Focus states for icons within missed activity list items */
.missed-activity li:hover .nav-icon svg:nth-of-type(1),
.pin-button:hover .nav-icon svg:nth-of-type(1),
.chatEvent:hover .nav-icon svg:nth-of-type(1),
.missed-activity li.active .nav-icon svg:nth-of-type(1),
.pin-button.active .nav-icon svg:nth-of-type(1),
.chatEvent.active .nav-icon svg:nth-of-type(1),
.missed-activity li:focus-within .nav-icon svg:nth-of-type(1),
.chatEvent li:focus-within .nav-icon svg:nth-of-type(1),
.pin-button:focus-within .nav-icon svg:nth-of-type(1) {
  opacity: 0;
  display: none;
}

.missed-activity li:hover .nav-icon svg:nth-of-type(2),
.pin-button:hover .nav-icon svg:nth-of-type(2),
.chatEvent:hover .nav-icon svg:nth-of-type(2),
.missed-activity li.active .nav-icon svg:nth-of-type(2),
.pin-button.active .nav-icon svg:nth-of-type(2),
.chatEvent.active .nav-icon svg:nth-of-type(2),
.missed-activity li:focus-within .nav-icon svg:nth-of-type(2),
.chatEvent li:focus-within .nav-icon svg:nth-of-type(2),
.pin-button:focus-within .nav-icon svg:nth-of-type(2) {
  opacity: 1;
  display: inline-block !important; /* ADDED !important */
}

/* Dark mode styling for card content text */
.card-content {
  color: var(--brown);
}

.dashboard-card:hover .card-content {
  color: var(--color-text-primary);
}

/* Accessibility & Responsive Styles for Missed Activity (mirroring nav-item where applicable) */

/* Keyboard focus indicator for list items if they are interactive */
.missed-activity li:focus-visible {
  outline: 2px solid var(--color-info); /* Or use Highlight for forced-colors mode */
  outline-offset: 2px;
  border-radius: 4px;
}

/* High contrast mode support for Missed Activity icons */
@media (forced-colors: active) {
  .missed-activity li .nav-icon svg { /* Corrected selector */
    forced-color-adjust: none;
  }
  .missed-activity li .nav-icon svg:nth-of-type(1) { /* Corrected selector */
    fill: ButtonText !important;
  }
  .missed-activity li:hover .nav-icon svg:nth-of-type(2), /* Corrected selector */
  .missed-activity li.active .nav-icon svg:nth-of-type(2), /* Corrected selector */
  .missed-activity li:focus-within .nav-icon svg:nth-of-type(2) { /* Corrected selector */
    fill: Highlight !important;
  }
  .missed-activity li:focus-visible {
    outline-color: Highlight;
  }
}

/* Reduced motion for Missed Activity icons */
@media (prefers-reduced-motion: reduce) {
  .missed-activity li .nav-icon svg { /* Corrected selector */
    transition-duration: 0.1s !important;
    transform: none !important; /* Keep to prevent any accidental transforms on SVGs */
  }
  .missed-activity li:hover .nav-icon svg:nth-of-type(2), /* Corrected selector */
  .missed-activity li.active .nav-icon svg:nth-of-type(2), /* Corrected selector */
  .missed-activity li:focus-within .nav-icon svg:nth-of-type(2) { /* Corrected selector */
    transform: none !important; /* Ensure no transform on the appearing SVG */
  }
}