/* tables.css — page-specific table layout rules.
 *
 * Loaded by academic.html and athlete.html only; the rules here are scoped
 * to table IDs (#ucsdClasses, #grossmontClasses, #tlcaClasses, #testHistory,
 * and the three athlete competition tables) so they have no effect outside
 * those pages.  Splitting them out of theme.css saves ~12 KB of CSS
 * parse + paint on every page that doesn't have these tables (index, about,
 * professional, funtimes, license, makeup, 404, agentically-with-claude).
 *
 * If you add a new course-history or competition table, add its rules here
 * — not in theme.css — and load this file from any new page that needs it.
 */

/* Academic course history tables: fix column widths so all four tables
   align when multiple Course History sections are expanded together.
   Course Name gets the remaining space; the other five columns are
   given explicit widths that accommodate their longest content.
   Desktop: all six columns get fixed widths.
   Mobile: columns 4–6 are hidden (below), and the three remaining columns
   also use fixed widths so the two TLCA sub-tables (Grossmont HS and
   Glendale HS) stay consistent despite different course-name lengths. */
@media (min-width: 768px) {
  #ucsdClasses table,
  #grossmontClasses table,
  #tlcaClasses table {
    table-layout: fixed;
  }
  #ucsdClasses th:nth-child(1), #ucsdClasses td:nth-child(1),
  #grossmontClasses th:nth-child(1), #grossmontClasses td:nth-child(1),
  #tlcaClasses th:nth-child(1), #tlcaClasses td:nth-child(1) { width: 7%; }     /* Dept. */
  #ucsdClasses th:nth-child(2), #ucsdClasses td:nth-child(2),
  #grossmontClasses th:nth-child(2), #grossmontClasses td:nth-child(2),
  #tlcaClasses th:nth-child(2), #tlcaClasses td:nth-child(2) { width: 5%; }     /* # */
  /* nth-child(3) — Course Name — no width (takes remaining space) */
  #ucsdClasses th:nth-child(4), #ucsdClasses td:nth-child(4),
  #grossmontClasses th:nth-child(4), #grossmontClasses td:nth-child(4),
  #tlcaClasses th:nth-child(4), #tlcaClasses td:nth-child(4) { width: 18%; }    /* Instructor */
  #ucsdClasses th:nth-child(5), #ucsdClasses td:nth-child(5),
  #grossmontClasses th:nth-child(5), #grossmontClasses td:nth-child(5),
  #tlcaClasses th:nth-child(5), #tlcaClasses td:nth-child(5) { width: 14%; }    /* Academic Period */
  #ucsdClasses th:nth-child(6), #ucsdClasses td:nth-child(6),
  #grossmontClasses th:nth-child(6), #grossmontClasses td:nth-child(6),
  #tlcaClasses th:nth-child(6), #tlcaClasses td:nth-child(6) { width: 8%; }     /* Catalog */
}

/* Academic course history tables: hide the Instructor (4th), Academic
   Period (5th), and Course Description link (6th) columns on mobile to
   prevent horizontal overflow on narrow screens.  The three remaining
   visible columns (Dept., #, Course Name) fit comfortably within a 375 px
   viewport.  Academic Period and the Course Description link move into the
   mobile row-expand detail row.  Using nth-child rather than per-cell
   d-none classes because there are ~60+ data cells across the four tables. */
@media (max-width: 767.98px) {
  #ucsdClasses th:nth-child(4),
  #ucsdClasses td:nth-child(4),
  #ucsdClasses th:nth-child(5),
  #ucsdClasses td:nth-child(5),
  #ucsdClasses th:nth-child(6),
  #ucsdClasses td:nth-child(6),
  #grossmontClasses th:nth-child(4),
  #grossmontClasses td:nth-child(4),
  #grossmontClasses th:nth-child(5),
  #grossmontClasses td:nth-child(5),
  #grossmontClasses th:nth-child(6),
  #grossmontClasses td:nth-child(6),
  #tlcaClasses th:nth-child(4),
  #tlcaClasses td:nth-child(4),
  #tlcaClasses th:nth-child(5),
  #tlcaClasses td:nth-child(5),
  #tlcaClasses th:nth-child(6),
  #tlcaClasses td:nth-child(6) {
    display: none;
  }
}

