body {
    font-family: Arial, sans-serif;
    margin: 2rem;
    color: #222;
}

header {
    border-bottom: 1px solid #ccc;
    margin-bottom: 1.5rem;
}

.error {
    color: #900;
    background: #fee;
    border: 1px solid #d99;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

button {
    padding: 0.4rem 0.8rem;
}

/* General page style */
body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 2rem;
    color: #222;
    background: #fff;
}

header {
    border-bottom: 1px solid #ccc;
    margin-bottom: 1.5rem;
}

.error {
    color: #900;
    background: #fee;
    border: 1px solid #d99;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

button {
    padding: 0.4rem 0.8rem;
}

/* Search results table */
.results-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 1500px;
    font-size: 18px;
}

.results-table th,
.results-table td {
    border: 2px solid #444;
    padding: 8px 10px;
    vertical-align: middle;
}

.results-table th {
    font-weight: bold;
    text-align: center;
    background: #f7f7f7;
}

.results-table td a {
    color: #0049d8;
    text-decoration: underline;
}

/* Event report layout */
.event-report {
    max-width: 820px;
    font-size: 14px;
    line-height: 1.25;
}

.nav-links {
    margin-bottom: 1rem;
}

.report-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 14px;
}

/* Compact summary table */
.summary-table {
    border-collapse: collapse;
    margin-bottom: 18px;
    min-width: 360px;
}

.summary-table th,
.summary-table td {
    border: 2px solid #bcbcbc;
    padding: 8px 10px;
}

.summary-table th {
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    background: #fafafa;
}

.summary-table td {
    min-width: 220px;
}

/* Gear */
.section-title {
    font-size: 15px;
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 6px;
}

.gear-table {
    border-collapse: collapse;
    margin-bottom: 16px;
    min-width: 260px;
}

.gear-table td {
    border: 2px solid #222;
    padding: 2px 8px;
}

.gear-table td:first-child {
    min-width: 90px;
}

.gear-table td:nth-child(2) {
    min-width: 120px;
}

/* Small info table, e.g. Start Gate Release Time */
.small-info-table {
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 18px;
}

.small-info-table th,
.small-info-table td {
    border: 2px solid #bcbcbc;
    padding: 7px 10px;
}

.small-info-table th {
    font-weight: normal;
    background: #fafafa;
}

/* Data block titles */
.block-title {
    font-size: 15px;
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 4px;
    border: 2px solid #aaa;
    border-bottom: none;
    padding: 4px 8px;
    width: fit-content;
    min-width: 620px;
    box-sizing: border-box;
}

/* Split/lap tables */
.split-table {
    border-collapse: collapse;
    margin-bottom: 16px;
    min-width: 620px;
    font-size: 13px;
}

.split-table th,
.split-table td {
    border: 2px solid #aaa;
    padding: 5px 7px;
    text-align: left;
}

.split-table th {
    font-weight: bold;
    text-align: center;
    background: #fbfbfb;
}

/* Timing section */
.timing-title {
    margin-top: 28px;
}

.timing-table {
    border-collapse: collapse;
    margin-top: 8px;
    min-width: 480px;
    font-size: 13px;
}

.timing-table th,
.timing-table td {
    border: 2px solid #bcbcbc;
    padding: 8px 10px;
}

.timing-table th {
    font-weight: bold;
    text-align: center;
    background: #fafafa;
}

.source-note {
    margin-top: 24px;
    color: #666;
    font-size: 12px;
}

.muted {
    color: #777;
}

/* ============================================================
   EVENT REPORT XLSX-STYLE RENDERING
   ============================================================

   This section controls the compact Excel-like rendering of
   event detail reports.

   Main tuning variables are defined below in :root.

   To adjust report appearance:

   1. Overall report font size:
        --xlsx-report-font-size

   2. Table row height:
        --xlsx-cell-padding-y
        --xlsx-line-height

   3. Horizontal cell spacing:
        --xlsx-cell-padding-x

   4. Split table column widths:
        --xlsx-athlete-col-width
        --xlsx-split-col-width

   5. Timing table widths:
        --xlsx-timing-label-width
        --xlsx-timing-value-width

   6. Table border color and thickness:
        --xlsx-border-color
        --xlsx-border-width

   7. Lap header grey background:
        --xlsx-lap-header-bg

   8. Split table blue header background:
        --xlsx-split-header-bg

   9. Vertical spacing between tables:
        --xlsx-table-margin-bottom

   These settings intentionally reduce whitespace and row height
   to create a compact report similar to the original XLSX layout.
   ============================================================ */

