// ==========================================================================
// Navigation Components
// ==========================================================================

// Sidebar Navigation
.sidebar-nav {
  .nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.75rem;
    
    .nav-link {
      color: var(--bs-body-color);
      border-radius: var(--border-radius-sm);
      margin-bottom: 0.25rem;
      display: flex;
      align-items: center;
      transition: var(--transition-fast);
      
      i {
        width: 1.25rem;
        margin-right: 0.75rem;
        font-size: 1rem;
      }
      
      &:hover {
        background-color: var(--bs-primary-bg-subtle);
        color: var(--bs-primary);
        transform: translateX(4px);
      }
      
      &.active {
        background-color: var(--bs-primary);
        color: white;
        box-shadow: var(--box-shadow-sm);
        
        &:hover {
          background-color: var(--bs-primary);
          color: white;
          transform: none;
        }
      }
      
      // Expandable menu styling
      &[data-bs-toggle="collapse"] {
        .bi-chevron-down {
          transition: transform 0.2s ease;
        }
        
        &[aria-expanded="true"] {
          .bi-chevron-down {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
  
  // Submenu styling
  .nav-submenu {
    background-color: rgba(var(--bs-secondary-rgb), 0.05);
    border-radius: var(--border-radius-sm);
    margin: 0.25rem 0;
    padding: 0.25rem 0;
    width: 100%;
    display: block !important;
    
    // Override Bootstrap nav defaults that might cause multi-column layout
    &.nav {
      display: block !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
    }
    
    .nav-item {
      width: 100% !important;
      margin-bottom: 0;
      flex: none !important;
      display: block !important;
    }
    
    .nav-link {
      padding: 0.4rem 1rem 0.4rem 2.25rem !important;
      margin-bottom: 0 !important;
      font-size: 0.85rem !important;
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
      white-space: nowrap !important;
      border-radius: var(--border-radius-sm) !important;
      transition: all 0.2s ease !important;
      text-decoration: none !important;
      border: none !important;
      
      i {
        width: 1rem;
        margin-right: 0.5rem;
        font-size: 0.8rem;
        opacity: 0.7;
        flex-shrink: 0;
      }
      
      span {
        flex-grow: 1;
        text-align: left;
      }
      
      &:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.08);
        transform: translateX(2px);
        color: var(--bs-primary);
        
        i {
          opacity: 1;
        }
      }
      
      &.active {
        background-color: rgba(var(--bs-primary-rgb), 0.15);
        color: var(--bs-primary);
        font-weight: 500;
        
        i {
          opacity: 1;
        }
        
        // Fix readability issue when active item is hovered
        &:hover {
          background-color: var(--bs-primary);
          color: white;
          transform: translateX(2px);
          
          i {
            opacity: 1;
            color: white;
          }
        }
      }
    }
  }
}

// Top Navigation
.admin-header {
  .navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    
    img {
      margin-right: 0.5rem;
    }
  }
  
  .search-container {
    max-width: 400px;
    
    .form-control {
      border: 1px solid var(--bs-border-color);
      border-radius: var(--border-radius-sm);
      padding-right: 2.5rem;
      
      &:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
        border-color: var(--bs-primary);
      }
    }
    
    .bi-search {
      color: var(--bs-secondary);
      pointer-events: none;
    }
  }
}

// Sidebar collapse behavior
.admin-wrapper {
  &.sidebar-collapsed {
    .admin-sidebar {
      width: var(--sidebar-mini-width);
      
      .sidebar-nav {
        .nav-link {
          justify-content: center;
          padding: 0.75rem 0.5rem;
          
          span {
            display: none;
          }
          
          .badge {
            display: none;
          }
          
          .bi-chevron-down {
            display: none;
          }
          
          i {
            margin-right: 0;
            font-size: 1.1rem;
          }
        }
        
        .nav-item {
          small {
            display: none;
          }
        }
        
        // Hide submenu in collapsed state
        .collapse {
          display: none !important;
        }
        
        // Disable submenu toggle functionality in collapsed state
        .nav-link[data-bs-toggle="collapse"] {
          pointer-events: none;
        }
      }
    }
    
    .admin-main,
    .admin-footer {
      margin-left: var(--sidebar-mini-width);
    }
  }
}

// Mobile responsive
@media (max-width: 768px) {
  .admin-sidebar {
    transform: translateX(-100%);
    
    &.show {
      transform: translateX(0);
    }
    
    // Ensure submenu items are properly sized on mobile
    .nav-submenu {
      .nav-link {
        padding: 0.5rem 1rem 0.5rem 2rem !important;
        font-size: 0.9rem !important;
        
        i {
          width: 1.2rem !important;
          margin-right: 0.6rem !important;
        }
      }
    }
  }
  
  .admin-main,
  .admin-footer {
    margin-left: 0;
  }
}
