/* ── Admin GHII Users page, in the poster face ──
 * @file admin-ghii.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The operator's GHII Users page (design canvas "AIMEAT Admin GHII Users", list
 *   direction A): the search field and the seven filter chips that are the numeral strip's counts
 *   made pressable, the person list as grid rows that stack into blocks on a phone instead of
 *   scrolling sideways, the level as three chips with the current one on the sun, and the row's
 *   doors. The frame, the sections, the metric rows, the numeral strip and the doors come from
 *   admin.css and organism.css; only what this page adds lives here. Every value is a theme.css
 *   token, so the page flips with the theme.
 * @version-history
 *   v1.1.0 — 2026-09-12 — Measured with the 64 rows production carries rather than a sandbox's
 *     dozen: the row stacks at 1180 instead of 900, because that is the first width the seven
 *     columns fit and at 1000 the row was overflowing its own box by 34px into a page that clips.
 *     Stacked, the values flow and wrap instead of taking a line each (224px of row became 145px).
 *   v1.0.0 — 2026-09-12 — Initial. The page had no rules of its own before: it was two .adm-card
 *     blocks, a StatsGrid and an eight-column table in a sideways-scrolling box.
 */

.adm-gh-lead { margin: 0 0 14px; font-size: .95rem; line-height: 1.6; color: var(--text); max-width: 92ch; }
.adm-gh-note { margin: 10px 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-dim); max-width: 88ch; }
.adm-gh .adm-mrow--last { border-bottom: 0; }

/* The search field is the page's one input: a 3px ink underline, coral while you are in it. */
.adm-gh-filters { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.adm-gh-fld { display: flex; align-items: center; gap: 10px; border-bottom: 3px solid var(--text); padding: 4px 2px 5px; flex: 1 1 18rem; }
.adm-gh-fld:focus-within { border-bottom-color: var(--accent); }
.adm-gh-fld svg { width: 16px; height: 16px; flex: none; stroke: var(--text); fill: none; stroke-width: 2.5; }
.adm .adm-gh-fld input[type='search'],
.adm .adm-gh-fld input[type='text'] { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; background: none; padding: 0; font: inherit; font-size: .9rem; font-weight: 600; color: var(--text); outline: none; box-shadow: none; }
.adm .adm-gh-fld input::placeholder { color: var(--text-dim); font-weight: 600; }
.adm-gh-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }

/* A filter chip is the strip's count made pressable. The chosen one sits on the sun. */
.adm-gh-chip { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; padding: 3px 9px; border: 2px solid var(--border); border-radius: 0; background: none; color: var(--text-dim); cursor: pointer; }
.adm-gh-chip:hover { border-color: var(--text); color: var(--text); }
.adm-gh-chip.on { border-color: var(--text); background: var(--sun); color: var(--on-sun); }
.adm-gh-chip:disabled { opacity: .45; cursor: default; }
.adm-gh-chip:disabled:hover { border-color: var(--border); color: var(--text-dim); }

/* One person is a grid row, not a table cell: at 390px the eight-column table was 766px wide and
   the actions column was simply off the screen. Below 900px the row becomes a block and each
   value says its own name. */
/* The seven columns need 892px of content width at their minimums, which a 1180px window is the
   first to give (a 220px rail and 64px of page padding come off first). Below that the row stacks
   rather than losing its last columns off the side, which is what the old table did at 390px. */
.adm-gh-head,
.adm-gh-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.6fr) minmax(100px, 1fr) 152px 76px minmax(112px, 1fr) 116px minmax(110px, 1.2fr);
  gap: 0 16px;
  align-items: baseline;
}
.adm-gh-head { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: .69rem; text-transform: uppercase; letter-spacing: .3px; }
.adm-gh-row { padding: 9px 0; border-bottom: 1px solid var(--border-subtle); font-size: .82rem; color: var(--text-dim); }
.adm-gh-row:hover { background: var(--bg-surface); }
.adm-gh-row b { display: block; font-size: .88rem; font-weight: 700; color: var(--text); }
.adm-gh-id { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }
/* The whole identity, for the stacked view where there is room for it. */
.adm-gh-id--full { display: none; }
.adm-gh-mail { font-family: var(--font-mono); font-size: .72rem; color: var(--success-fg); overflow-wrap: anywhere; }
.adm-gh-mail--unconfirmed { color: var(--text-dim); }
.adm-gh-none { color: var(--text-muted); }
.adm-gh-when { color: var(--text); font-family: var(--font-mono); font-size: .74rem; }
.adm-gh-when small { display: block; font-family: var(--font-mono); font-size: .68rem; color: var(--text-dim); margin-top: 2px; }
.adm-gh-made { font-family: var(--font-mono); font-size: .72rem; }

/* The level is three chips and the current one sits on the sun. It was a select that wrote on
   change, so a scroll over a focused dropdown moved a person's verification level. */
.adm-gh-lvl { display: flex; gap: 4px; }
.adm-gh-lchip { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; padding: 2px 7px; border: 2px solid var(--border); border-radius: 0; background: none; color: var(--text-muted); cursor: pointer; }
.adm-gh-lchip:hover { border-color: var(--text); color: var(--text); }
.adm-gh-lchip.on { border-color: var(--text); background: var(--sun); color: var(--on-sun); }
.adm-gh-lchip:disabled { cursor: default; }

.adm-gh-acts { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.adm-gh-acts .og-door { font-size: .72rem; }
.adm-gh-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 12px; font-family: var(--font-mono); font-size: .74rem; color: var(--text-dim); flex-wrap: wrap; }
.adm-gh-empty { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--text-dim); }

@media (max-width: 1180px) {
  .adm-gh-head { display: none; }
  /* Off the grid the values flow and wrap rather than taking a line each: one line each turned a
     person into 224px of mostly empty row on a 1000px screen. The name and the doors take a full
     line of their own; everything between them fills the width it has. */
  .adm-gh-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; padding: 12px 0; }
  .adm-gh-row > span:first-child { flex-basis: 100%; }
  /* Every value says what it is; the name and the doors need no label. */
  .adm-gh-row > [data-l]::before { content: attr(data-l) ': '; font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
  /* Beats the block rule above on specificity, which is why both name the row. */
  .adm-gh-row > .adm-gh-lvl,
  .adm-gh-row > .adm-gh-acts { display: flex; align-items: center; flex-wrap: wrap; }
  .adm-gh-row > .adm-gh-acts { flex-basis: 100%; justify-content: flex-start; gap: 18px; margin-top: 4px; }
  .adm-gh-row > .adm-gh-made { display: block; }
  .adm-gh-when small { display: inline; margin: 0 0 0 8px; }
  /* Room for the whole identity here, so the short form steps aside. */
  .adm-gh-row .adm-gh-id { display: none; }
  .adm-gh-row .adm-gh-id--full { display: block; margin-top: 2px; }
}