/* admin-extra — People & classes (several logins at once, class rosters), overview setup and teaching tools */

/* Jump chips at the top of People & classes */
.ax-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ax-jump .chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); cursor: pointer; font-size: .88rem; }
.ax-jump .chip:hover { border-color: var(--peacock); color: var(--peacock); }

/* Overview: teaching tools + setup steps */
.ax-tools { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ax-tool { display: flex; gap: 12px; align-items: flex-start; min-height: 64px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); text-decoration: none; }
.ax-tool:hover, .ax-tool:focus-visible { border-color: var(--peacock); }
.ax-tool > .icon { flex: none; width: 26px; height: 26px; color: var(--peacock); margin-top: 2px; }
.ax-tool-text { display: grid; gap: 1px; line-height: 1.3; }
.ax-tool-text .ml { font-weight: 600; }
.ax-tool-text .muted { font-size: .85rem; }
.ax-steps { margin: 8px 0 4px; padding-left: 1.4em; display: grid; gap: 6px; line-height: 1.5; }
.ax-steps code, .ax-setup code { overflow-wrap: anywhere; }

/* Logins list filters */
.ax-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0; }
.ax-filters .field { min-width: min(100%, 180px); flex: 0 1 220px; }
.ax-filters select { min-height: 44px; }
.ax-count { margin: 4px 0; font-size: .88rem; }

/* Add several */
.ax-many .ax-names { width: 100%; min-height: 150px; font: 1rem/1.5 var(--f-ui); padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); resize: vertical; }
.ax-many .field > label { font-weight: 600; }
.ax-preview { margin: 4px 0 10px; }
.ax-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ax-chips li { padding: 6px 12px; border-radius: var(--r-md); background: var(--leaf-soft); color: var(--ink); border: 1px solid transparent; font-size: .92rem; overflow-wrap: anywhere; }
.ax-chips li.is-note { background: var(--zari-soft); }
.ax-chips li.is-bad { background: var(--kumkum-soft); border-color: var(--kumkum); }
.ax-chips li.is-bad::before { content: '✕ '; color: var(--kumkum); font-weight: 700; }
.ax-note { color: var(--ink-2); font-size: .85rem; }
.ax-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 1.4em; margin: 6px 0; font-weight: 600; }
.ax-progress progress { width: min(100%, 260px); height: 12px; accent-color: var(--peacock); }
.ax-progress:empty { display: none; }

/* The one card of new logins */
.ax-card { margin-top: 14px; padding: 16px; border-radius: var(--r-lg); border: 2px solid var(--peacock); background: var(--surface); display: grid; gap: 10px; }
.ax-card:focus { outline: 3px solid var(--focus, var(--peacock)); outline-offset: 3px; }
.ax-card h3 { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 1.1rem; }
.ax-once { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--zari-soft); color: var(--ink); border-left: 5px solid var(--zari-deep); }
.ax-card-table code { font-size: 1rem; user-select: all; }
.ax-site { margin: 0; overflow-wrap: anywhere; }

/* Class roster editor */
.ax-roster h4.ax-sub { margin: 6px 0 0; font-size: .98rem; }
.ax-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ax-members li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px 6px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.ax-member-name { flex: 1 1 160px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ax-members .btn { margin-left: auto; }
.ax-pick { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ax-pick-row { min-height: 48px; padding: 6px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); cursor: pointer; font-weight: 400; flex-wrap: wrap; }
.ax-pick-row input { width: 22px; height: 22px; accent-color: var(--peacock); flex: none; }
.ax-pick-row:has(input:checked) { border-color: var(--peacock); background: var(--peacock-soft); }
.ax-result { padding: 10px 12px; border-radius: var(--r-md); border-left: 5px solid var(--leaf); background: var(--leaf-soft); }
.ax-result p { margin: 0; display: flex; gap: 6px; align-items: center; font-weight: 600; }
.ax-result ul { margin: 6px 0 0; padding-left: 1.3em; }
.ax-result--warn { border-left-color: var(--kumkum); background: var(--kumkum-soft); }
.ax-result:focus { outline: 3px solid var(--focus, var(--peacock)); outline-offset: 2px; }
.ax-noclass { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--r-md); background: var(--zari-soft); }

[data-contrast="high"] .ax-chips li, [data-contrast="high"] .ax-pick-row, [data-contrast="high"] .ax-members li, [data-contrast="high"] .ax-tool { border-color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) { .ax-card, .ax-result { scroll-behavior: auto; } }

/* Printing the new-logins card: only the sheet is printed */
.ax-print-sheet { display: none; }
@media print {
  body.ax-printing > *:not(.ax-print-sheet) { display: none !important; }
  body.ax-printing .ax-print-sheet { display: block; color: #000; background: #fff; font: 12pt/1.4 var(--f-ui); }
  .ax-print-sheet .ax-print-brand { font: 700 14pt var(--f-display, serif); margin: 0 0 8pt; }
  .ax-print-sheet .ax-card { border: 1.5pt solid #000; background: #fff; color: #000; }
  .ax-print-sheet .ax-once { background: none; border-left: 3pt solid #000; }
  .ax-print-sheet table { width: 100%; border-collapse: collapse; }
  .ax-print-sheet th, .ax-print-sheet td { border: .75pt solid #555; padding: 5pt 7pt; text-align: left; color: #000; background: #fff; }
  .ax-print-sheet code { font-size: 12pt; color: #000; background: none; }
  .ax-print-sheet tr { break-inside: avoid; }
  .ax-print-sheet .icon { display: none; }
}
.ax-pick-row > span:not(.avatar):not(.chip) { flex: 1 1 140px; min-width: 0; }