/*
 * user-table.css — presentation for the shared user table (see user-table.js
 * for why this is a shared asset rather than inline CSS).
 *
 * COLOURS COME FROM THE HOST. Every surface, text and border colour is read
 * from the CSS custom properties the host page sets on :root (--ink,
 * --ink-dim, --rule, --rule-strong, --panel, --accent, --danger, --ok-bg,
 * --ok-fg, --warn-bg, --warn-fg, --off-bg, --off-fg), so the component
 * inherits each host's palette instead of carrying a second one that drifts.
 * That matters because the two mounts do not share a palette: public/users.html
 * is cool indigo/slate and public/console.html is warm terracotta/green. A
 * literal that looks right on one is only ever luck on the other.
 *
 * Where a host has no token for the role — the header tint and the selected
 * row — the colour is mixed with color-mix() from tokens both hosts DO define,
 * with the plain var() above it as the pre-color-mix fallback. The Staff badge
 * takes the same principle further: see its rule below. The hex values inside
 * var() are last-resort defaults for a host that sets nothing; both real hosts
 * set every token used here, so none of those defaults ever applies.
 *
 * TWO LITERAL COLOUR DECLARATIONS ARE DELIBERATE, and they are the only ones
 * in this file (hex quoted inside a comment is documentation, not a colour):
 *   .utbl-btn.primary  color: #fff   — white on a saturated --accent fill.
 *                      There is no host token for "text on accent", and the
 *                      accent is a strong colour on both palettes.
 *   .utbl-pop          box-shadow rgba(15,23,42,.12) — a neutral translucent
 *                      shadow, not a palette colour; it tints nothing.
 *
 * Every rule is scoped under .utbl so nothing here can reach a host's own
 * table, button or input styles.
 */

/* .utbl-dlg-bg is listed here as well as .utbl because the dialog is appended
   to document.body, NOT inside the mount — an overlay cannot be nested in a
   scrolling table. Outside the .utbl subtree every var(--utbl-*) resolves to
   nothing, which rendered the dialog as unstyled text floating transparently
   over the table it was covering. Tokens have to be declared everywhere the
   component paints, not only where it usually paints. */
