/* Parent grid: left (charts) / right (tables) */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.quarterly-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: stretch;       /* match column heights */
  grid-auto-rows: 1fr;        /* helps stretching on tall content */
}

/* Left column: 2x2 compact charts */
.quarterly-left {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}

/* Chart cards */
.chart-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  border: 1px solid #e5e7eb;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Right column: grid with two tables, minimal gap */
.quarterly-right {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr); /* title, table, title, table */
  row-gap: 8px;        /* tighter vertical spacing */
  min-height: 0;
}

/* Make both tables scroll inside their row instead of stretching the card */
.quarterly-right .dash-table-container,
.quarterly-right .dash-table-container .dash-spreadsheet-container {
  min-height: 0 !important;
  height: auto !important;
  max-height: 260px;   /* adjust if you want a bit more/less */
  overflow: auto;      /* scroll inside the row */
}

/* Tighter title spacing inside the right card */
.chart-card__title,
.quarterly-right .chart-card_title {
  margin: 4px 0 4px 0 !important;
}

/* Keep charts taller as set earlier */
.compact-graph { height: 260px !important; }


/* Filters */
#quarterly-filters.filters-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  background-color: #fff;
  color: #000;
  box-shadow: 0 2px 5px #808080;
  position: relative;
  z-index: 5;
}

.filters-label { font-weight: 600; }

/* Responsive */
@media (max-width: 1200px) {
  .quarterly-grid { grid-template-columns: 360px 1fr; }
}
@media (max-width: 980px) {
  .quarterly-grid { grid-template-columns: 1fr; }
  .quarterly-left { grid-template-rows: none; }
}

/* Ensure main content can shrink when sidebar toggles */
#page-content { min-width: 0; }