/* ============================================================
   BARAEM GRADEFLOW — WIDE TABLES

   A wide table must never lose data to a narrow screen. This is one component,
   used by every page, so a pupil list, an import preview and a year-by-year
   table all behave the same way:

     · the table scrolls horizontally inside its own container
     · the page itself never scrolls sideways
     · the identifying column (name, subject, year) stays pinned while scrolling
     · a fade plus a hint says there is more to see

   The alternative — dropping columns on a phone — was rejected: a teacher must
   not lose access to a figure because the screen is 360px wide.
   ============================================================ */

/* ------------------------------------------------------------
   CONTAINER
   ------------------------------------------------------------ */
.scroller {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.scroller > .scroller-view {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  max-height: var(--tbl-max, none);
}
.scroller.is-tall > .scroller-view { overflow-y: auto; }

/* the fade only appears when there is genuinely more to the right, and it must
   never sit on top of the last column's value */
.scroller::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 42px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  background: linear-gradient(to left,
    var(--surface) 0%, var(--surface) 26%, transparent 100%);
}
.scroller.can-scroll::after { opacity: 1; }
.scroller.at-end::after { opacity: 0; }

/* the sticky label column: opaque so rows read through it correctly */
.scroller table.sc {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-13);
}
.scroller table.sc th,
.scroller table.sc td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border-soft);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
  background: var(--surface);
}
.scroller table.sc thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-3);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}
.scroller table.sc tbody tr:last-child td { border-bottom: 0; }
.scroller table.sc tbody tr:hover td { background: var(--surface-2); }
.scroller table.sc .n {
  text-align: end;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.scroller table.sc .strong { font-weight: 650; }
.scroller table.sc .muted { color: var(--text-mute); }

/* the pinned column */
.scroller table.sc .pin {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  font-weight: 650;
  box-shadow: 1px 0 0 var(--border);
}
.scroller[dir="rtl"] table.sc .pin { box-shadow: -1px 0 0 var(--border); }
.scroller table.sc thead th.pin { z-index: 4; background: var(--surface-3); }
.scroller table.sc tbody tr:hover td.pin { background: var(--surface-2); }

/* ------------------------------------------------------------
   HINT — a single quiet line under the table. Shown once per
   session; it is a direction, not a warning.
   ------------------------------------------------------------ */
.scroller-hint {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: var(--t-11);
  color: var(--text-mute);
}
.scroller-hint svg { width: 13px; height: 13px; flex: 0 0 13px; opacity: .7; }
.scroller-hint .hint-dismiss {
  margin-inline-start: auto;
  border: 0; background: none; cursor: pointer;
  color: var(--text-mute); font: inherit; padding: 2px 6px; border-radius: var(--r-xs);
}
.scroller-hint .hint-dismiss:hover { background: var(--surface-sunk); color: var(--text); }

/* ------------------------------------------------------------
   SMALL SCREENS — tighter type and padding, but never fewer columns
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .scroller table.sc { font-size: var(--t-12); min-width: max-content; }
  .scroller table.sc th,
  .scroller table.sc td { padding: var(--s-2) var(--s-3); }
  .scroller table.sc .pin { position: sticky; }
  .scroller::after { width: 28px; }
  .scroller-hint { font-size: var(--t-11); }
}

@media print {
  .scroller { border: 0; }
  .scroller::after, .scroller-hint { display: none !important; }
  .scroller > .scroller-view { overflow: visible !important; max-height: none !important; }
  .scroller table.sc .pin { position: static; box-shadow: none; }
}

/* ------------------------------------------------------------
   PAGINATION
   One strip under the table: what is shown, which page, how many rows.
   Deliberately not a toolbar and not a row of number buttons — a school
   administrator reads "Showing 1–50 of 564" faster than "1 2 3 … 12".
   ------------------------------------------------------------ */
.pgwrap { display: block; }

.pg {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-1) var(--s-1);
  font-size: var(--t-12); color: var(--text-mute);
}
.pg-count b, .pg-n b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

.pg-mid { display: inline-flex; align-items: center; gap: var(--s-2); margin-inline: auto; }
.pg-b {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-soft);
  font-size: var(--t-15); line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pg-b:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.pg-b:disabled { opacity: .38; cursor: default; }
.pg-b:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 1px; }

.pg-size { display: inline-flex; align-items: center; gap: var(--s-2); }
.pg-size > span { font-size: var(--t-11); }
.pg-sel { min-width: 62px; }

@media (max-width: 640px) {
  .pg { gap: var(--s-2); justify-content: space-between; }
  .pg-mid { margin-inline: 0; order: -1; width: 100%; justify-content: center; }
  .pg-size { margin-inline-start: auto; }
}

@media print {
  .pg-mid, .pg-size { display: none !important; }
  .pg { border: 0; padding: var(--s-2) 0 0; }
}