/* Academic course history tables: fix the three visible mobile columns so
   all sections render consistently.  Dept. (20%) and # (15%) get explicit
   widths; Course Name takes the remaining 65%.  Without this, the two
   sub-tables inside #tlcaClasses (Grossmont HS and Glendale HS) auto-size
   their Course Name column differently because one has a 62-character name
   while the other has names under 20 characters. */
@media (max-width: 767.98px) {
  #ucsdClasses table,
  #grossmontClasses table,
  #tlcaClasses table {
    table-layout: fixed;
  }
  #ucsdClasses th:nth-child(1), #ucsdClasses td:nth-child(1),
  #grossmontClasses th:nth-child(1), #grossmontClasses td:nth-child(1),
  #tlcaClasses th:nth-child(1), #tlcaClasses td:nth-child(1) { width: 20%; }  /* Dept. */
  #ucsdClasses th:nth-child(2), #ucsdClasses td:nth-child(2),
  #grossmontClasses th:nth-child(2), #grossmontClasses td:nth-child(2),
  #tlcaClasses th:nth-child(2), #tlcaClasses td:nth-child(2) { width: 15%; }  /* # */
  /* Course Name (col 3) — 65 %: explicit so hidden cols 4–6 cannot claim remaining space.
     The mobile detail row uses colspan = row.cells.length = 6, which forces table-layout:
     fixed to maintain 6 column slots.  Without an explicit width here, Course Name splits
     the unallocated 65 % equally with Instructor, Academic Period, and Catalog, leaving
     Course Name with only ~16 % (≈ 62 px) instead of the full 65 % (≈ 253 px). */
  #ucsdClasses th:nth-child(3), #ucsdClasses td:nth-child(3),
  #grossmontClasses th:nth-child(3), #grossmontClasses td:nth-child(3),
  #tlcaClasses th:nth-child(3), #tlcaClasses td:nth-child(3) { width: 65%; }  /* Course Name */
  /* Hidden columns (cols 4–6): width:0 so they cannot claim any share of the unallocated space */
  #ucsdClasses th:nth-child(4), #ucsdClasses td:nth-child(4),
  #grossmontClasses th:nth-child(4), #grossmontClasses td:nth-child(4),
  #tlcaClasses th:nth-child(4), #tlcaClasses td:nth-child(4) { width: 0; }    /* Instructor */
  #ucsdClasses th:nth-child(5), #ucsdClasses td:nth-child(5),
  #grossmontClasses th:nth-child(5), #grossmontClasses td:nth-child(5),
  #tlcaClasses th:nth-child(5), #tlcaClasses td:nth-child(5) { width: 0; }    /* Academic Period */
  #ucsdClasses th:nth-child(6), #ucsdClasses td:nth-child(6),
  #grossmontClasses th:nth-child(6), #grossmontClasses td:nth-child(6),
  #tlcaClasses th:nth-child(6), #tlcaClasses td:nth-child(6) { width: 0; }    /* Catalog */
  /* Dept. 20 + # 15 + Course Name 65 = 100 %; Instructor 0 + Period 0 + Catalog 0 = 0 % */
}

/* Consistent vertical alignment for all academic course table cells */
#ucsdClasses td,
#grossmontClasses td,
#tlcaClasses td {
  vertical-align: middle;
}

