.page-wrapper {
  max-width: 100% !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Global border tuning: darker + thicker across the app */
:root {
  --card-border: rgba(0, 0, 0, 0.22);
}

.card,
.chart-panel,
.filters-panel,
.table-section,
.kpi-card,
.kpi-bar-card,
.table-card {
  border-width: 2px !important;
  border-color: var(--card-border) !important;
}

.table,
.table th,
.table td {
  border-width: 2px !important;
  border-color: var(--card-border) !important;
}

/* Reduce padding on bootstrap container variants */
.container,
.container-fluid {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Tighten card and content spacing so visuals expand */
.kpi-card-wrapper,
.chart-panel,
.kpi-card-wrapper .kpi-card,
.table-section,
.table-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure chart cards and plots align: card defines height, plot fills it */
.chart-card {
  height: 60vh !important;
}

.chart-card .card-body {
  padding: 0.5rem !important;
  height: 100% !important;
}

/* Make the Plotly plot fill the card body instead of forcing viewport height */
.chart-panel .js-plotly-plot,
.kpi-card-wrapper .js-plotly-plot {
  height: 100% !important;
}

/* Minor tweak to the filters column so it doesn't force extra width */
.filters-column {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* Ensure KPI cards align horizontally in a row and wrap on small screens */
.kpi-stack {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: stretch !important;
}

.kpi-stack > [class*="col-"] {
  flex: 1 1 0 !important;
  min-width: 200px !important;
}

.kpi-card.h-100 {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Combined Deep Dive: KPI cards should be compact (chart-panel sets min-height: 420px) */
.combined-deep-dive-kpi.chart-panel {
  min-height: 210px !important;
  padding: 12px !important;
  /* Match the filters container (Bootstrap card) border */
  border: 2px solid var(--card-border) !important;
  border-radius: 0.375rem !important;
}

.combined-deep-dive-kpi .card-body {
  padding: 0.25rem 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.combined-deep-dive-kpi h4 {
  text-align: center !important;
}

/* Keep the top navbar above sticky sidebars and dropdown menus */
.navbar,
.sticky-top {
  position: relative;
  z-index: 5000 !important;
}

/* Combined Comparison: keep Apply Filters dropdown menus on top of other controls */
#combined-comparison-filters_container .Select,
#combined-comparison-filters_container .Select-menu-outer {
  z-index: 6000 !important;
}