:host {
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.level-navigation-container {
  .nav-button {
    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    &:active:not(:disabled) {
      transform: translateY(0);
    }
  }
}

.level-indicators {
  .level-indicator {
    &:hover {
      transform: scale(1.1);
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    
    &.active {
      transform: scale(1.05);
      box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
    }
  }
}

.chart-container {
  :host ::ng-deep {
    .org-chart-node {
      &:hover {
        z-index: 10;
      }
    }
  }
}

// Responsive design
@media (max-width: 768px) {
  .level-navigation-container {
    flex-direction: column;
    gap: 10px;
    
    .level-indicators {
      order: -1;
    }
  }
  
  .current-level-info h3 {
    font-size: 14px;
    
    span {
      display: block;
      margin-left: 0 !important;
      margin-top: 5px;
    }
  }
}

// Animation for level transitions
.chart-container {
  transition: opacity 0.3s ease;
  
  &.loading {
    opacity: 0.5;
  }
}