/* =========================================================================
   Table Block — server-rendered accessible data tables.

   Follows the hours-block CSS accessibility conventions: every color is an
   explicit hex — no opacity / rgba / hsla anywhere a color appears, because
   UCLA accessibility scanners cannot model blended values.

   Contrast notes:
     header fg #003B5C on #DAEBFE → 10.6:1
     body fg   #1F2937 on #FFFFFF → 14.7:1
     zebra fg  #1F2937 on #F5F7FA → 13.5:1
   ========================================================================= */

.ucla-table-block {
  --tb-blue-dark:  #003B5C;
  --tb-blue-tint:  #DAEBFE;
  --tb-text:       #1F2937;
  --tb-rule:       #CCCCCC;
  --tb-rule-soft:  #E5E7EB;
  --tb-surface:    #FFFFFF;
  --tb-zebra:      #F5F7FA;

  margin: 24px 0;
  font-family: Helvetica, Arial, Roboto, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tb-text);
  box-sizing: border-box;
}
.ucla-table-block *, .ucla-table-block *::before, .ucla-table-block *::after { box-sizing: border-box; }

/* Scroll region: lets a wide table scroll horizontally on small screens
   without breaking the page. Focusable so keyboard users can scroll it;
   the focus ring makes the stop visible. */
.ucla-table-scroll {
  overflow-x: auto;
}
.ucla-table-scroll:focus {
  outline: 3px solid #2774AE;
  outline-offset: 2px;
}

.ucla-table {
  border-collapse: collapse;
  width: 100%;
  background: var(--tb-surface);
}

.ucla-table-caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: 18px;
  color: var(--tb-blue-dark);
  padding: 0 0 8px;
}

/* Visually-hidden caption — the standard clip pattern (position/clip only,
   no opacity). The <caption> stays in the DOM so the table always has an
   accessible name. */
.ucla-table-caption-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ucla-table th,
.ucla-table td {
  border: 1px solid var(--tb-rule);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.ucla-table thead th {
  background: var(--tb-blue-tint);
  color: var(--tb-blue-dark);
  font-weight: 700;
}

.ucla-table tbody th[scope="row"] {
  background: var(--tb-blue-tint);
  color: var(--tb-blue-dark);
  font-weight: 700;
}

/* Empty corner cell in "both" header mode. */
.ucla-table .ucla-table-corner {
  background: var(--tb-surface);
  border-bottom: 1px solid var(--tb-rule);
}

/* Zebra striping for scannability on 5+ row tables — explicit hex. */
.ucla-table tbody tr:nth-child(even) td {
  background: var(--tb-zebra);
}
.ucla-table tbody tr:nth-child(odd) td {
  background: var(--tb-surface);
}

@media (max-width: 480px) {
  .ucla-table th,
  .ucla-table td {
    padding: 8px 10px;
    font-size: 15px;
  }
}