/* Only what the list adds. Tokens, card, row, tabs and buttons all come from
   access.css, so Access Management and Admin management stay one product. */
.au-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; max-width: 1180px; margin-bottom: 18px;
}
.au-search { max-width: 280px; }

.acc-row.au-head, .acc-row.au-row {
    grid-template-columns: minmax(0, 2.1fr) 0.8fr 1.1fr minmax(0, 1.3fr);
}
.acc-row.au-row.is-deleted { opacity: .62; }

.acc-name-meta.unreadable { color: var(--warn-ink); }

/* ---- Status ------------------------------------------------------------
   The column this page is for. An account created with a random password that
   never set one cannot sign in at all, and looked identical to a working
   account before this existed. */
.au-status { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.au-state {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; padding: 2px 10px;
    border-radius: var(--r-pill); white-space: nowrap;
}
.au-state::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex: none;
}
.au-state.is-live { color: var(--green-700); background: rgba(37, 211, 102, .14); }
.au-state.is-pending { color: var(--warn-ink); background: var(--warn-bg); }
.au-state.is-gone { color: var(--faint); background: #eef1f0; }
.au-state-meta { font-size: 12px; color: var(--faint); }

.au-role { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.au-role.is-none { color: var(--faint); font-weight: 500; }

/* The only number worth interrupting over — and a control, not a notice, since
   the default filter can hide the very accounts it is reporting. */
.au-flag {
    display: flex; align-items: center; gap: 10px; width: 100%; max-width: 1180px;
    background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
    border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
    font-family: inherit; font-size: 13.5px; line-height: 1.5; text-align: left;
    cursor: pointer; transition: background .14s;
}
.au-flag:hover { background: #fff3dd; }
.au-flag:focus-visible { outline: 2px solid var(--warn-ink); outline-offset: 2px; }
.au-flag-go {
    margin-left: auto; font-weight: 700; white-space: nowrap;
    border-bottom: 1px solid currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .au-flag { transition: none; }
}

/* ---- Actions -----------------------------------------------------------
   Quiet until wanted. Delete stays a word rather than an icon — it is the one
   action worth reading before clicking — but carries no weight until hover. */
.au-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.acc-reset.is-danger { color: var(--muted); }
.acc-reset.is-danger:hover:not(:disabled) { color: #9b2c2c; border-color: #9b2c2c; }
.acc-reset:disabled { cursor: not-allowed; }

/* ---- Editing -----------------------------------------------------------
   The row it replaced is gone from the screen, so the form says whose account
   it is and every field carries a visible label. */
.au-row-edit { display: block; padding: 20px 22px; background: var(--surface-2); }
.au-edit-who { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.au-edit-who strong { color: var(--ink); font-weight: 700; }
.au-edit-fields {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px 16px; margin-bottom: 4px;
}
.au-note {
    font-size: 12.5px; color: var(--muted); line-height: 1.5;
    margin-top: 12px; max-width: 620px;
}
.au-edit-bar { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.au-edit-hint { font-size: 12px; color: var(--faint); }

@media (max-width: 820px) {
    .acc-row.au-head { display: none; }
    .acc-row.au-row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
    .au-status { flex-direction: row; align-items: center; gap: 8px; }
    .au-actions { justify-content: flex-start; }
    .au-search { max-width: 100%; flex: 1; }
}