/* ── Misc ─────────────────────────────────────────────────────────────── */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
/* A от/до pair is one filter, so it is one element: the wrapper is the range, and it
   wraps as a whole. Two callers — the advanced search's three labelled ranges (with a
   «–» between the halves) and the journal toolbar's «Від»/«До». It lived in
   `pages/search.css` while it had one; the tighter-than-toolbar `gap` is what says the
   two dates belong to each other rather than to the filters beside them. The phone
   half — the pair taking a row and splitting it — is in `layout/responsive.css`. */
.range-inputs { display: flex; align-items: center; gap: 8px; }
.range-inputs input { flex: 1; }
.range-sep { flex: none; color: var(--muted-2); }
.muted { color: var(--muted); }

/* ── Panel width helpers ──────────────────────────────────────────────── */
.panel-md { max-width: 760px; }
.panel-lg { max-width: 900px; }

/* ── Utilities ────────────────────────────────────────────────────────── */
/* Several buttons in one table cell (the account list's approve / edit / reset):
   keeps them on one line, right-aligned, without each cell inventing a flexbox.
   `form` wrappers (an hx-post action) must not add their own margin. */
.row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
/* Several small badges in one table cell, wrapping rather than stretching the column
   — the «Роль у розрахунках» cell of the «Стани» catalogue. */
.flag-row { display: flex; flex-wrap: wrap; gap: 4px; }
/* «не враховано: Вибув» — the caption a figure computed over part of the «Стан»
   catalogue carries (common/widgets/_excluded_note.html). Here rather than in one
   widget's stylesheet because two unrelated surfaces print it — a KPI tile and the
   donut card — and a third will the day another figure obeys the switch. */
.excluded-note { display: block; font-size: 12px; line-height: 1.4; color: var(--muted-2); margin: 2px 0 10px; }
.row-actions form, .action-cell form { margin: 0; }