// Bar Chart Component Styles
:host {
  display: block;
  height: 100%;
  width: 100%;
}

.bar-chart-container {
  position: relative;
  height: 100%;
  width: 100%;
}

canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

// Responsive design for chart container
@media (max-width: 768px) {
  .bar-chart-container {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .bar-chart-container {
    height: 250px;
  }
}