/* -----------------------------------------------------------------
 * race_results.css
 *
 * NOTE: Despite the name, this stylesheet is used by the Race and
 * Quali *comparison* pages (events/race_season_*, events/race_circuit,
 * events/race_fastest, teams/*). The /r/results page (Race Results
 * summary shown from the Debrief section) uses debrief.css instead.
 *
 * If you're looking for the medal / retired / empty-state styles for
 * /r/results, see static/css/debrief.css.
 * ----------------------------------------------------------------- */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f7f9;
}

.container {
    max-width: 1200px;
}

.pos-ahead {
    color: #059669;
    font-weight: 700;
}

.pos-behind {
    color: #dc2626;
}

/* Custom hover effects for Bootstrap tables matching Tailwind */
.table-hover tbody tr {
    transition: background-color 0.15s ease-in-out;
}
.table-hover tbody tr:hover {
    background-color: #f3f4f6 !important; /* Tailwind bg-gray-100 */
}

/* -----------------------------------------------------------------
 * Unified Chart Container (Responsive height parity across all H2H)
 * ----------------------------------------------------------------- */
.chart-container {
    position: relative;
    width: 100%;
    height: 300px;
    min-height: 250px;
}

@media (min-width: 640px) {
    .chart-container {
        height: 340px;
    }
}

@media (min-width: 1024px) {
    .chart-container {
        height: 360px;
    }
}