:root {
    /* Overall event report font size */
    --xlsx-report-font-size: 12px;

    /* Line height controls row vertical density */
    --xlsx-line-height: 1.15;

    /* Table cell padding controls row height and whitespace */
    --xlsx-cell-padding-y: 3px;
    --xlsx-cell-padding-x: 6px;

    /* Table borders */
    --xlsx-border-color: #8d8d8d;
    --xlsx-border-width: 1px;

    /* Header backgrounds */
    --xlsx-lap-header-bg: #e6e6e6;
    --xlsx-split-header-bg: #d9e1f2;

    /* General table background */
    --xlsx-cell-bg: #ffffff;

    /* Column widths for split/lap tables */
    --xlsx-athlete-col-width: 72px;
    --xlsx-split-col-width: 68px;

    /* Summary table widths */
    --xlsx-summary-label-width: 95px;
    --xlsx-summary-value-width: 260px;

    /* Gear table widths */
    --xlsx-gear-athlete-width: 80px;
    --xlsx-gear-value-width: 140px;

    /* Timing table widths - wider than split tables */
    --xlsx-timing-label-width: 310px;
    --xlsx-timing-value-width: 190px;

    /* Space after each compact table */
    --xlsx-table-margin-bottom: 10px;
}


/* ------------------------------------------------------------
   Main event report container
   ------------------------------------------------------------ */

.event-report.xlsx-report {
    max-width: none;
    width: fit-content;
    font-size: var(--xlsx-report-font-size);
    line-height: var(--xlsx-line-height);
    color: #222;
}


/* Report title */
.xlsx-report .report-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px 0;
    padding: 0;
}


/* Navigation link */
.xlsx-report .nav-links {
    margin: 0 0 8px 0;
}


/* Section titles such as Gear and Event Timing */
.xlsx-report .section-title {
    font-size: 12px;
    font-weight: 700;
    margin: 10px 0 4px 0;
    padding: 0;
}


/* ------------------------------------------------------------
   General compact table rules
   ------------------------------------------------------------

   These rules reduce row height and whitespace globally for
   report tables. Adjust row height primarily through:

      --xlsx-cell-padding-y
      --xlsx-line-height
      --xlsx-report-font-size

   ------------------------------------------------------------ */

.xlsx-report .compact-table {
    border-collapse: collapse;
    margin: 0 0 var(--xlsx-table-margin-bottom) 0;
    table-layout: fixed;
    font-size: var(--xlsx-report-font-size);
    line-height: var(--xlsx-line-height);
    background: var(--xlsx-cell-bg);
}

.xlsx-report .compact-table th,
.xlsx-report .compact-table td {
    border: var(--xlsx-border-width) solid var(--xlsx-border-color);
    padding: var(--xlsx-cell-padding-y) var(--xlsx-cell-padding-x);
    line-height: var(--xlsx-line-height);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: clip;
}


/* ------------------------------------------------------------
   Summary table
   ------------------------------------------------------------

   Column widths:
      --xlsx-summary-label-width
      --xlsx-summary-value-width

   ------------------------------------------------------------ */

.xlsx-report .summary-table {
    width: calc(
        var(--xlsx-summary-label-width) +
        var(--xlsx-summary-value-width)
    );
}

.xlsx-report .summary-table th {
    width: var(--xlsx-summary-label-width);
    font-weight: 700;
    text-align: center;
    background: #f7f7f7;
    white-space: nowrap;
}

.xlsx-report .summary-table td {
    width: var(--xlsx-summary-value-width);
    text-align: left;
    white-space: nowrap;
}


/* ------------------------------------------------------------
   Gear table
   ------------------------------------------------------------

   Column widths:
      --xlsx-gear-athlete-width
      --xlsx-gear-value-width

   ------------------------------------------------------------ */

.xlsx-report .gear-table {
    width: calc(
        var(--xlsx-gear-athlete-width) +
        var(--xlsx-gear-value-width)
    );
}

.xlsx-report .gear-athlete-cell {
    width: var(--xlsx-gear-athlete-width);
    font-weight: normal;
}

.xlsx-report .gear-value-cell {
    width: var(--xlsx-gear-value-width);
}


/* ------------------------------------------------------------
   Small info table
   Example: Start Gate Release Time
   ------------------------------------------------------------ */

.xlsx-report .small-info-table {
    width: 260px;
    margin-top: 4px;
    margin-bottom: 12px;
}

.xlsx-report .small-info-table th {
    width: 175px;
    font-weight: normal;
    text-align: left;
    background: #f7f7f7;
}

.xlsx-report .small-info-table td {
    width: 85px;
    text-align: left;
}


/* ------------------------------------------------------------
   Split / lap data tables
   ------------------------------------------------------------

   Fixed column widths are controlled by:

      --xlsx-athlete-col-width
      --xlsx-split-col-width

   The template creates:
      <col class="athlete-col">
      <col class="split-col">

   Lap title row:
      .lap-header-row

   Blue column header row:
      .split-header-row

   ------------------------------------------------------------ */

.xlsx-report .split-table {
    margin-bottom: 10px;
    width: auto;
}


/* Fixed column widths */
.xlsx-report .split-table col.athlete-col {
    width: var(--xlsx-athlete-col-width);
}

.xlsx-report .split-table col.split-col {
    width: var(--xlsx-split-col-width);
}


/* Grey lap header row */
.xlsx-report .split-table .lap-header-row th {
    background: var(--xlsx-lap-header-bg);
    font-weight: 700;
    text-align: left;
    padding-top: 4px;
    padding-bottom: 4px;
}


