/* 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. */

/* Hides the shared app logo/PRO badge/clock (base.html's own
   .topbar-brand-logo, in .page-header next to .page-header-title) on this
   page only - matching the design mockup, which has neither. Scoped via
   body class (race.html's own body_class block) rather than removed from
   base.html, which every other page still uses unchanged.
   .page-header-title (this page's two cards) is already flex:1 1 0%, so it
   naturally reclaims the freed-up width. */
body.race-page .topbar-brand-logo { display: none; }


/* 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: 640px; /* wide enough for the radio row + 2-column checkbox
                          grid + format preview to each stay on their own
                          line, so the whole popup fits without scrolling */
}

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

/* Small bold caption above each of the three groups (age source, optional
   fields, expected format) - one shared look so the popup reads as three
   aligned sections rather than a loose stack of controls. */
.import-section-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin: 0 0 8px;
}

/* "Date de naissance" / "Catégorie FFA" - a single mutually-exclusive
   choice, side by side on one line rather than stacked, since only one can
   ever be picked. */
.import-radio-row {
    display: flex;
    gap: 28px;
    margin-bottom: 16px;
}

/* The bib-collision popup's own two radio options ("ignore_bib"/"skip") -
   stacked, unlike the age-source choice above: their labels are full
   sentences, too long to sit side by side. */
.import-format-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

/* The five optional-field checkboxes (Téléphone, Email, Contact d'urgence,
   Téléphone contact d'urgence, Dossard), filled left-to-right/top-to-bottom
   so related fields (a field and its own "téléphone" counterpart) end up
   read in the natural row-then-row order rather than split awkwardly across
   columns. */
.import-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 10px;
    margin-bottom: 16px;
}

/* Live-updating list of expected columns (see updateImportFormatPreview,
   app/static/race/participants.js) - a distinct "code" look so it reads as
   the literal, exact column order rather than more descriptive text. */
.import-format-preview {
    background: #f5f7fa;
    border: 1px solid #dde3ea;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 6px;
    font-size: 13px;
    color: #333;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    line-height: 1.5;
}

.import-header-hint {
    font-size: 12px;
    color: #888;
    margin: 0 0 14px;
}

@media (max-width: 560px) {
    .import-checkbox-grid {
        grid-template-columns: 1fr;
    }
    .import-radio-row {
        flex-direction: column;
        gap: 8px;
    }
}

.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%;
}

/* Status card ("Déroulé de la course", race.html): a plain white .card-like
   box - deliberately not the dark #0f3b47 treatment .start-time-card next
   to it uses, this is a fresh design, not a variant of that one. Sizes
   below match the design mockup (claude.ai/design) closely. */
.rsc-card {
    background: #fff;
    border: 1px solid rgba(14, 59, 73, 0.09);
    border-radius: 16px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

.rsc-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
}

.rsc-title {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(14, 59, 73, 0.45);
}

.rsc-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The race's current status, restated here rather than left implicit in
   the dot row below - the dot row communicates *progress* (how far along),
   this pill communicates *what the current status actually is*, in words. */
.rsc-current-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e4f0fd;
    color: #1c4a7a;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}

.rsc-current-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f7fd1;
    flex-shrink: 0;
}

/* Always targets the single next status in order (see setStatus,
   app/static/race/header.js) - absent entirely once the race is "Terminée"
   or the viewer lacks manage_race_status (see race.html). */
.rsc-next-button {
    display: inline-flex;
    align-items: center;
    background: #16213e;
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.rsc-next-button:active { background: #0c1428; }

.rsc-next-chevron { margin-left: 3px; font-size: 9px; }

.rsc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding-bottom: 2px;
}

/* Every step is an equal-width grid column regardless of its own label's
   length - padding-right (not a margin on the connector) is what keeps its
   line short of the next dot, so a long label never stretches its own
   column wider than the others. */
.rsc-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-right: 14px;
    min-width: 0;
}

/* Only a future step gets this (see race.html) - a past or the current one
   carries no onclick and stays plain. */
