/* --- Admin: Settings' administrator parts, the users page ----------------------------------- */

/* Settings' Administration group (views/settings-admin.js adminGroup) is a panel like
   every Settings group; each admin page is a link row in it with its name and a line
   on what it is for. The rows reach into the panel's padding, so their text lines up
   with the title while the hover ground has room around it. */
.admin-links { display: grid; gap: var(--space-1); margin: 0 calc(-1 * var(--space-3)); padding: 0; list-style: none; }
.admin-link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease);
}
.admin-link:hover { background: rgba(255, 255, 255, .08); }
.admin-link-name { font-weight: 600; }
.admin-link-sub { color: var(--fg-muted); font-size: var(--text-sm); }

/* The rescan control in Settings' Library group (scanControl): the status line, then
   the button, each at its own width. */
.scan-control { display: grid; justify-items: start; gap: var(--space-3); margin-top: var(--space-4); }
.settings-group > .notice { margin-top: var(--space-4); }

/* --- The users page (views/admin-users.js) -------------------------------------------------- */

/* The name cell: the username at 500 with its "You" badge, the display name under it
   (.cell-sub, css/components/table.css). */
.user-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.user-name { font-weight: 500; }
.users-table th.num { text-align: right; }

/* What a non-admin sees here: one sentence and the way back. */
.admin-unavailable { display: grid; justify-items: start; gap: var(--space-4); max-width: 36rem; }

/* --- The missing-genre report (views/admin-genres.js) --------------------------------------- */

/* Two flush panels, each a title and a count over its table (or the empty state). */
.genre-report { display: grid; gap: var(--space-4); }
.genre-report > .panel + .panel { margin-top: 0; }
.genre-report-panel > .panel-title { margin: 0; padding: var(--space-5) var(--space-5) 0; }
.genre-report-count { margin: var(--space-1) 0 var(--space-3); padding: 0 var(--space-5); color: var(--fg-muted); font-size: var(--text-sm); }
.genre-report-panel > .empty-state { margin: var(--space-4) auto var(--space-6); background: none; border: 0; }
/* The album cell: a 40px cover and the name, as a link. */
.genre-report-album { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--fg); font-weight: 500; text-decoration: none; }
.genre-report-album:hover > span { text-decoration: underline; }
.genre-report-album > .cover, .genre-report-album > img { flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); }
.genre-report-table th.num { text-align: right; }
.genre-report-table .genre-cell .chip-row { gap: var(--space-1); }
@media (max-width: 40rem) {
  .genre-report-panel > .panel-title { padding: var(--space-4) var(--space-4) 0; }
  .genre-report-count { padding: 0 var(--space-4); }
  /* The card form (table.css): the facts line up with the album name, past its
     thumbnail, and "Add genre" takes the card's width under them rather than squeezing
     them into a column beside it. */
  .genre-report-table td:not(:first-child):not(.actions) { padding-left: calc(2.5rem + var(--space-3)); }
  .genre-report-table td.actions { grid-column: 1 / -1; grid-row: auto; margin-top: var(--space-3); }
  .genre-report-table td.actions .btn { width: 100%; }
}