/* ============================================================
   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. */

.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); }

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