/* ── The account list's own column sizing ──────────────────────────────────
   Every column here is nowrap content of a fixed size — badges, a login, two
   buttons — so a full-width table had slack to hand out and spread it evenly
   across all of them. The visible result was a lake of empty table between
   «Стан» and the buttons, with the badges stranded in the middle of their
   columns. Naming one column as the elastic one fixes that: `width: 100%` on a
   cell whose neighbours all ask for `1%` gives it the whole remainder, and the
   rest shrink to their content. `.col-scope` («Область даних») takes it because
   it is the one column carrying prose that a wider cell actually helps — and it
   is a class rather than an `nth-child`, matching `.col-check` / `.col-portrait`
   on the person list, so reordering the columns cannot silently move the rule. */
.user-table th, .user-table td { width: 1%; }
/* …and the elastic column is also the only one allowed to wrap. Everything else
   in the row is a badge or a button with a hard minimum width, so with every cell
   nowrap the table's minimum was the sum of all of them — and a pending account,
   which adds «Підтвердити» beside «Редагувати», pushed that minimum past the
   viewport and brought the horizontal scrollbar with it. Giving the prose column
   somewhere to go means the pressure lands there instead. It still holds one line
   while there is room: it has the slack until something else needs it. */
.user-table .col-scope { width: 100%; white-space: normal; min-width: 12ch; }

/* Below roughly a full-width desktop there is not room for both the labels and
   the buttons, and something has to give. It must not be the buttons — they are
   why this page is open, and a clipped action is the bug this column layout was
   rewritten to fix. So two things give instead, in the order they cost least: the
   action labels collapse to their glyphs, and the ПІБ / підрозділ lines cap and
   ellipsise. The cap goes on the inner `.cell-sub`, not the cell: the auto table
   algorithm ignores a cell's max-width and sizes to min-content, so it has to be
   on a block inside.

   A shortened ПІБ is still recognisable and the full string is one click away in
   the row's own edit form; a «Редагувати» behind a scrollbar is not.

   The collapse re-types `.btn.icon-only`'s two bodies (components/buttons.css) because plain
   CSS cannot lend a rule across a media boundary and the buttons must keep their
   labels at wide widths — so the class cannot simply be put in the markup. The
   label is clipped rather than `display:none`d, which is what keeps the
   accessible name and lets `title` still work on hover. */
@media (max-width: 1400px) {
  .user-table .action-cell .btn {
    padding-left: 0; padding-right: 0; width: 30px; justify-content: center; gap: 0;
  }
  .user-table .action-cell .btn-lbl {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .user-table .cell-sub { max-width: 22ch; }
}
/* One step tighter for a windowed browser, down to the card breakpoint at 720px
   where the table stops being the layout at all. */
@media (max-width: 1200px) {
  .user-table .cell-sub { max-width: 15ch; }
}

/* One cell per action, so the buttons line up down the page. Packed into a
   single cell they were laid out per row, and «Редагувати» sat 36px further
   right wherever the 2FA reset was missing beside it — a column that zigzagged.
   Splitting them lets the table do the aligning, with no button width written
   down anywhere. Scoped to `.user-table`: it is the only list in the app with
   more than one action per row, so this is not yet a shared primitive. */
.user-table .action-cell { text-align: right; }
.user-table .action-cell:not(:last-child) { padding-right: 0; }

/* ── One account's page (/users/<pk>/) ─────────────────────────────────────
   The «Обліковий запис» tab is two columns: what may be changed, and what has
   happened. Not `.grid.cols-2` — an even split gave the form column exactly as
   much room as a list of counters, and the form is the wider thing on the page
   (a person picker, a multi-select of areas, a password pair). The ratio is
   stated once here, and both columns get `minmax(0, …)` so a long ПІБ or a wide
   `<select>` cannot push the grid past the viewport.

   It collapses at 1100px rather than at the shared 900px breakpoint: the side
   column's own two-up counters stop fitting well before the page does. Form
   first when stacked — the tab is opened to change something. */
.account-cols {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
/* `minmax(0, 1fr)` in the collapsed state too, and not the bare `1fr` this was: a
   single-column `1fr` track is `minmax(auto, 1fr)`, whose *minimum* is the column's
   min-content — and a `<select>`'s min-content is its widest option. «мол. с-т Литвин
   Валентин Данилович «Шаман»» in the person picker was therefore stretching the whole
   page to 475px inside a 390px phone: every panel, the topbar and the tab bar came out
   wider than the viewport, sideways-scrolling as one. The two-column ratio above
   already says why both its tracks carry it. */
@media (max-width: 1100px) { .account-cols { grid-template-columns: minmax(0, 1fr); } }

/* The right-hand column: «Стан запису» over «Активність», same gap as the grid. */
.account-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Four counters in a narrow column, so two-up rather than the dashboard's strip.
   Each is a plain `.stat`; only the date one needs a smaller figure — «29.07.2026»
   at the tile size wraps, and a wrapped date reads as two numbers. */
.account-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-kpis .stat { padding: 12px 14px; }
.account-kpis .stat .num { font-size: 26px; }
.account-kpis .stat .num.sm { font-size: 15px; letter-spacing: 0; }
@media (max-width: 420px) { .account-kpis { grid-template-columns: 1fr; } }

/* The last few auth events — a three-part row (коли · що · звідки) rather than a
   table: this is a preview, and the table with its per-source rollup is one click
   away on /users/<pk>/logins/. The address is pushed to the end so the badges line
   up in one column down the list. */
.account-events { list-style: none; margin: 14px 0 0; padding: 0; }
.account-events > li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.account-events > li:first-child { border-top: 0; }
.account-event-when { color: var(--muted); white-space: nowrap; }
.account-event-src {
  margin-left: auto; color: var(--muted-2); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Phone: коли + звідки share the first line and the badge takes the second. The
   three-part row is only a row while the badge is a word — «Невірний код
   двофакторного входу» wraps to two lines in the middle of it and squeezes the address
   down to «127…», i.e. it costs the one fact this preview exists to hand over. Stacked,
   both survive, and the badges still line up (they start the second line of every
   row). */
@media (max-width: 560px) {
  .account-events > li {
    display: grid; row-gap: 5px;
    grid-template-columns: max-content 1fr;
    grid-template-areas: 'when src' 'what what';
  }
  .account-event-when { grid-area: when; }
  .account-event-src { grid-area: src; }
  /* `justify-self: start` is the point of the grid: a flex line-break needs
     `flex-basis: 100%`, which then *is* the badge's width and draws the pill as a
     full-width bar. */
  .account-events > li > .badge { grid-area: what; justify-self: start; }
}

/* A one-line notice above a list's results (e.g. the pending-registrations
   counter), inside the HTMX-swapped fragment so it stays current. */
.list-notice { margin: 0 0 12px; }

.mt-xs { margin-top: 8px; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 20px; }
.mb-md { margin-bottom: 20px; }
.text-right { text-align: right; }
.bold { font-weight: 600; }
.fz-sm { font-size: 12px; }
.center { justify-content: center; }
.clickable { cursor: pointer; }
.w-search { max-width: 320px; }
.w-filter { max-width: 200px; }
.w-filter-lg { max-width: 260px; }
.w-date { max-width: 150px; }
.btn-block { width: 100%; justify-content: center; }
.field-full { grid-column: 1 / -1; }