.metrics-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Chart sizing */
.chart-wrapper {
  position: relative;
  height: 220px;
  width: 100%;
}

/* Table scroll */
.table-wrapper {
  overflow-y: auto;
  max-height: 260px;
}

/* ── Chart chrome ───────────────────────────────────────────────────────── */

.chart-card {
  padding: 1rem 1.125rem 1.25rem;
  margin-bottom: 1rem;
}

/* Range filters sit in one row above the charts. */
.chart-filters {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Date bounds in the filter row. The label sits inline with its field so the
   pair wraps as one unit — "From" stranded on its own line above an unlabelled
   date box is worse than no label at all. */
.filter-date {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Controls in a filter row size to their content rather than taking the full
   width the form styles give every other input. Without this each one is a
   100%-wide flex item and claims a whole line, so a row of three selects is a
   stack of three — which is what the audit filters were. Same reason
   .period-form overrides it for its two dates. */
.chart-filters select,
.chart-filters input[type="date"] {
  width: auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.8125rem;
}

/* ── Audit filter row ──────────────────────────────────────────────────────
   Three selects, two dates and a reset, on one row where there is room.

   Sized rather than left to shrink freely: a select narrower than about 9rem
   shows none of its option text, and "Customer actions" truncated to "Cus…" is
   no filter at all. They share the space evenly down to that floor and wrap
   below it. */
.audit-filters select {
  flex: 1 1 11rem;
  min-width: 9rem;
  /* Capped so the three selects, both dates and the reset clear 1232px — the
     page's content width — on one line. Uncapped they grow to fill the row on
     their own and push the dates onto a second. */
  max-width: 14rem;
}

/* Four selects instead of the audit log's three, on the same 1232px line. The
   floor stays at 9rem — below that a select shows none of its option text — so
   these wrap sooner rather than truncating. */
.message-filters select {
  flex: 1 1 9rem;
  max-width: 11.5rem;
}

/* Sits directly under the filter row it explains, so it needs the gap below
   that .empty-note's top margin does not give it. */
.filter-note {
  margin: 0 0 1rem;
}

/* Before/after values are whatever was in the column — an address, a list of
   allowed IPs, a URL. Left to size themselves one long value stretches the
   table far past the viewport, and .table-wrap turns that into a page the
   reader has to scroll sideways through to reach the columns after it. Bounded
   and wrapped instead, so the row grows downwards rather than outwards. */
.audit-changes {
  max-width: 22rem;
  overflow-wrap: anywhere;
}

/* ── Audit log, phone ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Below this the filter row cannot hold two controls without crushing one of
     them, so each takes a full line and the filters read as a short list. */
  .audit-filters select,
  .message-filters select,
  .audit-filters .filter-date {
    flex: 1 1 100%;
    max-width: none;
  }

  /* The date field takes whatever the label leaves, rather than sitting at its
     intrinsic width with dead space beside it. */
  .audit-filters .filter-date input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Narrower still here, where 22rem is most of the screen and the columns
     either side of it are what somebody is usually reading. */
  .audit-changes {
    max-width: 14rem;
  }
}

/* The legend is HTML rather than canvas so it survives images-off and
   forced-colours, and so identity is never carried by colour alone. */
.chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 0.75rem;
}

.chart-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Text keeps text ink; the swatch beside it carries the series identity. */
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.chart-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.empty-note {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin: 0.5rem 0 0;
}

/* Tablet and up */
@media (min-width: 768px) {
  .metrics-layout {
    grid-template-columns: 2fr 1fr; /* chart gets priority */
  }

  .chart-wrapper {
    height: 260px;
  }
}

/* Large screens */
@media (min-width: 1024px) {
  .metrics-layout {
    grid-template-columns: 3fr 1fr; /* even stronger bias to chart */
  }

  .chart-wrapper {
    height: 300px;
  }
}