/* Search, sort and Refresh all sit in the panel head's RIGHT slot (the search is .nl-search-mini,
   compact until focused). `width: auto` is load-bearing on the sort: .nl-sel is width:100% for
   the filter-rail COLUMN, and in a row that makes it claim the full line and wrap the next. */

.roles-admin-screen .roles-admin-sort { width: auto; }
@media (max-width: 640px) {
  /* One line: the search shrinks beside the ⇅ and ↻ icon buttons. An `auto` basis resolves to
     the input's ~205px intrinsic size and wraps the tools onto a second row. */
  .roles-admin-screen .roles-admin-sort { flex: 0 1 auto; }
}

/* min-width + the .bf-table-scroll wrapper: the three role columns keep their 110px and the table
   scrolls sideways on a phone instead of crushing every label to one word per line.
   `auto` overrides .data-table's fixed layout so the label column takes the remaining slack. */
.roles-admin-table { width: 100%; min-width: 560px; table-layout: auto; }
.roles-admin-table td.roles-cell,
.roles-admin-table th.roles-cell { text-align: center; width: 110px; }
.roles-admin-table th:first-child,
.roles-admin-table td:first-child { min-width: 220px; }

/* Pinned rows are visible but locked — greyed. */
.roles-row-pinned td { color: var(--ink-3); }

/* Commit on the left, its "Saved." flash beside it. */
.roles-admin-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* Match the leaderboard: neutral --divider row rules, not .data-table's bronze-tinted
   --border-color, which reads heavier at this row density. Same specificity as the shared
   rule (0,1,2) — this wins on link order, so keep this sheet loaded after layout.css. */
.roles-admin-table tbody td { border-bottom-color: var(--divider); }