/* Athlete competition tables: fix column widths so all three tables
   (Competition Gallery, Ice Dance, Pairs) align when multiple Competition
   History sections are expanded simultaneously — same approach as the
   academic course tables.  Event gets the remaining space; the other five
   columns are given explicit widths that accommodate their longest content.

   Desktop (≥ 992 px / lg+): all six columns get fixed widths.
   At lg (992–1199 px), Details (col 6) is d-none d-xl-table-cell so it's
   hidden and its width slot is removed from the layout; Event absorbs the
   extra space.  At xl (≥ 1200 px) Details becomes visible and takes its 12 %
   share, narrowing Event accordingly.
   Details is 12 % (not 10 %) so the "Event Details" button (btn-sm + padding
   ≈ 108 px) fits without clipping at the xl breakpoint where the Bootstrap xl
   container (max 1140 px) minus gutters leaves ~1116 px; 10 % = 112 px with
   only 96 px of cell content area after td padding, which is insufficient.
   Location is 24 % (not 20 %) because Bootstrap td padding (8 px each side)
   reduces usable content area: at the lg minimum (992 px) the table is ~936 px
   wide, so 20 % yields only ~171 px of content — not enough for the longest
   location "Colorado Springs, CO" (~175–180 px depending on system font), which
   caused the trailing "CO" to bleed into the adjacent Result column.  24 % gives
   ~209 px of content, a comfortable ~30 px margin across all platforms. */
@media (min-width: 992px) {
  #competitionGallery table,
  #iceDanceHistory table,
  #pairsHistory table {
    table-layout: fixed;
  }
  #competitionGallery th:nth-child(1), #competitionGallery td:nth-child(1),
  #iceDanceHistory th:nth-child(1), #iceDanceHistory td:nth-child(1),
  #pairsHistory th:nth-child(1), #pairsHistory td:nth-child(1) { width: 10%; }     /* Season */
  /* nth-child(2) — Event — no width (takes remaining space) */
  #competitionGallery th:nth-child(3), #competitionGallery td:nth-child(3),
  #iceDanceHistory th:nth-child(3), #iceDanceHistory td:nth-child(3),
  #pairsHistory th:nth-child(3), #pairsHistory td:nth-child(3) { width: 11%; }     /* Level */
  #competitionGallery th:nth-child(4), #competitionGallery td:nth-child(4),
  #iceDanceHistory th:nth-child(4), #iceDanceHistory td:nth-child(4),
  #pairsHistory th:nth-child(4), #pairsHistory td:nth-child(4) { width: 24%; }    /* Location */
  #competitionGallery th:nth-child(5), #competitionGallery td:nth-child(5),
  #iceDanceHistory th:nth-child(5), #iceDanceHistory td:nth-child(5),
  #pairsHistory th:nth-child(5), #pairsHistory td:nth-child(5) { width: 8%; }      /* Result */
  #competitionGallery th:nth-child(6), #competitionGallery td:nth-child(6),
  #iceDanceHistory th:nth-child(6), #iceDanceHistory td:nth-child(6),
  #pairsHistory th:nth-child(6), #pairsHistory td:nth-child(6) { width: 12%; }     /* Details */
}

/* Athlete competition tables below the lg breakpoint (< 992 px).
   Root cause: table-layout: auto allocates space to hidden columns because
   the gallery-row <td colspan="6"> forces the browser to maintain 6 logical
   columns, and each column without an explicit width receives an equal share
   of the remaining space.  On mobile, Level (col 3), Location (col 4), and
   Details (col 6) are display:none but can still claim that share, leaving
   Event with only ~12 % (≈ 49 px) of the table width.

   Fix: table-layout: fixed with ALL six columns pinned explicitly so the
   hidden columns have zero remaining space to claim.  Season (25%), Event
   (50%), and Result (25%) sum to 100 %, which forces Level, Location, and
   Details (each width:0) to zero — regardless of whether display:none alone
   excludes them from the fixed-layout algorithm. */
