.chart-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  
  .chart-header {
    padding: 10px 15px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    
    h5 {
      margin: 0;
      color: #333;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  .chart-container {
    flex: 1;
    padding: 15px;
    overflow: auto;
    position: relative;
    
    // Ensure chart containers fill available space
    ::ng-deep canvas {
      max-width: 100%;
      max-height: 100%;
    }
  }
}

// Responsive adjustments
@media (max-width: 768px) {
  .chart-wrapper {
    .chart-header {
      padding: 8px 12px;
      
      h5 {
        font-size: 14px;
      }
    }
    
    .chart-container {
      padding: 10px;
    }
  }
}

@media (max-width: 480px) {
  .chart-wrapper {
    .chart-header {
      padding: 6px 10px;
      
      h5 {
        font-size: 13px;
      }
    }
    
    .chart-container {
      padding: 8px;
    }
  }
}