/* M8 — admin-side overrides on top of Pico.css.

   Goal: minimal additions. Pico already covers typography, forms,
   tables, buttons, <details>, <pre>. We only patch project-specific
   surfaces (nav rendering, table density on wide pages, the
   admin/candidate name pair, the grading-notes block). Keep this
   file under ~80 lines — anything bigger means we should be using
   Pico semantics rather than fighting them. */

/* Container width: Pico's default is generous; admin tables get
   crowded fast, so we let <main> stretch a bit wider than Pico's
   built-in clamp. */
main.container,
body > main {
  max-width: 80rem;
  width: 100%;
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block: 1.5rem;
  margin-inline: auto;
}

/* Nav: Pico's <nav> renders <ul> as inline flex; we just style the
   logout form so it sits inline with the rest. */
nav.admin-nav form {
  display: inline;
  margin: 0;
}
nav.admin-nav form button {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

/* Make table preview cells (code snippets) not stretch the layout. */
table .submission-preview,
table pre {
  max-width: 28rem;
  max-height: 6rem;
  overflow: auto;
  margin: 0;
  font-size: 0.8125rem;
}

/* Candidate display-name pair. */
.admin-assigned-name { color: var(--pico-muted-color); }
.name-sep { margin-inline: 0.35rem; color: var(--pico-muted-color); }
.self-named-name { font-weight: 600; }
.self-named-empty { color: var(--pico-muted-color); font-style: italic; }

/* <details> blocks (grading notes, etc) — make the summary obviously
   clickable. Pico gives them a marker but the cursor is default. */
details > summary { cursor: pointer; }
details.grading-notes { margin-top: 1.5rem; }
details.grading-notes summary { font-weight: 600; }

/* Form fields stack vertically by default in Pico, but the inline
   filter form on submissions list should sit on one row. */
form.filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}
form.filter-form label { margin: 0; }
form.filter-form select { min-width: 12rem; }
form.filter-form button { margin: 0; }

/* Error / flash messages. */
.error,
.flash-error {
  color: var(--pico-del-color, #b3261e);
  font-weight: 600;
}

/* Keep <pre> code blocks from blowing past the container. */
pre {
  max-width: 100%;
  overflow: auto;
}