/* The handful of classes the original React CSS never needed.
 *
 * index.css is copied verbatim from src/index.css, so it is deliberately left
 * untouched — anything new lives here, which keeps the two easy to tell apart if
 * you ever diff against the React app.
 */

/* Logout is a POST form in the topbar; without this it becomes a block element
   and pushes the topbar actions onto a second line. */
.inline-form {
  display: inline;
  margin: 0;
}

/* Chart.js needs an explicitly sized parent to be responsive. recharts handled
   this with ResponsiveContainer; here layout.php sets the height inline and this
   supplies the rest. */
.chart-box {
  width: 100%;
}

.chart-box canvas {
  max-width: 100%;
}

/* Shown only on paper (see print.css). */
.print-only {
  display: none;
}

/* Filter bars are real <form>s now, so the wrapper needs the flex behaviour the
   old <section class="filters-bar"> got from index.css. */
form.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

/* The status <select> inside the calls table keeps its badge colouring. */
select.calls-status {
  border: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  cursor: pointer;
}

/* A submit button styled as a plain text link, for Edit/Delete cells where the
   action must be a POST but should not look like a button. */
button.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* The React client list used onClick on the <li>; this uses a real anchor so
   middle-click, right-click and keyboard navigation work. The anchor must fill
   the row and inherit its colour, or index.css's link styling turns every list
   item blue and underlined. */
.perf-client > a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: inherit;
}

.perf-client > a:hover,
.perf-client > a:focus-visible {
  text-decoration: none;
}

/* Report cards were <button>s; as anchors they need the flex layout and
   centring back, since index.css targeted the button element. */
a.report-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.report-card:hover {
  text-decoration: none;
}

/* Server-rendered pagination on the audit page. */
.pager {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem 0 0;
}

.pager .muted {
  margin-right: auto;
}