/* ============================================================
   Hifzhelper — admin screen
   ============================================================ */

/* V3.44: the screen-level width cap that used to live here is REMOVED
   entirely, confirmed in chat -- #screen-admin is never independently
   capped now, it's just another --surface-track screen (css/base.css's
   universal .screen rule). The register box + search + list below are
   now wrapped in a new .screen-content div (index.html) for their own
   30/50 cap instead -- same gap Haidh had, confirmed against the code
   on request before this fix. */

/* V3.75.0 — item 1: icon and heading grouped LEFT, close on the right.
   The V3.74.2 attempt (.card-header-row-left, auto/1fr/auto) NEVER took
   effect: base.css's `.screen:has(> .screen-content) .card-header-row
   { grid-template-columns: 1fr auto }` matches this screen too, and at
   three classes of specificity it beat the single class regardless of
   source order. The two-column grid it forced onto a three-child header
   is what stranded the close button on a second row, centred. That class
   is now deleted (see css/detail-pages.css, V3.75.0); this id-scoped rule
   outranks the base one by construction. */
#screen-admin .card-header-row { grid-template-columns: auto 1fr auto; }
#screen-admin .card-header-row .card-header-icon { justify-self: start; }
#screen-admin .card-header-row h2 { justify-self: start; }

.admin-register-box {
  background: var(--color-surface);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
/* V3.4.3 item 2: restores the block/full-width styling every other form
   in the app already has for its labels/inputs. This box never had its
   own rule — it looked fine before only because a wrapping <div> (removed
   in the V3.4.2 restructuring) forced a line break as a side effect, not
   because the label/input were actually styled to stack. */
.admin-register-box label {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-ink-soft);
  margin-top: var(--space-md);
  margin-bottom: 4px;
}
.admin-register-box input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-sm);
  background: var(--color-page-bg);
}
#adminRegisterResult {
  font-size: var(--font-size-base);
  color: var(--color-success);
  margin-top: var(--space-sm);
}

/* ---- compact searchable user list ---- */
#admin_search {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-table-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}
.admin-list-empty {
  text-align: center;
  color: var(--color-ink-faint);
  padding: var(--space-lg);
}
/* Each row: a clickable name/ID area (its own button, opens the detail
   card) plus sibling icon-buttons for copy/share — kept as separate
   buttons rather than nested ones, since a <button> can't legally contain
   another <button>. */
.admin-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-table-border);
}
.admin-list-row:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.admin-list-row:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: none; }
.admin-list-open {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  text-align: left;
  color: var(--color-ink);
}
.admin-list-row .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-faint);
  flex: 0 0 auto;
}
.admin-list-name {
  flex: 1;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Inactive students: greyed-out name instead of a separate "Inactive"
   text label — keeps the row compact (V3.4.1). */
.admin-list-name.inactive { color: var(--color-ink-faint); }
/* V3.77.0 (j): a role chip on teaching and admin rows. After (j) the list
   holds a teaching row for every teacher alongside her student row, with
   the same name plus "(Teacher)" — the chip is the at-a-glance signal. A
   plain student row carries none, so the common case stays quiet. */
.admin-role-chip {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

button.secondary.danger {
  color: var(--color-error);
  border-color: var(--color-error);
}