/* race.html-only rules (start-time cards, status timeline, bib-pickup/
   dnf/missing tables, stats-tab charts). See base.css's header comment for
   why a rule ending up here instead of base.css is a filing choice, not a
   loading boundary. */


/* Results tab (race.html): the title+sub-tabs card and whichever results
   sub-tab is currently shown are two separate elements (only one subsection
   is visible at a time - see showResultsSubtab), but should read as one
   continuous block rather than two boxes with a gap of page background
   between them - the touching edges lose their border/radius/spacing so
   they fuse into a single card visually. */
.results-header-card {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.icon-import {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    filter: grayscale(100%);
    opacity: 0.75;
}

.icon-import:hover { opacity: 1; }

.icon-link {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    filter: grayscale(100%);
    opacity: 0.75;
}

.icon-link:hover { opacity: 1; }

.export-icons {
    float: right;
    display: inline-flex;
    gap: 6px;
}

.icon-export {
    display: inline-block;
    background: #eee;
    color: #185fa5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 20px;
    cursor: pointer;
}

.icon-export:hover { background: #185fa5; color: white; }

.modal-box-import {
    max-width: 630px; /* 50% wider than the default 420px */
}

.import-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: normal;
}

.import-format-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin: 0 0 8px;
}

.import-format-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.import-dropzone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    margin-bottom: 12px;
    transition: border-color 0.15s, background 0.15s;
}

.import-dropzone-active {
    border-color: #185fa5;
    background: #f0f6fc;
}

.import-dropzone p {
    margin: 0 0 10px;
    color: #666;
    font-size: 14px;
}