@media (max-width: 991.98px) {
  #competitionGallery table,
  #iceDanceHistory table,
  #pairsHistory table {
    table-layout: fixed;
  }
  /* Season (col 1) — 25 % */
  #competitionGallery th:nth-child(1), #competitionGallery td:nth-child(1),
  #iceDanceHistory th:nth-child(1), #iceDanceHistory td:nth-child(1),
  #pairsHistory th:nth-child(1), #pairsHistory td:nth-child(1) { width: 25%; }
  /* Event (col 2) — 50 %: explicit so hidden cols cannot claim remaining space */
  #competitionGallery th:nth-child(2), #competitionGallery td:nth-child(2),
  #iceDanceHistory th:nth-child(2), #iceDanceHistory td:nth-child(2),
  #pairsHistory th:nth-child(2), #pairsHistory td:nth-child(2) { width: 50%; }
  /* Level (col 3) and Location (col 4): display:none + width:0 */
  #competitionGallery th:nth-child(3), #competitionGallery td:nth-child(3),
  #competitionGallery th:nth-child(4), #competitionGallery td:nth-child(4),
  #iceDanceHistory th:nth-child(3), #iceDanceHistory td:nth-child(3),
  #iceDanceHistory th:nth-child(4), #iceDanceHistory td:nth-child(4),
  #pairsHistory th:nth-child(3), #pairsHistory td:nth-child(3),
  #pairsHistory th:nth-child(4), #pairsHistory td:nth-child(4) { width: 0; }
  /* Result (col 5) — 25 % */
  #competitionGallery th:nth-child(5), #competitionGallery td:nth-child(5),
  #iceDanceHistory th:nth-child(5), #iceDanceHistory td:nth-child(5),
  #pairsHistory th:nth-child(5), #pairsHistory td:nth-child(5) { width: 25%; }
  /* Details (col 6): display:none + width:0 */
  #competitionGallery th:nth-child(6), #competitionGallery td:nth-child(6),
  #iceDanceHistory th:nth-child(6), #iceDanceHistory td:nth-child(6),
  #pairsHistory th:nth-child(6), #pairsHistory td:nth-child(6) { width: 0; }
  /* Season 25 + Event 50 + Result 25 = 100 %; Level 0 + Location 0 + Details 0 = 0 % */
}

/* ─── USFS Test Record tables ───────────────────────────────────────────────
   Two sets of tables inside #testHistory:

   1) Outer discipline summary (.table-test-disciplines): one table, 4 columns.
      Discipline | Highest Test | Tests Passed (d-none d-lg) | Tests (d-none d-xl)
      At xl+ all four columns are visible and align with the competition tables:
      Discipline spans Season+Event (45 %), Highest Test spans Level+Location
      (35 %), Tests Passed = Result (8 %), Tests button = Details (12 %).
      The gallery-row <td colspan="4"> forces 4 logical columns; fixed layout
      pins them and lets hidden columns receive width:0 at narrower viewports.

   2) Inner per-discipline test tables (inside .row-gallery): six separate
      tables, 3 columns each.
      Test | Club (d-none d-lg) | Date
      All six must use identical widths so they align when multiple sections
      are expanded simultaneously — same approach as the competition tables.
      At lg+, Test aligns with Discipline and Club aligns with Highest Test;
      Date spans the remainder. */

/* Outer discipline summary table — wide desktop (xl+, ≥ 1200 px): all 4 visible.
   Aligned with competition tables: Discipline = Season+Event (45 %),
   Highest Test = Level+Location (35 %), Tests Passed = Result (8 %),
   Tests button = Details (12 %). */
@media (min-width: 1200px) {
  .table-test-disciplines {
    table-layout: fixed;
  }
  .table-test-disciplines th:nth-child(1), .table-test-disciplines td:nth-child(1) { width: 45%; }  /* Discipline */
  .table-test-disciplines th:nth-child(2), .table-test-disciplines td:nth-child(2) { width: 35%; }  /* Highest Test */
  .table-test-disciplines th:nth-child(3), .table-test-disciplines td:nth-child(3) { width:  8%; }  /* Tests Passed */
  .table-test-disciplines th:nth-child(4), .table-test-disciplines td:nth-child(4) { width: 12%; }  /* Tests button */
  /* 45 + 35 + 8 + 12 = 100 % */
}

