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

/* Container width: app-wide responsive protocol (V3.4.2, see
   --width-tablet/--width-desktop in tokens.css) — fills mobile, 50% on
   tablet, 25% on desktop. Unlike .login-card, this isn't inside a
   flex-centering parent, so it needs its own margin:auto. */
#screen-admin {
  max-width: 100%;
}
@media (min-width: 600px) and (max-width: 899px) {
  #screen-admin { max-width: var(--width-tablet); margin: 0 auto; }
}
@media (min-width: 900px) {
  #screen-admin { max-width: var(--width-desktop); margin: 0 auto; }
}

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