#scanner-view {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

/* Nav: a brand row plus a collapsible links/user-menu group. Desktop keeps
   the original horizontal layout (toggle hidden); narrow viewports collapse
   the links behind a hamburger button so the nav never forces the whole
   page to scroll horizontally. */
.nav-toggle {
  display: none;
  width: auto;
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 1.1rem;
  line-height: 1;
}

.nav-links {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Desktop: center the main link list in the full nav bar (not just in the
   space left over after the brand), independent of how wide the brand text
   or the user menu happen to be, with the user menu pinned to the right. */
@media (min-width: 769px) {
  nav.container-fluid {
    position: relative;
  }

  .nav-links > ul:first-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }

  .nav-links > ul:last-child {
    margin-left: auto;
  }
}

.logout-form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logout-form button {
  width: auto;
  padding: 0.25rem 0.75rem;
  margin: 0;
}

@media (max-width: 768px) {
  nav.container-fluid {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-block;
  }

  .nav-links {
    display: none;
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.5rem;
  }

  .nav-links.open {
    display: block;
  }

  .nav-links ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    padding: 0.6rem 0;
  }

  .logout-form {
    padding: 0.6rem 0;
  }
}

/*
 * Data tables can be wider than a phone screen (QR codes, ISBNs, many
 * columns). Rather than let the whole page scroll horizontally, confine the
 * scroll to the table itself and keep cell content on one line so rows stay
 * compact instead of wrapping into a tall, hard-to-scan mess.
 */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table td,
  table th {
    white-space: nowrap;
  }
}

.scan-alert {
  padding: 1rem;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.scan-alert.fade-out {
  opacity: 0;
}

.scan-alert.success {
  background: color-mix(in srgb, var(--pico-ins-color) 20%, transparent);
  border: 1px solid var(--pico-ins-color);
}

.scan-alert.warning {
  background: color-mix(in srgb, #e6a700 20%, transparent);
  border: 1px solid #e6a700;
}

.scan-alert.error {
  background: color-mix(in srgb, var(--pico-del-color) 20%, transparent);
  border: 1px solid var(--pico-del-color);
}

.active-student-card {
  text-align: center;
  padding: 1.5rem;
  border: 2px dashed var(--pico-primary);
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

@media print {
  nav, .no-print {
    display: none !important;
  }
  .print-grid {
    display: grid !important;
  }
  @page {
    size: A4;
    margin: 0;
  }
}

.print-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/*
 * Avery L7160: A4 sheet, 21 labels (3 columns x 7 rows), 63.5mm x 38.1mm
 * each. Reference dimensions for this template - exact alignment still
 * depends on the printer/driver's own margin handling, which is what the
 * on-page Top/Left offset controls (--print-offset-top/-left) are for.
 * Copies are chunked into groups of 21 by the view, one .avery-grid per
 * physical sheet, so a multi-sheet print starts each new sheet aligned to
 * the template rather than overflowing mid-row onto the next page.
 */
.avery-grid {
  display: grid;
  grid-template-columns: repeat(3, 63.5mm);
  grid-auto-rows: 38.1mm;
  column-gap: 2.5mm;
  row-gap: 0mm;
  margin-top: calc(15.1mm + var(--print-offset-top, 0mm));
  margin-left: calc(7.2mm + var(--print-offset-left, 0mm));
  break-after: page;
}

.avery-grid:last-child {
  break-after: auto;
}

.avery-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 2mm;
  box-sizing: border-box;
  break-inside: avoid;
  font-size: 8pt;
}

.avery-label .qr-target {
  padding: 1mm;
}

.avery-label .qr-target canvas,
.avery-label .qr-target img {
  width: 20mm !important;
  height: 20mm !important;
}

.print-cell {
  border: 1px solid #ccc;
  padding: 0.5rem;
  text-align: center;
  break-inside: avoid;
}

/*
 * QR codes need a light "quiet zone" margin for scanners to detect their
 * edges. In dark mode the page background is dark, so without this the code
 * sits flush against it with no margin at all and becomes hard to scan.
 * Force a white background + padding here regardless of theme.
 */
.qr-target {
  display: block;
  width: fit-content;
  background: #fff;
  padding: 12px;
  border-radius: 4px;
  margin: 0 auto;
}

.print-cell img {
  display: block;
  width: 100%;
  max-width: 160px;
}

.actions-row {
  align-items: start;
  margin-bottom: calc(var(--pico-spacing) * 1.5);
}

/* A row of action buttons sized to their own text, not stretched into equal
   Pico .grid columns (which looks broken when labels vary a lot in length,
   e.g. "Add book" next to "Print class/year list"). */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pico-spacing);
  align-items: start;
  margin-bottom: calc(var(--pico-spacing) * 1.5);
}

