/* Admin — the users table, the grant editor and the admin log.
   Everything here is a token from theme.css; no new colours, no new type sizes. The base
   .admin-table / .u-cell / .role / .grant / .seg rules still live in theme.css — this file only
   adds what the page grew, and the mobile layout it never had. */

/* ── page shell ───────────────────────────────────────────────────────────── */
/* The table used to sit alone in a 1150px column. The log takes the empty half of that at
   desktop width and stacks under the table on anything narrower. */
.adm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);align-items:start}
.adm-main{min-width:0}
.adm-side{min-width:0}
@media (min-width:1080px){
  .adm-grid{grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-5)}
  .adm-side{position:sticky;top:0}
}

.adm-retry{text-align:center;padding:0 0 var(--sp-4)}

/* ── the users table ──────────────────────────────────────────────────────── */
.admin-table td.c-role{width:1%;white-space:nowrap}
.admin-table td.c-seen,.admin-table th.th-seen{width:1%;white-space:nowrap}
.admin-table td.c-act{width:1%;white-space:nowrap;text-align:right}
/* Fixed columns on a desktop: sized from their content, the headers would move when the rows
   replace the loading skeleton. */
@media (min-width:721px){
  .admin-table{table-layout:fixed}
  .admin-table th:nth-child(1){width:30%}
  .admin-table th:nth-child(2){width:96px}
  .admin-table th:nth-child(4){width:112px}
  .admin-table th:nth-child(5){width:104px}
  .admin-table td.c-user .u-n,.admin-table td.c-user .u-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

.u-cell .u-id{min-width:0}
.u-cell .u-n{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* 'viewer' was assignable everywhere in the code and styled nowhere, so the one tier whose
   whole point is "this account cannot change anything" rendered as unlabelled bare text. */
.role.viewer{color:var(--text-faint)}

/* A bot has no password and never signs in — a fact about the row that the role can't carry. */
.u-bot{margin-left:7px;font-size:11.5px;font-weight:500;color:var(--text-faint)}

/* Suspension is a state, not a tier, so it takes the role column outright and names the tier it
   is holding underneath. Red here is meaning: this account cannot be used. */
.role.suspended{color:var(--danger)}
.was-role{display:block;font-size:var(--fs-micro);color:var(--text-faint);margin-top:3px;letter-spacing:.3px}
.admin-table tr.is-susp td{opacity:.62}
.admin-table tr.is-susp td.c-act,.admin-table tr.is-susp td.c-user,.admin-table tr.is-susp td.c-role{opacity:1}

/* ── access ───────────────────────────────────────────────────────────────── */
/* Words, not chips: the app's name, then its level as a quiet suffix. */
.grant{display:inline-flex;align-items:center;gap:6px;line-height:1.5}
.grant i{font-style:normal;font-size:var(--fs-tiny);opacity:.72}
.grant.all{color:var(--accent)}
.grant.susp{color:var(--danger)}
/* A taken-away section says so in words ("Calendar restricted"), faint, without borrowing red. */
.grant.none{opacity:1;text-decoration:none;color:var(--text-faint)}
.grant-plain{font-size:var(--fs-tiny);color:var(--text-faint)}
.grant-plain.never{font-style:italic}
.seen{font-size:var(--fs-tiny);color:var(--text-dim)}

/* ── manage dialog ────────────────────────────────────────────────────────── */
.m-hint{font-size:var(--fs-tiny);margin-top:6px}

.susp-note{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-3);
  border:1px solid var(--danger);border-radius:var(--radius-sm);background:rgba(0,0,0,.16);
  font-size:var(--fs-small);line-height:1.45}
.susp-note .muted{margin-top:4px;line-height:1.45}

/* Replaces the whole segment wall when the role makes grants meaningless. */
.grant-note{font-size:var(--fs-small);line-height:1.5;color:var(--text-dim);
  background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-3)}
.grant-note b{color:var(--text)}

.grant-group{margin-top:var(--sp-4)}
.grant-gh{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:2px}
.grant-gh label.field{margin-bottom:0}
.gg-n{font-size:var(--fs-tiny);color:var(--text-faint);margin-right:auto}
.gg-b{padding:3px 9px;font-size:var(--fs-micro)}
.gg-b:disabled{opacity:.35;cursor:default}

/* Save counts what it is about to send; with nothing pending it steps back to a plain button
   so the primary fill means "there is a change here". */
.btn.is-idle{background:var(--bg-elevated);color:var(--text-dim);border-color:var(--border)}