/* Outer discipline summary table — desktop (lg–xl, 992–1199.98 px): Tests button hidden. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .table-test-disciplines {
    table-layout: fixed;
  }
  .table-test-disciplines th:nth-child(1), .table-test-disciplines td:nth-child(1) { width: 45%; }  /* Discipline */
  .table-test-disciplines th:nth-child(2), .table-test-disciplines td:nth-child(2) { width: 47%; }  /* Highest Test — absorbs Tests button */
  .table-test-disciplines th:nth-child(3), .table-test-disciplines td:nth-child(3) { width:  8%; }  /* Tests Passed */
  .table-test-disciplines th:nth-child(4), .table-test-disciplines td:nth-child(4) { width:  0%; }  /* Tests button — hidden */
  /* 45 + 47 + 8 + 0 = 100 % */
}

/* Outer discipline summary table — below lg (< 992 px): Tests Passed and Tests button hidden. */
@media (max-width: 991.98px) {
  .table-test-disciplines {
    table-layout: fixed;
  }
  .table-test-disciplines th:nth-child(1), .table-test-disciplines td:nth-child(1) { width: 55%; }  /* Discipline */
  .table-test-disciplines th:nth-child(2), .table-test-disciplines td:nth-child(2) { width: 45%; }  /* Highest Test */
  .table-test-disciplines th:nth-child(3), .table-test-disciplines td:nth-child(3) { width:  0%; }  /* Tests Passed — hidden */
  .table-test-disciplines th:nth-child(4), .table-test-disciplines td:nth-child(4) { width:  0%; }  /* Tests button — hidden */
  /* 55 + 45 + 0 + 0 = 100 % */
}

/* Inner per-discipline test tables: transparent cell backgrounds so they blend
   with the .row-gallery grey (#f8f9fa) instead of showing Bootstrap's default
   white table-bg, which makes the cells stand out against the gallery. */
#testHistory .row-gallery .table > :not(caption) > * > * {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
}

/* Inner per-discipline test tables — desktop (lg+, ≥ 992 px): all 3 visible.
   Test aligns with Discipline (45 %), Club aligns with Highest Test (35 %),
   Date spans the remainder (20 %).  At xl+ these edges match the outer table
   exactly; at lg–xl the outer Highest Test column is wider (47 %) because it
   absorbs the hidden Tests button, but the first-column edge stays aligned. */
@media (min-width: 992px) {
  #testHistory .row-gallery table {
    table-layout: fixed;
  }
  #testHistory .row-gallery th:nth-child(1),
  #testHistory .row-gallery td:nth-child(1) { width: 45%; }  /* Test — aligns with Discipline */
  #testHistory .row-gallery th:nth-child(2),
  #testHistory .row-gallery td:nth-child(2) { width: 35%; }  /* Club — aligns with Highest Test */
  #testHistory .row-gallery th:nth-child(3),
  #testHistory .row-gallery td:nth-child(3) { width: 20%; }  /* Date — spans remainder */
  /* 45 + 35 + 20 = 100 % */
}

/* Inner per-discipline test tables — below lg (< 992 px): Club hidden.
   Test aligns with Discipline (55 %), Date with Highest Test (45 %). */
@media (max-width: 991.98px) {
  #testHistory .row-gallery table {
    table-layout: fixed;
  }
  #testHistory .row-gallery th:nth-child(1),
  #testHistory .row-gallery td:nth-child(1) { width: 55%; }  /* Test — aligns with Discipline */
  #testHistory .row-gallery th:nth-child(2),
  #testHistory .row-gallery td:nth-child(2) { width:  0%; }  /* Club — hidden */
  #testHistory .row-gallery th:nth-child(3),
  #testHistory .row-gallery td:nth-child(3) { width: 45%; }  /* Date — aligns with Highest Test */
  /* 55 + 0 + 45 = 100 % */
}