.import-dropzone input[type="file"] {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* Same bordered-box treatment as .start-time-card next to it, just
   transparent instead of filled - the border reuses that card's own
   background color (#0f3b47) so the two read as a matched pair. */
.status-timeline-card {
    flex: 1;
    min-width: 280px;
    background: transparent;
    border: 1px solid #0f3b47;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.step-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.step-date {
    font-size: 11px;
    color: #666;
    text-align: center;
    white-space: nowrap;
}

.step-date-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.step-arrow {
    color: #bbb;
    font-weight: 600;
    margin-top: 8px;
}

/* Race screen header: the whole panel (start-time cards + status timeline)
   sits directly in .page-header-title, right under the race title - no card
   background/border of its own, so it reads as part of the same banner as
   the logo/clock beside it rather than a separate white box. */
.race-header-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
    margin-top: 14px;
}

/* Planned/actual start shown as two small cards, in the same time-on-top/
   date-underneath layout as the races-table "Heure de départ" column (see
   .cell-datetime-time/.cell-datetime-date below, reused here rather than
   duplicated) - just left-aligned instead of centered, since these sit in
   their own bordered box instead of a table row. */
.start-time-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.start-time-card {
    background: #0f3b47;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.start-time-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.start-time-label {
    font-size: 13px;
}

/* Row-header cell (e.g. the "Catégorie" column in "Récompenses par
   catégorie", one row per category): a <th scope="row"> rather than a <td>
   for the same reason a column header is a <th> - it labels the rest of the
   row's cells, not a data value of its own. A tint (matching the page
   background, not the card's white) sets that leftmost column visually
   apart as a header, the same way <thead> already reads apart from the
   body. */
.row-header-cell { background: #eef2f7; font-weight: 700; }

/* "Récompenses par catégorie" (race.html): the table reads like a
   spreadsheet where both the top row AND the left column are headers - the
   column headers get the app's own accent blue (same #185fa5 as button)
   instead of the shared cyan header (see thead th above), so the two header
   axes are unmistakable at a glance. Scoped to this one table (via the
   .awards-category-table class on the <table>) rather than the app-wide
   default. */
.awards-category-table thead th { background: #185fa5; color: #fff; }

/* One-line title ("🏆 Classement Femmes Espoirs") right above each
   category/gender listing - pink for the women's listings so it's
   distinguishable from the men's at a glance while scanning the page. Rows
   themselves are no longer tinted by gender here (see the plain <tr> in
   loadResultsByCategory) - color now lives on the title only. */
.category-listing-title { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.category-listing-title:first-child { margin-top: 0; }
.category-listing-title-female { color: #FF1493; }

/* Fixed column widths shared by every category/gender table in the "Results
   by category" tab, so the same column lines up at the same pixel position
   from one category card to the next down the page - the default
   content-driven auto-layout otherwise gives each table its own widths
   depending on how long its names happen to be. white-space is switched back
   to wrapping (the site-wide th/td default is nowrap) so a long name wraps
   within its fixed column instead of overflowing it. */
.category-results-table { table-layout: fixed; }
.category-results-table th, .category-results-table td { white-space: normal; word-break: break-word; }
.category-results-table th:nth-child(1), .category-results-table td:nth-child(1) { width: 8%; }
.category-results-table th:nth-child(2), .category-results-table td:nth-child(2) { width: 22%; }
.category-results-table th:nth-child(3), .category-results-table td:nth-child(3) { width: 22%; }
.category-results-table th:nth-child(4), .category-results-table td:nth-child(4) { width: 20%; }
.category-results-table th:nth-child(5), .category-results-table td:nth-child(5) { width: 12%; }
.category-results-table th:nth-child(6), .category-results-table td:nth-child(6) { width: 10%; }
.category-results-table th:nth-child(7), .category-results-table td:nth-child(7) { width: 6%; }
.row-picked-up { background: #eaf3de; }
.row-no-starter { background: #eee; color: #888; }

#section-stats { position: relative; }

.stat-tile-icon {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.stat-tile-label { color: #666; font-size: 13px; }
.stat-tile-value { font-size: 28px; font-weight: 700; }

/* Houses two .event-stat-text values (min/max bib) side by side in one card
   instead of the usual single value - the icon stays shared, unique to this
   card, rather than duplicated per value. */
.event-stat-minmax {
    display: flex;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

.stats-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.stats-donut-container, .stats-gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-gender-bar-container { padding-top: 24px; }

.donut-chart {
    width: 180px;
    height: 180px;
    display: block;
}

.gender-bar-chart {
    width: 100%;
    height: 40px;
    display: block;
}

.donut-text-value { font-size: 26px; font-weight: 700; fill: #0b0b0b; }
.donut-text-label { font-size: 12px; fill: #898781; }

.stats-gauge-detail { text-align: center; color: #666; font-size: 14px; margin-top: 4px; }

.stats-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    width: 100%;
}

.stats-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #222;
}

.stats-legend-dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.stats-legend-line {
    flex: none;
    width: 14px;
    height: 2px;
    border-radius: 1px;
}

.interactive-segment { cursor: pointer; }
.interactive-segment:focus-visible { outline: 2px solid #0b0b0b; outline-offset: 2px; }

.stats-arrivals-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arrivals-chart { width: 100%; height: auto; display: block; }
.arrivals-chart:focus-within .arrivals-crosshair,
.arrivals-chart rect:focus-visible { outline: none; }

.arrivals-gridline { stroke: #e4e2d8; stroke-width: 1; }
.arrivals-axis-label { font-size: 11px; fill: #898781; }
.arrivals-axis-title { font-size: 11px; font-weight: 600; fill: #666; }
.arrivals-value-label { font-size: 13px; font-weight: 700; fill: #0b0b0b; }
.arrivals-crosshair { stroke: #c3c2b7; stroke-width: 1; pointer-events: none; }
.arrivals-crosshair-dot { fill: #0b0b0b; stroke: #fff; stroke-width: 2; pointer-events: none; }

/* Finish-time distribution (race.html stats tab): one row per bucket, label
   left / proportional bar / count right - a plain ranked bar list rather
   than a plotted chart, so it's built as flex rows instead of SVG (see
   drawFinishTimeHistogram). */
.finish-time-histogram {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.finish-time-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.finish-time-bar-label {
    flex: none;
    width: 90px;
    font-size: 13px;
    color: #666;
    text-align: right;
    white-space: nowrap;
}

.finish-time-bar-track {
    flex: 1;
    background: #eef1f5;
    border-radius: 5px;
    height: 24px;
    display: block;
}

/* A flex row of up to 2 segments (men/women, see drawFinishTimeHistogram) -
   overflow:hidden clips both to the bar's own rounded corners, same trick
   .stats-gender-bar-container's clipPath uses in SVG. */
.finish-time-bar {
    display: flex;
    height: 100%;
    min-width: 3px;
    border-radius: 5px;
    overflow: hidden;
}

.finish-time-bar-segment {
    flex: none;
    height: 100%;
}

.finish-time-bar-count {
    flex: none;
    width: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #222;
}

.finish-time-histogram-empty { color: #898781; font-size: 14px; }

.stats-tooltip {
    position: absolute;
    pointer-events: none;
    background: #0b0b0b;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    max-width: 220px;
}

.stats-tooltip-value { font-weight: 700; font-size: 15px; }
.stats-tooltip-label { color: #c3c2b7; margin-top: 2px; }