/* Admin
 * Invites, people and instance facts. A back-office page that should look
 * like the rest of the app rather than like a dashboard, so it borrows
 * .chartcard, .navprimary and the session-row shape from auth.css rather
 * than introducing a second visual language for lists.
 *
 * The phone rules live at the bottom of this file rather than in
 * responsive.css. That file exists for adjustments that span several
 * components — header, wheel, stat row together — and is the right home for
 * those. A rule that only ever concerns one component belongs next to the
 * rule it overrides, or the two drift apart the first time either changes.
 *
 * Both tables STACK below 480px rather than scrolling sideways. A row of
 * columns that reads well at 1400px becomes a horizontal scrollbar on a
 * phone, and inviting someone is the most phone-shaped thing in this app —
 * it happens mid-conversation and the output is a link you send from
 * wherever you are standing.
 */

/* ── Create form ─────────────────────────────────────────────────────────── */
/*
 * .invitecreate, not .inviteform — auth.css already owns that name for the
 * code-entry form on /invite-required. admin.css loads after it, so the two
 * were overriding each other at equal specificity in both directions: this
 * file widened that page's gap, and auth.css's
 * `.inviteform .navprimary { justify-self: end }` was what pushed the Create
 * button to the right here. Neither was intended by either file.
 */

.invitecreate { display: grid; gap: 14px; }
/* Explicit, rather than inherited from a neighbouring stylesheet by accident. */
.invitecreate .navprimary { justify-self: end; }

.invitecreate-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.field { display: grid; gap: 6px; flex: 1; min-width: 0; }
.field-narrow { flex: 0 0 140px; }

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.field-optional {
  font-weight: 400;
  color: var(--ink-faint);
  text-transform: lowercase;
}

/* Inputs take a dark surface on a dark card rather than staying white, and
   are sized to their content — an expiry dropdown has no business being as
   wide as an email address. */
.field-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
.field-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── The new invite link ─────────────────────────────────────────────────── */

.invitenew {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.invitenew-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.invitenew-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.invitenew-link code {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13.5px;
  /* The link is long and must be readable and selectable in full — wrapping
     beats an ellipsis for something whose whole purpose is being copied. */
  word-break: break-all;
}

/* ── Rows (invites and people share this) ────────────────────────────────── */

.datalist { display: grid; gap: 10px; }

.datarow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.datamain { flex: 1; min-width: 0; }

.dataprimary {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.datasecondary {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 2px;
}

.datatag {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.datatag[data-state="unused"] { color: var(--accent-ink); border-color: var(--accent); }
.datatag[data-state="expired"] { color: var(--ink-faint); }
.datatag[data-state="admin"]   { color: var(--accent-ink); border-color: var(--accent); }

.datarevoke {
  flex: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.datarevoke:hover { color: var(--neg); border-color: var(--neg); }

/* ── Instance facts ──────────────────────────────────────────────────────── */

.instancegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.instanceitem { min-width: 0; }
.instancelabel {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
}
.instancevalue {
  font-size: 16px;
  color: var(--ink);
  margin-top: 4px;
  word-break: break-all;
}
.instancevalue[data-ok="false"] { color: var(--neg); }

/* ── Phone ───────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* The expiry select stops being a narrow column and sits under the email
     field. Side by side, both end up too cramped to use. */
  .invitecreate-row { flex-direction: column; align-items: stretch; }
  .invitecreate .navprimary { width: 100%; }
  .field-narrow { flex: 1 1 auto; }

  /* One card per row: identity first, detail beneath, action last. The
     status tag moves up beside the primary line so the row still answers
     "what is this and is it still good?" in one glance. */
  .datarow {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .datamain { flex: 1 1 100%; order: 1; }
  .datatag  { order: 0; }
  .datarevoke { order: 2; width: 100%; }

  /* Long enough to wrap rather than be clipped — a truncated invite code is
     useless, and an address people need to recognise is nearly as bad. */
  .dataprimary { white-space: normal; overflow: visible; }

  .invitenew-link code { flex: 1 1 100%; }
  .invitenew-link .navtext { width: 100%; }
}