/* Monthly context and totals share the compact spreadsheet visual language. */
.sales-statistics-page .monthly-report-heading {
  --monthly-label: #536782;
  --monthly-value: #304f7a;
  background: #f5f8fd;
  gap: 8px 24px;
  padding: 9px 12px;
}

.monthly-report-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.monthly-report-context > .whitespace-nowrap {
  color: var(--monthly-label);
  background: transparent;
  border-color: #dce5f2;
  border-radius: 4px;
  font-weight: 500;
}

.monthly-report-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  font-size: var(--sales-page-font-size, 13px);
  line-height: 20px;
}

.monthly-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}

.monthly-metric + .monthly-metric {
  border-left: 1px solid #d8e2ef;
  margin-left: 16px;
  padding-left: 16px;
}

.monthly-metric-label { color: var(--monthly-label); font-weight: 400; }
.monthly-metric strong { color: var(--monthly-value); font-weight: 600; font-variant-numeric: tabular-nums; }
.monthly-metric-primary strong { color: #2459b8; }

@media (max-width: 767px) {
  .sales-statistics-page .monthly-report-heading { gap: 8px; padding: 8px 10px; }
  .monthly-report-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; width: 100%; }
  .monthly-metric { justify-content: space-between; gap: 4px; }
  .monthly-metric + .monthly-metric { border-left: 0; margin-left: 0; padding-left: 0; }
}