#controlsBar { --bs-gutter-x: 1rem; }
#trendChart, #rankChart, #selectedTrendChart { min-height: 300px; }
.trend-chart-tile #selectedTrendChart { min-height: 340px !important; height: 340px !important; padding-bottom: 20px; box-sizing: border-box; }
@media (max-width: 575.98px) {
  #trendChart, #rankChart, #selectedTrendChart { height: 250px !important; }
}
#dataTable {
  padding: 1rem 1.5rem;
}

/* KPI cards styling specific to LA Metrics page - match dashboard widgets */
#la-metrics .kpi-card {
  background: #000000 !important; /* black like dashboard */
  color: #ffffff;
  border: none;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
}
#la-metrics .kpi-card .card-body {
  padding: 0.5rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
#la-metrics .kpi-card .fs-5 {
  font-size: 2.5rem !important; /* same as dashboard widgets */
  font-weight: bold !important;
  color: #fd7e14; /* orange like dashboard - no !important to allow JS override */
  margin-bottom: 8px !important;
}

/* Allow JavaScript to override colors with inline styles */
#la-metrics .kpi-card .fs-5[style*="color"] {
  color: inherit !important;
}
#la-metrics .kpi-card .text-muted {
  color: #ffffff !important; /* white subtext */
  font-size: 0.8rem !important;
  line-height: 1.2;
}
/* LA Metrics KPIs now use Bootstrap grid like dashboard widgets */
#la-metrics #kpiRow .col-md-2 {
  /* Use Bootstrap's natural col-md-2 width (1/6 of container) */
}
#la-metrics #kpiRow .kpi-card {
  width: 100% !important; /* fill the column */
  height: 160px !important; /* same height as dashboard widgets */
  min-height: 160px !important;
  max-height: 160px !important;
}