/* ─── Staff area (/staff) ──────────────────────────────────────────────────────
   Loaded by the shell after app.css. Only layout glue for the staff pages;
   colours, spacing and type come from the shared variables, so both themes
   work without a rule here. */

/* Filter bar: fields side by side on a PC, stacked on a phone. */
.staff-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3) var(--space-4);
}
.staff-filters__row .form-group { margin-bottom: 0; min-width: 140px; flex: 1 1 140px; }
.staff-filters__row .staff-filters__search { flex: 3 1 240px; }
.staff-filters__actions { display: flex; gap: var(--space-2); align-items: center; }

/* Two cards side by side stretch to the same height only when it helps. */
.staff-grid { align-items: start; gap: var(--space-6); }
.staff-form-grid { gap: 0 var(--space-6); }
/* Name fields of the other account kind: .form-group's display would beat [hidden]. */
[data-kind-only][hidden] { display: none; }

/* Cards are <section>s for the outline; the framework gives every section a
   large bottom margin meant for page sections. Spacing here is mt-* / gap. */
.staff-card { margin-bottom: 0; }

.staff-card-title { margin: 0; font-size: var(--font-size-lg); }
/* margin-bottom only: a mt-* utility on the same heading must still apply. */
.staff-subtitle { margin-bottom: var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }

.staff-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; }

/* Label / value pairs of the detail pages. */
.staff-dl { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.staff-dl > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--space-3); }
.staff-dl dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.staff-dl dd { margin: 0; min-width: 0; }
.staff-dl--compact { gap: var(--space-1); margin: var(--space-3) 0; font-size: var(--font-size-sm); }

.staff-mono { font-family: var(--font-family-mono); font-size: var(--font-size-sm); }
.staff-break { overflow-wrap: anywhere; }
.staff-nowrap { white-space: nowrap; }

.staff-table td { vertical-align: top; }
.staff-table .badge + .badge { margin-left: var(--space-1); }

/* Single-field forms (password, unban, member search) */
.staff-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.staff-inline-form .form-group { margin-bottom: 0; flex: 1 1 240px; }

/* Group checkboxes and permission sections */
.staff-checks,
.staff-perms__section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: 0;
    min-width: 0;
}
.staff-checks legend,
.staff-perms__section legend,
.staff-perms__section summary {
    padding: 0 var(--space-1);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}
.staff-perms__section summary { cursor: pointer; padding: 0; }
.staff-perms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.staff-perms__section--other { grid-column: 1 / -1; }

/* Add-member picker */
.staff-picker { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.staff-picker li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.staff-picker li > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }

.staff-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }

/* Log lines and mail source */
.staff-log summary { cursor: pointer; }
.staff-pre {
    margin: 0;
    padding: var(--space-3);
    max-height: 420px;
    overflow: auto;
    background-color: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Outbox message preview: mails are designed for a light client, whatever the
   site theme; a light colour-scheme gives the frame the browser's light canvas. */
.staff-mail-frame {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 360px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color-scheme: light;
}

@media (max-width: 599.98px) {
    .staff-dl > div { grid-template-columns: 1fr; gap: 0; }
    .staff-filters__actions { width: 100%; }
}