/* Ending an account, kept away from Save. Each action carries the sentence that says what it
   costs, because "Remove" and "Suspend" look equally cheap until someone tells you otherwise. */
.danger-zone{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.dz-h{font-size:var(--fs-small);font-weight:650;color:var(--text-dim);margin-bottom:var(--sp-3)}
.dz-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.dz-row + .dz-row{margin-top:var(--sp-3)}
.dz-row .btn{flex:none;min-width:112px;justify-content:center}
.dz-row span{flex:1 1 170px;min-width:0;font-size:var(--fs-tiny);color:var(--text-faint);line-height:1.45}

/* ── removal impact ───────────────────────────────────────────────────────── */
.imp{margin:var(--sp-2) 0 var(--sp-3);padding-left:18px;font-size:var(--fs-small);line-height:1.7}
.imp b{color:var(--text-bright)}
.imp-f{color:var(--text-faint)}

/* ── admin log ────────────────────────────────────────────────────────────── */
/* theme.css styles .tile-head .link as a <span>, which no keyboard can reach. Same look, real
   button — the UA chrome has to be stripped here because theme.css has no reset for it. */
.tile-head button.link{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.tile-head button.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.alog{list-style:none;margin:0;padding:0}
.alog-row{display:flex;gap:var(--sp-3);align-items:flex-start;padding:9px 8px;border-radius:var(--radius-sm)}
.alog-row + .alog-row{border-top:1px solid var(--border)}
.alog-g{flex:none;width:20px;text-align:center;font-size:13px;line-height:1.5;opacity:.85}
.alog-t{min-width:0;flex:1}
.alog-l{font-size:var(--fs-small);line-height:1.45;color:var(--text-dim)}
.alog-l b{color:var(--text-bright);font-weight:600}
.alog-d{font-size:var(--fs-tiny);color:var(--text-faint);margin-top:2px;line-height:1.4;
  overflow-wrap:anywhere}
.alog-w{flex:none;font-size:var(--fs-micro);color:var(--text-faint);padding-top:3px;white-space:nowrap}
.alog-g .icn{color:var(--text-dim)}

/* A row opens Manage; the button stays for the keyboard. Desktop shows its word, a phone its chevron. */
.admin-table tbody tr{cursor:pointer}
.admin-table td.c-act .btn .icn{display:none}

/* ── phones ───────────────────────────────────────────────────────────────── */
/* At 375px the table was 443px wide inside a 366px column: the Manage button — the only action
   on the page — sat off-screen at x=442 and had to be found by scrolling the table sideways.
   Each row lays itself out instead, and nothing scrolls horizontally. */
@media (max-width:720px){
  .admin-table{border:none;background:none;border-radius:0;overflow:visible}
  .admin-table thead{display:none}
  .admin-table tbody{display:block}
  /* One person is one row under a hairline, not a card; tapping it opens Manage. */
  .admin-table tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:4px var(--sp-3);align-items:center;
    border-bottom:1px solid var(--border);padding:12px 2px}
  .admin-table tr:active{background:var(--bg-hover)}
  .admin-table tr:hover td{background:none}
  .admin-table td{display:block;border:none;padding:0}
  /* Person on the left, their tier and when they were last here stacked on the right — the two
     facts that answer "should this account still exist" sit together instead of on four lines. */
  .admin-table td.c-user{grid-column:1;grid-row:1/3}
  .admin-table td.c-role{grid-column:2;grid-row:1;justify-self:end;width:auto;text-align:right}
  .admin-table td.c-seen{grid-column:2;grid-row:2;justify-self:end;width:auto;text-align:right}
  .admin-table td.c-access{grid-column:1/3;grid-row:3;margin-top:4px}
  .admin-table td.c-act{grid-column:3;grid-row:1/4;width:auto;align-self:center}
  .admin-table td.c-act .btn{border:0;background:none;box-shadow:none;padding:0;width:28px;min-height:44px;justify-content:center;color:var(--text-faint)}
  .admin-table td.c-act .btn .mg-l{display:none}
  .admin-table td.c-act .btn .icn{display:block}
  /* One card is one row of information — the loading skeleton and the error state span it. */
  .admin-table td[colspan]{grid-column:1/-1}
  .adm-side{margin-top:var(--sp-4)}
}

/* Apple's 44px floor, keyed to the pointer rather than the viewport (theme.css does the same
   for .icon-btn) — the row action was a 28px .btn-sm, which is a miss waiting to happen. */
@media (hover:none){
  .dz-row .btn{min-height:44px}
  .seg button{min-height:40px}
  .vis-flag{min-height:44px}
}