/* admin.css — the account manager.
 *
 * A DESK SCREEN, AND THE ONLY ONE
 * Every other page in this application is built for a finger at arm's length in
 * a noisy drive: no text fields, no keyboard, targets you can hit without
 * looking. This one is the exception and is allowed to be, because it is opened
 * at a desk, by one of two people, a few times a month — hiring somebody,
 * pairing a screen, changing a code. Optimising it for the drive would mean a
 * keypad for every name in the store.
 *
 * It still borrows the whole design system from board.css rather than inventing
 * a second one: the same pills mean the same things here as on the board, which
 * is what keeps "removed" from quietly becoming two different states.
 */

.admin .panel { margin-bottom: 16px; }
/* The width comes from .lane-body.admin in lane.css, which is the same rule the
   advisor board uses. This is a desk screen and it is laid out like one. */

/* ---------------- lists of rows ---------------- */

.admin-list { list-style: none; margin: 10px 0 0; padding: 0; }

.admin-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 2px; border-top: 1px solid var(--line);
}
/* The name, its role and any badge stay on one line and truncate together; the
   buttons stay at the right edge. A row that wraps its pills under the name
   reads as two rows, and a list of people is scanned by its left edge. */
.admin-title { flex-wrap: nowrap; overflow: hidden; }
.admin-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row:first-child { border-top: 0; }
/* Somebody who has left, or a screen that was removed. Legible rather than
   struck through: the row is still the answer to "what happened to Jess". */
.admin-row.is-gone { opacity: .55; }

.admin-main { min-width: 0; flex: 1; }
.admin-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-name { font-weight: 600; font-size: .9375rem; }
.admin-sub { color: var(--muted); font-size: .8125rem; margin-top: 3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* A row that cannot sign in is the one broken thing this list can contain, and
   it used to be grey text in a grey line. It is the only place on this page
   that gets a status colour, which is what makes it findable. */
.admin-flag {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
  border-radius: 999px; font-size: .75rem; font-weight: 550;
  background: var(--attn-soft); border: 1px solid var(--attn-line); color: var(--attn);
}
.admin-flag.is-gone-flag { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }
.admin-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* A heading inside a list, for the removed ones. */
.sub-head {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}

/* The role is the most scanned thing on this page — it is what somebody came
   here to check — so it carries a colour. From the IDENTITY palette, not the
   status one: a manager pill used to be amber and a concierge pill green, which
   spent the two colours this application uses for "look at this" and "this is
   fine" on a job title. See the palette note in css/board.css. */
.pill-role { font-weight: 600; }

/* The add forms are collapsed by default. The list is what this page is for;
   the form is what you came to do once. */
.adder {
  margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.adder > summary {
  cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: .9375rem;
  list-style: none;
}
.adder > summary::-webkit-details-marker { display: none; }
.adder > summary::before { content: '+ '; color: var(--brand); font-weight: 700; }
.adder[open] > summary::before { content: '– '; }
.adder-body { padding: 4px 14px 14px; }

/* The editor that opens under one row. Full width so it never sits beside the
   row it belongs to and gets mistaken for the next one. */
.editor {
  flex-basis: 100%; margin-top: 10px; padding: 13px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}

/* ---------------- the pairing code ----------------
 *
 * Shown once, never stored, and read across a desk while typing it into an iPad
 * held in the other hand. That is the whole reason it is this size.
 */
.code-panel {
  margin: 12px 0 4px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}
.code-panel-head { font-size: .8125rem; color: var(--text-2); }
.code-value {
  font-size: 2.5rem; font-weight: 700; letter-spacing: .08em; color: var(--brand);
  margin: 6px 0; line-height: 1.1;
}
.code-panel-foot { display: flex; align-items: center; gap: 14px; }

/* ---------------- settings ---------------- */

.toggle-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.toggle-row input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }
.toggle-row > span { display: flex; flex-direction: column; gap: 3px; }

/* ---------------- facts ---------------- */

.admin-facts { list-style: none; margin: 0; padding: 0; }
.admin-facts li {
  display: flex; gap: 12px; padding: 8px 2px; border-top: 1px solid var(--line);
  font-size: .875rem;
}
.admin-facts li:first-child { border-top: 0; }
.admin-facts span { color: var(--muted); min-width: 120px; }
.admin-facts strong { font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .admin-actions { margin-left: 0; width: 100%; }
}