.rsc-step-clickable { cursor: pointer; }
.rsc-step-clickable:hover .rsc-step-label-future { color: #16213e; }
.rsc-step-clickable:hover .rsc-dot-future { background: #aeb8c9; }

/* Dot + connector, together: the connector is deliberately a child of the
   same row as its dot (not a sibling of .rsc-step, which the label's own
   width could stretch) so it always starts flush against the dot and, since
   .rsc-step is a fixed equal-width column, always reaches exactly to the
   start of the next one - i.e. the next dot - with no gap on either end. */
.rsc-step-top {
    display: flex;
    align-items: center;
    width: 100%;
}

.rsc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rsc-dot-past { background: #2f7fd1; }
.rsc-dot-future { background: #d9dee6; }

/* Same dark navy as .rsc-next-button, so "what's happening right now" reads
   as one colour across the card - the halo (box-shadow, not a bigger box)
   sets it apart from the past/future dots without shifting the connector
   lines' alignment on either side of it. */
.rsc-dot-current {
    background: #16213e;
    box-shadow: 0 0 0 4px rgba(22, 33, 62, 0.15);
}

.rsc-step-label {
    font-size: 11.5px;
    font-weight: 700;
    text-align: left;
    line-height: 1.25;
}

.rsc-step-label-past { color: #6b7280; }
.rsc-step-label-current { color: #14171c; }
.rsc-step-label-future { color: #9aa3b0; }

/* Fills the rest of .rsc-step-top past the dot - centered on the row's own
   9px height (the dot's), so it lines up with the dot's centre without any
   manual offset. Blue once both dots either side of it are already reached
   (i.e. it leads up to, or between, past/current steps), grey for anything
   leading only to a future one. Stops short of the next dot via the step's
   own padding-right above, not a margin here. */
.rsc-connector {
    flex: 1;
    height: 2px;
    background: #d9dee6;
}

.rsc-connector-past { background: #2f7fd1; }

/* Inline, next to "Étape suivante" (matching the mockup) - not an absolute
   corner badge, not a dedicated bottom row either: a reset is infrequent
   enough that it doesn't need either. Deliberately not the app's usual red
   (.icon-delete/.icon-dnf's #791f1f) - a reset is a correction tool an
   operator reaches for often on a busy race day, not a rare, catastrophic
   action, so it reads as "careful" (rose) rather than "alarming" (red).
   Icon-only: the accessible name lives in title/aria-label (race.html). */
.rsc-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #c21464;
    border: 1px solid rgba(236, 30, 121, 0.35);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
}

.rsc-reset-button:hover { background: rgba(236, 30, 121, 0.08); }
.rsc-reset-button:active { background: rgba(236, 30, 121, 0.16); }

/* Race screen header: the whole panel (identity+start-times card + status
   timeline) sits directly in .page-header-title, right under the topbar -
   an even CSS Grid split (not flex) so the two cards always divide the row
   exactly 50/50 regardless of either one's own content. */
.race-header-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 20px;
    margin-top: 14px;
}

/* Unified identity card: race name/distance/organizer/participant count on
   top, the planned/actual start times as a nested, subtly-tinted sub-panel
   underneath - see race.html's page_header block. */
.rhc-card {
    background: #0f3b47;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.rhc-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.rhc-swatch {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    border: none;
    align-self: center;
}

.rhc-name {
    color: #fff;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Reads as part of the race's own title line, not a lesser detail - in the
   app's accent cyan (also used for the entry screen's active fullscreen
   toggle) so it's visually distinct from the plain white name next to it. */
.rhc-distance {
    color: #3bbbda;
    font-size: 14px;
    font-weight: 800;
}

.rhc-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11.5px;
    font-weight: 500;
}

/* The two start times, nested as their own subtly-tinted, fully-rounded
   sub-panel inside the card (not flush to its edges) - a hairline border
   and a background just a shade lighter than the card's own sets it apart
   as a distinct "when" block under the "what/who" title row above it. */
.start-time-cards {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.start-time-card {
    position: relative; /* anchors its own .rhc-popover-overlay */
    flex: 1;
    min-width: 0;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: 10px 0 0 10px;
}

/* The "réel" side gets a faint cyan tint of its own (matching
   .rhc-actual-time's accent) so the two sides read as distinct even before
   either value is read - live/actual on the right, planned on the left. */
.start-time-card-actual {
    background: rgba(63, 193, 224, 0.09);
    border-radius: 0 10px 10px 0;
}

.start-time-cards > .start-time-card + .start-time-card {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.rhc-time-block { min-width: 0; }

.start-time-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.start-time-label-actual { color: #8fdcef; }

/* Time and date share one baseline row (not stacked) - the date is a
   secondary detail, not worth its own line in this compact a card. */
.rhc-time-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 3px;
}

.rhc-time-value {
    font-family: "Courier New", Courier, monospace;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

/* Distinguishes "réel" (live, worth noticing) from "prévu" (informational)
   at a glance, matching .rhc-distance's own accent. */
.rhc-actual-time { color: #3bbbda; }

.rhc-date-value {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

/* A small chip around the pencil icon (rather than the bare glyph
   .icon-edit uses everywhere else) - comfortably clickable and visible
   against the dark card. */
.rhc-edit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    padding: 0;
}

.rhc-edit-icon:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* The "réel" side's own edit chip picks up the same cyan tint as its card. */
.rhc-edit-icon-actual { background: rgba(63, 193, 224, 0.18); color: #8fdcef; }
.rhc-edit-icon-actual:hover { background: rgba(63, 193, 224, 0.3); color: #fff; }

/* Edit popover (planned/actual start): anchored under its own
   .start-time-card (position:relative above) instead of dimming/centering
   over the whole page - #edit-planned-start-modal/#edit-start-time-modal
   stay .modal-overlay so the app's shared Escape-to-close handler (any
   visible .modal-overlay, app.js) and display toggling (header.js) both
   keep working unchanged; only the positioning/look below is new. */
.rhc-popover-overlay {
    position: absolute;
    inset: auto;
    top: 100%;
    left: 15px;
    margin-top: 8px;
    background: transparent;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    z-index: 70;
}

.rhc-popover-box {
    background: #0f3b47;
    color: #fff;
    width: 210px;
    max-width: calc(100vw - 32px);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.rhc-popover-heading {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.rhc-popover-warning {
    margin: -4px 0 10px;
    font-size: 11px;
    color: #ffb4b4;
}

.rhc-popover-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.rhc-popover-field label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.rhc-popover-input-box {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    padding: 6px 8px;
    /* Native date/time picker indicator renders light automatically. */
    color-scheme: dark;
}

.rhc-popover-input-box input {
    background: transparent;
    border: none;
    outline: 0;
    color: #fff;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    padding: 0;
}

.rhc-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.rhc-popover-cancel {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.rhc-popover-cancel:hover { background: rgba(255, 255, 255, 0.08); }

.rhc-popover-confirm {
    border: 0;
    background: #3bbbda;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #0f3b47;
}

.rhc-popover-confirm:hover { background: #2fa5c2; }

/* 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-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; }