/* Responsive container */
.responsive-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Responsive chart grid */
.responsive-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* Responsive chart container */
.responsive-chart-container {
  background-color: #f8f9fa;
  padding: var(--spacing-lg);
  border-radius: 8px;
}

/* Responsive chart header */
.responsive-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

/* Responsive chart title */
.responsive-chart-title {
  margin: 0;
  font-size: var(--font-size-h3);
}

/* Responsive chart divider */
.responsive-chart-divider {
  height: 3px;
  background: linear-gradient(to right, #137752, #ADDC91);
  margin: var(--spacing-sm) 0;
}

/* Responsive chart content */
.responsive-chart-content {
  width: 100%;
}

/* Responsive chart wrapper */
.responsive-chart-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 100%; /* Makes it square */
}

/* Responsive chart canvas */
.responsive-chart-wrapper canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Media queries for responsive adjustments */
@media (max-width: 768px) {
  .responsive-container {
    padding: 0;
    width: 100%;
    max-width: 100%;
  }
  
  .responsive-chart-grid {
    grid-template-columns: 1fr;
  }
  
  .responsive-chart-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .responsive-chart-header .custom-button {
    margin-top: var(--spacing-sm);
  }
}