.utbl, .utbl-dlg-bg {
        --utbl-ink: var(--ink, #0f172a); --utbl-dim: var(--ink-dim, #64748b);
        --utbl-rule: var(--rule, #e6e8f0); --utbl-panel: var(--panel, #fff);
        --utbl-accent: var(--accent, #4f46e5); --utbl-danger: var(--danger, #b91c1c);
        color: var(--utbl-ink); font-family: inherit; font-size: inherit; }

/* ---------------------------------------------------------------- toolbar -- */

.utbl-bar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .7rem; }
.utbl-search { flex: 1 1 15rem; min-width: 11rem; max-width: 24rem;
  padding: .45rem .7rem; border: 1px solid var(--utbl-rule); border-radius: 8px;
  font-size: .87rem; font-family: inherit; background: var(--utbl-panel); color: var(--utbl-ink); }
.utbl-search:focus { outline: 2px solid var(--utbl-accent); outline-offset: -1px; }
.utbl-spacer { flex: 1 1 auto; }

.utbl-btn { background: var(--utbl-panel); border: 1px solid var(--utbl-rule); border-radius: 8px;
  padding: .42rem .75rem; font-size: .8rem; font-family: inherit; color: var(--utbl-ink); cursor: pointer; }
.utbl-btn:hover { border-color: var(--rule-strong, #d7dae6); }
.utbl-btn:disabled { opacity: .5; cursor: default; }
.utbl-btn.primary { background: var(--utbl-accent); border-color: var(--utbl-accent); color: #fff; font-weight: 600; }
.utbl-btn.danger { color: var(--utbl-danger); }
.utbl-btn.tiny { padding: .28rem .6rem; font-size: .76rem; }

/* --------------------------------------------------------- filters + count -- */

.utbl-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.utbl-count { font-size: .8rem; color: var(--utbl-dim); margin-right: .2rem; }

.utbl-chip { display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--utbl-rule); border-radius: 99px; background: var(--utbl-panel);
  padding: .2rem .3rem .2rem .65rem; font-size: .78rem; color: var(--utbl-dim); }
.utbl-chip.on { border-color: var(--utbl-accent); color: var(--utbl-accent); }
.utbl-chip select { border: none; background: transparent; font-family: inherit;
  font-size: .78rem; color: inherit; padding: .1rem 1.1rem .1rem .1rem; cursor: pointer;
  max-width: 13rem; }
.utbl-chip select:focus { outline: none; }

/* ----------------------------------------------------------- bulk actions -- */

.utbl-bulk { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--off-bg, #f1f5f9); border: 1px solid var(--utbl-rule); border-radius: 10px;
  padding: .45rem .7rem; margin-bottom: .7rem; font-size: .82rem; }
.utbl-bulk .utbl-selected { font-weight: 600; margin-right: .2rem; }

/* ------------------------------------------------------------ the table -- */

.utbl-wrap { overflow-x: auto; }
.utbl table { width: 100%; border-collapse: collapse; background: var(--utbl-panel);
  border: 1px solid var(--utbl-rule); border-radius: 12px; overflow: hidden; }
.utbl th, .utbl td { text-align: left; padding: .6rem .75rem;
  border-bottom: 1px solid var(--utbl-rule); vertical-align: middle; }
.utbl th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--utbl-dim); white-space: nowrap;
  /* A tint of the host's own neutral, not a literal near-white: users.html is
     cool-grey and console.html is warm-green, and one hard-coded blue-white
     could only suit one of them. The plain var() is the fallback for engines
     without color-mix — stronger than intended, still the right hue. */
  background: var(--off-bg, #f1f5f9);
  background: color-mix(in srgb, var(--off-bg, #f1f5f9) 45%, var(--utbl-panel)); }
.utbl tbody tr:last-child td { border-bottom: none; }
.utbl th.utbl-sortable { cursor: pointer; user-select: none; }
.utbl th.utbl-sortable:hover { color: var(--utbl-ink); }
.utbl th .utbl-arrow { opacity: .35; margin-left: .25rem; font-size: .8em; }
.utbl th.utbl-sorted .utbl-arrow { opacity: 1; color: var(--utbl-accent); }
.utbl td.utbl-check, .utbl th.utbl-check { width: 1.6rem; padding-right: 0; }
.utbl input[type=checkbox] { width: auto; cursor: pointer; }
.utbl td.utbl-rowactions { white-space: nowrap; text-align: right; }
.utbl td.utbl-rowactions .utbl-btn { margin-left: .25rem; }

/* Matches the host pages' own tr.off treatment — a disabled person is dimmed,
   not hidden, because they still hold records someone may need to find. */
.utbl tr.utbl-off td { opacity: .55; }
/* Selection reads as a wash of the host's accent — the colour that already
   means "this one" on both pages. */
.utbl tr.utbl-sel td { background: var(--off-bg, #f1f5f9);
  background: color-mix(in srgb, var(--utbl-accent) 8%, var(--utbl-panel)); }

.utbl-pill { display: inline-block; font-size: .68rem; padding: .1rem .45rem; border-radius: 99px;
  background: var(--off-bg, #f1f5f9); color: var(--off-fg, #64748b); margin-right: .25rem; }
.utbl-pill.app { background: var(--ok-bg, #dcfce7); color: var(--ok-fg, #15803d); }
.utbl-pill.admin { background: var(--warn-bg, #fef3c7); color: var(--warn-fg, #b45309); }
/* Staff is the one badge that renders ONLY in the operator console, so it is
   the one that must not be a guess — and it must stay distinct from Admin,
   because both appear in the same console list and they mean opposite things
   (our operator vs a tenant's own administrator).
   Every other pill is a pale tint: app uses --ok, Admin --warn, Disabled
   --off. A fourth tint has nowhere to go — console.html's --accent (#b5652d)
   and its --warn-fg (#a5541c) are both terracotta, so an accent-tinted Staff
   pill was measured rendering nearly identical to Admin there.
   So Staff is not a tint at all: it is the one SOLID pill, host ink on host
   panel. That reads as different-in-kind rather than different-in-hue, which
   survives any palette, and its contrast is the host's own body contrast. */
.utbl-pill.staff { background: var(--utbl-ink); color: var(--utbl-panel); font-weight: 600; }
.utbl-pill.ok { background: var(--ok-bg, #dcfce7); color: var(--ok-fg, #15803d); }
.utbl-muted { color: var(--utbl-dim); font-size: .8rem; }

/* ------------------------------------------------------- column chooser -- */

.utbl-cols { position: relative; }
.utbl-pop { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30;
  background: var(--utbl-panel); border: 1px solid var(--utbl-rule); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: .6rem .75rem; min-width: 12rem; }
.utbl-pop label { display: flex; align-items: center; gap: .45rem; margin: 0;
  padding: .22rem 0; font-size: .82rem; color: var(--utbl-ink); text-transform: none; letter-spacing: 0; }
.utbl-pop label input { width: auto; }
.utbl-pop label.fixed { color: var(--utbl-dim); }

/* --------------------------------------------------------- empty / error -- */

.utbl-empty { background: var(--utbl-panel); border: 1px solid var(--utbl-rule);
  border-radius: 12px; padding: 2rem; text-align: center; color: var(--utbl-dim); }
.utbl-empty.err { color: var(--utbl-danger); }
.utbl-busy { opacity: .6; pointer-events: none; }

/* ---------------------------------------------------------------- dialog --
   The Reset password dialog (UserTable.passwordDialog). Same host-token rule
   as everything above: no colour here is a literal except white on a
   saturated accent fill and the overlay scrim, both of which must be. */
.utbl-dlg-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem;
  overflow-y: auto; z-index: 60; }
.utbl-dlg { background: var(--utbl-panel); color: var(--utbl-ink); border-radius: 14px;
  max-width: 460px; width: 100%; padding: 1.5rem 1.6rem 1.3rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3); }
/* Host pages style bare `label` for their own forms — console.html makes it
   uppercase, .74rem, letter-spaced, block. Inherited into a dialog written in
   sentence case that reads as SHOUTING AT THE OPERATOR, with the checkbox and
   its text on separate lines. The component cannot know what a host does to an
   element selector, so it states every property it depends on rather than
   assuming a default. */
.utbl-dlg label { text-transform: none; letter-spacing: normal; color: inherit;
  font-size: inherit; margin-bottom: 0; display: block; }
.utbl-dlg-head { display: flex; justify-content: space-between; align-items: flex-start; }
.utbl-dlg-head h2 { margin: 0 0 .1rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.utbl-dlg-x { background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer;
  color: var(--utbl-dim); padding: .1rem .3rem; font-family: inherit; }
.utbl-dlg-who { color: var(--utbl-dim); font-size: .85rem; margin: .2rem 0 1.4rem; }
.utbl-dlg .utbl-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem;
  margin: .9rem 0; cursor: pointer; line-height: 1.4; }
.utbl-dlg .utbl-check input { margin-top: .15rem; flex-shrink: 0; }
.utbl-dlg-policy { font-size: .82rem; color: var(--utbl-dim); margin: .2rem 0 1rem; line-height: 1.5; }
.utbl-dlg .utbl-dlg-lbl { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.utbl-req { color: var(--utbl-danger); }
.utbl-pw-wrap { display: flex; align-items: stretch; gap: .4rem; }
.utbl-pw-wrap input { flex: 1; font: inherit; font-size: .92rem; padding: .5rem .65rem;
  border: 1px solid var(--rule-strong, var(--utbl-rule)); border-radius: 8px;
  background: var(--utbl-panel); color: var(--utbl-ink); }
.utbl-pw-wrap input:focus { outline: 2px solid var(--utbl-accent); outline-offset: -1px; border-color: var(--utbl-accent); }
.utbl-pw-eye { background: none; border: 1px solid var(--utbl-rule); border-radius: 8px;
  cursor: pointer; padding: 0 .6rem; font-size: .9rem; }
.utbl-pw-out { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; }
.utbl-pw-out code { flex: 1; font-size: 1.05rem; letter-spacing: .04em; padding: .6rem .7rem;
  border: 1px solid var(--utbl-rule); border-radius: 8px; background: var(--off-bg, transparent); }
.utbl-dlg-msg { font-size: .84rem; margin: .9rem 0 0; }
.utbl-dlg-msg.err { color: var(--utbl-danger); }
.utbl-dlg-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }