/* ============================================================
   EduShieldID — components/tables.css
   The shared .data-table used across every listing page, plus
   the responsive rule that lets a wide table scroll inside
   itself on narrow screens instead of stretching the page.
   ============================================================ */

/* ── Data table (shared across portals) ─────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--clr-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.data-table thead {
  background: var(--clr-bg);
  border-bottom: 1px solid var(--clr-border);
}
/* Sticky header — on a full-width table the column labels scroll away long
   before the rows do, and a wide row without visible headers is unreadable.
   `top` clears the sticky app bar so the two never overlap; 69px is the
   measured height of .app-header (12px padding + 44px content + 1px border,
   rounded up). It is a variable so a page with its own sticky toolbar can
   raise it, and so the value has one place to change if the bar is retuned. */
.data-table thead th {
  position: sticky;
  top: var(--app-header-h, 69px);
  z-index: 2;
  background: var(--clr-bg);
}
/* `overflow: hidden` on the table (for the rounded corners) would clip a
   sticky header out of existence — the two cannot coexist. Corners are
   rounded via the wrapper/first-last cells instead. */
.data-table { overflow: visible; }
.data-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-md); }
.data-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-md); }
.data-table tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--radius-md); }
.data-table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--radius-md); }

.data-table th {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--clr-text-muted);
}
.data-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--clr-border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #fafafa; }

/* Wide tables scroll inside themselves instead of stretching the page.
   `display: block` here also drops the sticky header (a block table has no
   header row to stick), which is the correct trade on a narrow screen where
   the table scrolls horizontally inside its own box. */
@media (max-width: 900px) {
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .data-table thead th { position: static; }
}

/* ── Long-table virtualization ──────────────────────────────── */
/* Applied by core/table.js once a table passes its row threshold. It lives
   here rather than in `row.style` because the app's CSP is
   `default-src 'self'` with no 'unsafe-inline', which blocks CSSOM style
   mutation too — the JS assignments it replaces were refused by the browser
   once per row and the optimisation never took effect.

   content-visibility lets the browser skip layout and paint for off-screen
   rows without removing them from the accessibility tree or from Ctrl+F,
   which a JS windowing implementation would break — a bad trade on the page
   a registrar uses to find one student. */
.data-table tbody tr.is-virtualized {
  content-visibility: auto;
  contain-intrinsic-size: 0 44px;
}

/* ── Empty state row ────────────────────────────────────────── */
/* The "nothing here yet" row inside a .data-table. Used across the academic
   structure, explorer and data-import tables, which had markup for it and no
   rule — so it rendered as an ordinary row and read like a real record with
   a blank name. Centred and de-emphasised so it is obviously not data. */
.data-table tbody tr.empty-row td {
  text-align: center;
  padding: var(--sp-6) var(--sp-3);
  color: var(--clr-text-muted);
}
/* The zebra/hover treatment on a normal row implies it is selectable. */
.data-table tbody tr.empty-row:hover { background: transparent; }

/* ── Unresolved fraud alert (school/fraud/alerts.html) ──────────
   The template already branches on `not alert.resolved` to put this class on
   the row, and the class matched nothing — so open alerts and closed ones were
   visually identical in a table whose entire purpose is telling them apart.

   A left rule plus the lightest danger tint. The tint alone is easy to miss
   when scanning; the bar alone is easy to miss when the table is wide. Both
   sit on --clr-danger-bg, which tokens.css already tuned as a text background,
   so the row's own copy keeps its contrast. The hover rule is restated because
   the generic `tbody tr:hover` further up would otherwise wash the tint back
   out to near-white on the exact rows that need to stay marked.

   Colour is not carrying this alone either: the Resolved column says so in
   words, which is what WCAG 1.4.1 asks for. */
.data-table tbody tr.fraud-alert-row--open td:first-child {
  box-shadow: inset 3px 0 0 var(--clr-danger);
}
.data-table tbody tr.fraud-alert-row--open {
  background: var(--clr-danger-bg);
}
.data-table tbody tr.fraud-alert-row--open:hover {
  background: var(--clr-danger-bg);
}