/* Charts */
#charts-container {
  flex-grow: 1; /* Expand to fill available space */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  width: 100%;
  height: calc(80vh - 100px); /* Adjust based on header/nav height */
  gap: 30px;
}

/* Containers */
#donut-container {
  width: 100%;
  height: 50%; /* 50% of #charts-container */
}

#bar-container {
  width: 100%;
  height: 50%;
  max-width: 100%;
  display: flex; /* Enable Flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically (optional) */
}

/* Donut charts */
#donut-expenses-container,
#donut-income-container {
  width: 40%;
  height: 100%;
  display: flex; /* Enable Flexbox */
  flex-direction: column;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically (optional) */
}

#summary-container {
  width: 20%;
  height: 100%;
  display: flex; /* Enable Flexbox */
  flex-direction: column; /* Stack summary-input divs vertically */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically (optional) */
}

.summary-input {
  width: 100%;
  height: 15%;
  justify-content: center;
  text-align: center;
}

.summary-value {
  font-weight: bold;
  color: #000000; /* Black, or adjust as needed */
}

/* Canvas */
#bar-chart {
  /* Ensure canvas fits but respects centering */
  width: 100%; /* Full width of container */
  height: 100%; /* Full height of container */
  max-width: 95%; /* Prevent overflow */
}