.button-row > * {
  /* width:auto isn't enough here - a <button form="other-id"> that isn't
     physically inside its target <form> renders as a block box that fills
     the row instead of shrinking to its own content, unlike every other
     button/link/form in this row. fit-content forces content-based sizing
     regardless of that display quirk. */
  width: fit-content;
  flex: none;
  margin: 0;
}

.add-student-panel {
  margin-top: calc(var(--pico-spacing) * 1.5);
  margin-bottom: var(--pico-spacing);
}

.add-student-panel form {
  align-items: end;
}

.add-student-panel form label {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.add-student-panel input[type="text"] {
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
  height: auto;
  margin: 0;
}

.add-student-panel button[type="submit"] {
  padding: 0.2rem 0.6rem;
  font-size: 0.9rem;
  height: auto;
  margin: 0;
}

.delete-class-panel {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-box-shadow);
}

.delete-class-panel select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  height: auto;
}

.delete-class-submit {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  margin: 0;
  padding: 0.2rem 0;
  text-align: center;
  color: var(--pico-del-color);
  background: transparent;
  border-color: var(--pico-del-color);
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1;
}

.delete-class-submit:hover,
.delete-class-submit:focus {
  color: var(--pico-del-color);
  background: color-mix(in srgb, var(--pico-del-color) 15%, transparent);
  border-color: var(--pico-del-color);
}

.table-controls {
  margin-bottom: 0.5rem;
  max-width: 20rem;
}

.table-controls input {
  margin: 0;
}

.compact-table {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.compact-table th,
.compact-table td {
  padding: 0.3rem 0.5rem;
}

.compact-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.compact-table th.sortable:hover {
  color: var(--pico-primary);
}

.compact-table th.sortable .sort-indicator {
  display: inline-block;
  width: 0.75em;
  font-size: 0.75em;
  color: var(--pico-primary);
}

.compact-table td form {
  margin: 0;
}

.compact-table input[type="text"],
.compact-table select {
  margin: 0;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
  height: auto;
}

.name-inputs {
  display: flex;
  gap: 0.35rem;
}

.name-inputs input[type="text"] {
  width: auto;
  min-width: 0;
  flex: 1 1 0;
}

.class-input {
  width: 5rem;
}

.compact-table .row-actions {
  display: flex;
  gap: 0.35rem;
  white-space: nowrap;
}

.compact-table .row-actions button {
  width: auto;
  padding: 0.2rem 0.6rem;
  margin: 0;
  font-size: 0.85rem;
}

/*
 * Auto-save feedback on the Students page: briefly tint the edited field
 * itself (green on success, red on failure) rather than showing text next
 * to it, which would reflow the row and shift the Delete button.
 */
.field-flash-success,
.field-flash-error {
  transition: background-color 1s ease, border-color 1s ease;
}

.field-flash-success {
  background-color: color-mix(in srgb, var(--pico-ins-color) 25%, var(--pico-form-element-background-color));
  border-color: var(--pico-ins-color);
}

.field-flash-error {
  background-color: color-mix(in srgb, var(--pico-del-color) 25%, var(--pico-form-element-background-color));
  border-color: var(--pico-del-color);
}