/* Blue table header row */
.xlsx-report .split-table .split-header-row th {
    background: var(--xlsx-split-header-bg);
    font-weight: 700;
    text-align: center;
    white-space: normal;
}


/* Data cells
   ------------------------------------------------------------
   Numeric/split values in lap tables are centered here.

   To change numeric alignment:
      text-align: center;

   Athlete names are overridden separately below to remain
   left-aligned.
   ------------------------------------------------------------ */
.xlsx-report .split-table td {
    text-align: center;
    white-space: nowrap;
}


/* Athlete column data cells
   ------------------------------------------------------------
   Athlete IDs/names remain left-aligned while numeric values
   are centered.
   ------------------------------------------------------------ */
.xlsx-report .split-table .athlete-cell {
    font-weight: normal;
    text-align: left;
}


/* Reduce visual height further for dense split rows */
.xlsx-report .split-table tbody td {
    padding-top: 2px;
    padding-bottom: 2px;
}


/* ------------------------------------------------------------
   Timing table
   ------------------------------------------------------------

   This table is intentionally wider than metadata or summary
   tables for long Unix timing labels.

   Column widths:
      --xlsx-timing-label-width
      --xlsx-timing-value-width

   ------------------------------------------------------------ */

.xlsx-report .timing-title {
    margin-top: 18px;
}

.xlsx-report .timing-table {
    width: calc(
        var(--xlsx-timing-label-width) +
        var(--xlsx-timing-value-width)
    );
}

.xlsx-report .timing-table col.timing-label-col {
    width: var(--xlsx-timing-label-width);
}

.xlsx-report .timing-table col.timing-value-col {
    width: var(--xlsx-timing-value-width);
}

.xlsx-report .timing-table th {
    background: #f7f7f7;
    font-weight: 700;
    text-align: center;
}

.xlsx-report .timing-table td {
    white-space: nowrap;
}


/* ------------------------------------------------------------
   Source note
   ------------------------------------------------------------ */

.xlsx-report .source-note {
    margin-top: 14px;
    font-size: 10px;
    color: #666;
}


/* ------------------------------------------------------------
   Muted text
   ------------------------------------------------------------ */

.xlsx-report .muted {
    color: #777;
    font-size: var(--xlsx-report-font-size);
}


/* ------------------------------------------------------------
   Compact Search Results Table Adjustment
   ------------------------------------------------------------

   This affects the search results page and reduces whitespace.
   To adjust search results font size and row height, change:

      font-size
      padding

   ------------------------------------------------------------ */

.results-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 1500px;
    font-size: 15px;
}

.results-table th,
.results-table td {
    border: 1px solid #444;
    padding: 4px 7px;
    vertical-align: middle;
    line-height: 1.15;
}

.results-table th {
    font-weight: bold;
    text-align: center;
    background: #f7f7f7;
}

.results-table td a {
    color: #0049d8;
    text-decoration: underline;
}


/* ------------------------------------------------------------
   Print support
   ------------------------------------------------------------ */

@media print {
    .no-print,
    header {
        display: none !important;
    }

    body {
        margin: 0.35in;
    }

    .event-report.xlsx-report {
        font-size: 10px;
    }

    .xlsx-report .compact-table {
        page-break-inside: avoid;
    }
}

/* ============================================================
   EVENT DETAIL NAVIGATION BUTTONS
   ============================================================

   These styles control:
      Previous Event
      Back to Results
      Next Event

   To adjust button font size:
      .event-nav-button font-size

   To adjust button height:
      .event-nav-button padding

   To adjust spacing between buttons:
      .event-nav gap

   ============================================================ */

.event-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 0;
    font-size: 12px;
}

.event-nav-button {
    display: inline-block;
    border: 1px solid #777;
    background: #f2f2f2;
    color: #003399;
    text-decoration: none;
    padding: 3px 8px;
    line-height: 1.15;
    font-weight: 600;
}

.event-nav-button:hover {
    background: #e2e8f8;
    text-decoration: underline;
}

.event-nav-button.disabled {
    color: #999;
    background: #f7f7f7;
    border-color: #bbb;
    cursor: default;
    text-decoration: none;
}

.event-nav-position {
    margin-left: 8px;
    color: #555;
    font-size: 11px;
}

/* ============================================================
   SEARCH RESULTS VIEW / DOWNLOAD COLUMNS
   ============================================================

   The View column opens the rendered event report.

   The Source File column downloads the original XLSX file.
   This column is intentionally smaller and more compact.

   To adjust source filename font size:
      .results-table .source-file-col { font-size: ... }

   To adjust source filename column width:
      .results-table .source-file-col { max-width: ... }

   ============================================================ */

.results-table .view-col {
    width: 70px;
    text-align: center;
    white-space: nowrap;
}

.results-table .source-file-col {
    max-width: 260px;
    width: 260px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.results-table .source-file-col a {
    font-size: 10px;
}