html, body {
  height: 100%;
  margin: 0;
}
/* The body is set as a flex column */
body {
  display: flex;
  flex-direction: column;
}
/* Container that holds all content and grows to fill available space */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Main content area (chart + table) fills remaining space */
.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}
/* Ensure the cards inside the main content fill available height */
.content-card {
  height: 100%;
}
/* Force the canvas to fill its container */
.chart-canvas {
  height: 100% !important;
}

/* Table styling for improved readability */
#card-data-list table td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
#card-data-list table tbody tr.labels-row td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #dee2e6;
}