/* ---- user administration (/admin/users, /admin/users/{id}) --------------------------------------------------------------
   Both pages wear the page kit (PageHero, SectionCard, ui-list rows, ui-table, chips). What is here is theirs alone: the
   dates on an account row, the inline forms of the moderation cards, the per-person section grid and the role-defaults
   grid whose column names stand on end. */

/* ---- the account list ---- */

.ua__filters { margin: 0; }
.ua__filters select { flex: 0 1 auto; }

/* Chips beside a name wrap under it rather than squeeze it to nothing. */
.ua__people .ui-row__title { flex-wrap: wrap; row-gap: 0.2rem; }
.ua__people .ui-row__title > span:first-child { flex: 0 1 auto; min-width: 0; }

/* Last seen over joined, on the right of the row. */
.ua__when { display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; }

.ua__pager { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end; }

/* ---- the role-defaults grid: sections run across, so their names stand on end rather than widen the table ---- */

.ua__grid th, .ua__grid td { text-align: center; padding: 0.35rem 0.4rem; }

/* The kit's table heads are small capitals; standing names and the role names read better as they are written. */
.ui-table .ua__grid th { text-transform: none; letter-spacing: normal; }
.ui-table .ua__grid tbody th { text-align: left; white-space: nowrap; font-size: 0.88rem; color: var(--rl-text); background: none; }
.ua__colhead { vertical-align: bottom; height: 8.5rem; }
.ua__colhead span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; font-size: 0.8rem; }
.ui-table .ua__grid .ua__grouphead {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rl-text-muted);
    border-left: 1px solid var(--rl-border); white-space: nowrap;
}
.ua__grid .ua__groupstart { border-left: 1px solid var(--rl-border); }
.ua__grid tbody tr:hover { background: var(--rl-surface-raised); }

/* ---- one person's page ---- */

/* The banner's email and id come with the account; while it loads there is no lede line at all. (An empty figures
   strip is already hidden by the kit.) */
.ua .hero__lede:empty { display: none; }

.ua__id { font-family: ui-monospace, monospace; font-size: 0.8rem; overflow-wrap: anywhere; }

/* A card's inline form: a field or two and the button that acts on them, wrapping on a narrow column. */
.ua__row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.ua__row select, .ua__row input {
    padding: 0.4rem 0.6rem; border: 1px solid var(--rl-border); border-radius: 8px;
    background: var(--rl-surface); color: var(--rl-text); font: inherit; min-width: 0;
}
.ua__row input:not([type=checkbox]) { flex: 1 1 12rem; }
.ua__row select { flex: 0 1 auto; }
.ua__row input:focus-visible, .ua__row select:focus-visible { outline: none; border-color: var(--rl-accent); box-shadow: var(--rl-ring); }
.ua__password { font-family: ui-monospace, monospace; }

.ua__check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; }
.ua__check input { margin-top: 0.2rem; }

/* The options under "Also delete everything they made", set in under the box that opens them. */
.ua__nested { display: flex; flex-direction: column; gap: 0.5rem; margin-left: 1.5rem; }
.ua__nested .ui-card__hint { margin: 0; }

.ua .ui-card > hr { border-color: var(--rl-border); opacity: 1; }

.ua__agent { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua__rowbtns { white-space: nowrap; text-align: right; }
.ua__rowbtns .btn + .btn { margin-left: 0.35rem; }

/* The permission grid: one checkbox per section, grouped by what the section is. */
.ua__sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 0.4rem; }
.ua__section {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; border: 1px solid var(--rl-border);
    border-radius: 8px; cursor: pointer; background: var(--rl-surface); min-width: 0;
    transition: background var(--rl-dur) var(--rl-ease), border-color var(--rl-dur) var(--rl-ease);
}
.ua__section span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua__section:hover { background: var(--rl-surface-raised); }
.ua__section small { margin-left: auto; font-weight: 600; }
.ua__section--granted { border-color: var(--rl-ok); }
.ua__section--granted small { color: var(--rl-ok); }
.ua__section--revoked { border-color: var(--rl-danger); }
.ua__section--revoked small { color: var(--rl-danger); }

@media (max-width: 640px) {
    /* The dates drop under the name, in line with it. */
    .ua__people .ui-row { flex-wrap: wrap; }
    .ua__people .ui-row__main { flex-basis: calc(100% - 5rem); }
    .ua__when { order: 3; flex-basis: 100%; align-items: flex-start; padding-left: 2.8rem; white-space: normal; }
    .ua__pager { justify-content: space-between; }
}

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