/* Permission picker: a filterable, sectioned checkbox list.

   Shared by the account permission modal and the role editor. Rows are
   list-group items, headings wear .section-label, notes are badges and
   the search box is the theme's input group; only what none of those has
   a notion of is here — the check glyph, collapsing a section, and the
   locked state an administrator permission puts the list into.

   Sections are feature areas. One is collapsed unless it holds something
   already granted, so a 110-permission list opens as a stack of headings. */

/* The box is a real checkbox held off-screen by .d-none; this glyph is
   what you see, and the whole row-label is what you click. Same trick as
   the column dropdown. */
.perm-check {
    flex: none;
    width: 1em;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    line-height: 1.15rem;
}

.perm-check::before {
    content: "\f0c8"; /* fa-square */
}

input:checked ~ .perm-check,
input:checked + .perm-check {
    color: var(--bs-primary);
}

input:checked ~ .perm-check::before,
input:checked + .perm-check::before {
    content: "\f14a"; /* fa-check-square */
}

/* ------------------------------- SECTIONS --------------------------------- */

/* list-group.css rounds its first and last row so a group that scrolls
   still follows the frame. Sections put every row under a wrapper, so
   those selectors match once per section and stripe the list with cut
   corners. This group does not scroll — the modal body does — so the
   frame's own clip is enough and the rows stay square. */
.perm-picker__body .list-group-item {
    border-radius: 0;
}

/* A heading, not a row: .section-label carries the type, this carries the
   tint and the block geometry a list group assumes but a <button> does
   not supply. Deliberately not `.list-group-item-action` — that class
   exists to make a row look like a link, and its :hover/:focus/:active
   fills are all more specific than this tint, so borrowing it means the
   heading loses its colour for as long as it holds focus. The two states
   it does need are below. */
.perm-section__head {
    width: 100%;
    text-align: left;
    background: var(--bg-mid);
}

.perm-section__head:hover {
    background: var(--bg-overlay);
}

/* A click must not leave the heading outlined; keyboard focus must. */
.perm-section__head:focus {
    outline: none;
}

.perm-section__head:focus-visible {
    outline: 2px solid rgba(var(--bs-primary-rgb), 0.6);
    outline-offset: -2px;
}

/* The seams list-group.css draws with `+` stop at the section wrapper, so
   every row but the first restates one. Rows inside a section are the
   quieter border: the heading is what divides the list. */
[data-perm-section] + [data-perm-section] > .perm-section__head {
    border-top: 1px solid var(--border-normal);
}

.perm-section__body > .list-group-item {
    border-top: 1px solid var(--border-subtle);
}

.perm-section__caret {
    width: 0.75rem;
    color: var(--text-tertiary);
    font-size: 0.625rem;
    transition: transform 0.15s ease;
}

[data-perm-section][data-open] .perm-section__caret {
    transform: rotate(90deg);
}

/* Undoes the caps treatment .section-label puts on the whole heading: the
   count is a number, and tracking a number apart only makes it harder to
   read at a glance. */
.perm-section__count {
    color: var(--text-muted);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.perm-section__count[data-any] {
    color: var(--bs-primary);
    font-weight: 600;
}

.perm-section__body {
    display: none;
}

[data-perm-section][data-open] .perm-section__body {
    display: block;
}

/* --------------------------------- ROWS ----------------------------------- */

.perm-item {
    cursor: pointer;
    margin-bottom: 0;
}

/* Ticked by an attached role, not by whoever is looking at the form: the
   glyph takes the role badge's hue rather than the primary one a direct
   grant gets, and the row does not respond to the pointer because its
   box is disabled. */
.perm-item--from-role {
    cursor: default;
}

.perm-item--from-role input:checked ~ .perm-check {
    color: var(--bs-info);
}

/* ---------------------------- ADMIN PERMISSION ---------------------------- */

/* The admin permission is a one-row list group of its own above the
   sections: it is not one choice among the rest, it is the switch that
   settles all of them. Only the on-state is ours: warning, because what
   the switch does to everything below it is the thing worth flagging.

   The fill is the row's and the edge is the group's — a list group draws
   its frame on the container, so tinting the row alone leaves a warning
   fill inside a neutral border. */
.perm-picker[data-admin-on] .perm-admin {
    background: rgba(var(--bs-warning-rgb), 0.1);
}

.perm-picker[data-admin-on] .perm-admin-block {
    border-color: rgba(var(--bs-warning-rgb), 0.4);
}

/* A note is only worth making once the switch is on — otherwise it warns
   about a state the form is not in. */
.perm-admin__note,
.perm-sub-admin__note {
    display: none;
}

.perm-picker[data-admin-on] .perm-admin__note,
.perm-picker[data-sub-admin-on] .perm-sub-admin__note {
    display: inline-flex;
}

/* Admin already says everything below is locked, and it outranks the
   second tier, so two notes would only disagree about how much. */
.perm-picker[data-admin-on] .perm-sub-admin__note {
    display: none;
}

/* Locked, not hidden: what an administrator covers is exactly what is
   listed below, so the list stays readable while it says it is not yours
   to set. The second tier covers every section but its own.

   The boxes are disabled too, but they are `.d-none` — the glyph beside
   them is what is on screen, so without this the rows lock silently and
   look untouched. */
.perm-picker[data-admin-on] .perm-picker__body,
.perm-picker[data-sub-admin-on] [data-perm-section]:not([data-own-section]) {
    opacity: 0.45;
    pointer-events: none;
}

/* ------------------------------- ROLE CHIPS -------------------------------- */

/* A badge that is also the control that detaches the role, so it has to
   answer the pointer — a badge alone reads as a label. The × is the
   affordance and the only thing hover changes: recolouring the whole
   chip means inventing a second badge colour for a transient state. */
.role-chip {
    cursor: pointer;
}

.role-chip .fa-times {
    opacity: 0.55;
}

.role-chip:hover .fa-times {
    opacity: 1;
}

/* --------------------------------- FILTER --------------------------------- */

.perm-picker__empty {
    display: none;
}

.perm-picker[data-no-matches] .perm-picker__empty {
    display: block;
}

/* Beats `.d-flex`, which the rows carry and which is !important in
   Bootstrap's utilities — without this the filter can only hide whole
   sections and every row stays on screen. */
[data-perm-item][hidden],
[data-perm-section][hidden] {
    display: none !important;
}