.report-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.report-summary article {
  padding: 17px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 12px;
}

.report-summary small,
.report-summary strong {
  display: block;
}

.report-summary small {
  color: var(--muted);
  font-weight: 750;
}

.report-summary strong {
  margin-top: 7px;
  font-size: 20px;
}

.report-heading {
  margin: 22px 0 12px;
}

.report-heading h3,
.report-heading p {
  margin: 0;
}

.report-heading p {
  margin-top: 5px;
  color: var(--muted);
}

.report-table {
  min-width: 1050px;
}

.filter-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.filter-totals article {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 12px;
}

.filter-totals small,
.filter-totals strong {
  display: block;
}

.filter-totals small {
  color: var(--muted);
  font-weight: 750;
}

.filter-totals strong {
  margin-top: 6px;
  font-size: 20px;
}

@media (max-width: 1050px) {
  .report-filter {
    grid-template-columns: 1fr 1fr;
  }

  .report-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .report-filter,
  .report-summary,
  .filter-totals {
    grid-template-columns: 1fr;
  }
}