/* Chart container and header styles */

.chart-container {
  background-color: var(--color-bg-panel);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--box-shadow-heavy);
  color: var(--color-text-light);
  height: 280px;
  width: 240px;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(var(--color-overlay), var(--color-overlay)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjMmMzMTM2Ij48L3JlY3Q+PHBhdGggZD0iTS0xLjY3IDguMDdMMTAgMEwxMC4zMyAxLjU1TC0xLjMzIDkuNjJ6TTEwIDMwTDIxLjY3IDIxLjkzTDIxLjMzIDIwLjM4TDEwIDI4LjQ1ek0yMC4zMyAxLjU1TDIxLjY3IDAuOTNMMzAuMzMgNS45M0wyOS42NyA3LjQ4ek0yOS42NyAyMi41MkwzMC4zMyAyNC4wN0wyMS42NyAyOS4wN0wyMC4zMyAyOC40NXpNMiA4LjA4TDggNS4xOUw3LjY3IDMuNjRMMC4zMyA2LjUyek04IDI0LjgxTDIgMjEuOTJMMCAyMy4wOEw3LjY3IDI2LjM2ek0yMiA1LjE5TDI4IDguMDhMMjkuNjcgNi41MkwyMi4zMyAzLjY0ek0yOCAyMS45MkwyMiAyNC44MUwyMi4zMyAyNi4zNkwyOS42NyAyMy4wOHpNMTAgMEwxNiA0LjA0TDE1LjY3IDUuNTlMMTAgMS41NXpNMCAxMy4wOEwxMCAxMC4xOUw5LjY3IDguNjRMLTEuNjcgMTEuNTJ6TTEwIDE5LjgxTDE2IDE1Ljc3TDE0IDUuMTlMMTAgNy4xNHpNMjAgNy4xNEwyNiA1LjE5TDI0IDE1Ljc3TDIwIDE5Ljgxek0zMCAxMy4wOEwzMS42NyAxMS41MkwyMC4zMyA4LjY0TDIwIDEwLjE5ek0xMCAyOC40NUwxNS42NyAyNC40MUwxNiAyMi44NkwxMCAyNi45MXpNMCAxNi45Mkw5LjY3IDIxLjM2TDEwIDE5LjgxTDAuMzMgMTUuMzh6TTIwIDE5LjgxTDEwIDE5LjgxTDEwIDIxLjM2TDIwIDIxLjM2ek0yMC4zMyAyMS4zNkwzMC4zMyAxNi45MkwzMCAxNS4zOEwyMC4zMyAxOS44MXpNMjAgMjguNDVMMjQuMzMgMjYuMzZMMjYgMjQuODFMMjAgMjYuOTF6IiBmaWxsPSJ0cmFuc3BhcmVudCIgc3Ryb2tlPSIjM2YzYzQzIiBzdHJva2Utd2lkdGg9IjEiPjwvcGF0aD48L3N2Zz4=');
  background-size: auto;
}

.chart-header {
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-panel-overlay);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
  text-align: center;
}

.chart-header h4 {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-normal);
  text-shadow: var(--text-shadow-primary);
  font-size: var(--font-size-base);
  text-transform: uppercase;
}

.chart-content {
  padding: var(--spacing-lg);
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#detectionChart, #functionChart {
  width: 100% !important;
  height: 100% !important;
  max-width: 270px;
  max-height: 200px;
}