/* Reports screen (js/screens/reports.js). The stat strip is monitor.css's; the
   charts and tables are widgets.css's (the same classes a dashboard widget
   uses), so a report and a dashboard read alike. */

.rep-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rep-dates { display: inline-flex; align-items: center; gap: var(--sp-2); }
.rep-to { color: var(--tx2); font: 450 var(--fs-sm) var(--font-body); }
.rep-exports { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.rep-range { margin: 0 0 var(--sp-3); color: var(--tx2); font: 450 var(--fs-xs) var(--font-body); font-variant-numeric: tabular-nums; }

.rep-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.rep-panel {
  min-width: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--ln);
  border-radius: var(--r-lg);
  background: var(--sf);
}
.rep-panel--wide { margin-bottom: var(--sp-3); }
.rep-panel__title { margin: 0 0 var(--sp-3); font: 500 var(--fs-sm) / 1 var(--font-body); color: var(--tx2); }
.rep-chart { display: flex; flex-direction: column; height: 220px; }
.rep-pending { height: 160px; }
.rep-split + .rep-split { margin-top: var(--sp-4); }
.rep-split__title { margin-bottom: var(--sp-2); font: 450 var(--fs-xs) var(--font-body); color: var(--tx2); }
.rep-split .w-seg__bar { margin-bottom: var(--sp-2); }
.rep-table { overflow-x: auto; }
.rep-table .w-table td { max-width: none; }
.rep-rate { font-variant-numeric: tabular-nums; }
.rep-rate.is-bad { color: var(--red-ink); font-weight: 600; }

@media (max-width: 899px) {
  .rep-grid { grid-template-columns: minmax(0, 1fr); }
}