/* ---------------------------------------------------------------- */
.pos-medal {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827; /* slate-900 */
    border-radius: 2px;
}
.pos-p1 { background-color: #ffd700 !important; color: #422006 !important; }
.pos-p2 { background-color: #c0c0c0 !important; color: #111827 !important; }
.pos-p3 { background-color: #cd7f32 !important; color: #ffffff !important; }
.pos-points { background-color: #e0f2fe !important; color: #111827 !important; } /* light sky */
.pos-none { background-color: #cbd5e1 !important; color: #111827 !important; }   /* slate-300 */

html.dark .pos-medal, body.dark-mode .pos-medal { color: #f8fafc; }
html.dark .pos-p1, body.dark-mode .pos-p1 { background-color: #ca8a04 !important; color: #ffffff !important; }
html.dark .pos-p2, body.dark-mode .pos-p2 { background-color: #64748b !important; color: #f8fafc !important; }
html.dark .pos-p3, body.dark-mode .pos-p3 { background-color: #92400e !important; color: #fef3c7 !important; }
html.dark .pos-points, body.dark-mode .pos-points { background-color: rgba(96, 165, 250, 0.22) !important; color: #f1f5f9 !important; }
html.dark .pos-none, body.dark-mode .pos-none { background-color: #334155 !important; color: #94a3b8 !important; }

/* ---------------------------------------------------------------- */
/* Race Results — link + retired treatments                         */
/* ---------------------------------------------------------------- */
.race-result-link {
    color: #1d4ed8; /* Tailwind blue-700 */
    font-weight: 600;
    text-decoration: none;
}
.race-result-link:hover,
.race-result-link:focus {
    color: #1e3a8a; /* Tailwind blue-900 */
}
body.dark-mode .race-result-link { color: #60a5fa; }
body.dark-mode .race-result-link:hover,
body.dark-mode .race-result-link:focus { color: #93c5fd; }

.retired-status {
    color: #dc2626;
    font-style: italic;
    font-weight: 500;
}
body.dark-mode .retired-status {
    color: #f87171;
}

/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
.results-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280; /* gray-500 */
    gap: 0.75rem;
    min-height: 400px;
}
.results-empty-state .icon {
    font-size: 2rem;
    opacity: 0.55;
}
body.dark-mode .results-empty-state {
    color: #9ca3af; /* gray-400 */
}

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

.constructor-color-bar {
    width: 4px;
    height: 24px;
    margin-right: 10px;
    border-radius: 1px;
    display: inline-block;
}

/* Light mode only: crisp black outline around white constructor bars so they are visible on light backgrounds */
html:not(.dark) body:not(.dark-mode) .constructor-color-bar.is-white-team,
html:not(.dark) body:not(.dark-mode) .constructor-color-bar[style*="#FFFFFF" i],
html:not(.dark) body:not(.dark-mode) .constructor-color-bar[style*="#ffffff" i],
html:not(.dark) body:not(.dark-mode) .constructor-color-bar[style*="rgb(255, 255, 255)"],
html:not(.dark) body:not(.dark-mode) .constructor-color-bar[style*="white"] {
    box-shadow: 0 0 0 1px #000000 !important;
}

/* Dark mode reset: ensure no black outline in dark mode where white is naturally visible */
html.dark .constructor-color-bar,
body.dark-mode .constructor-color-bar {
    box-shadow: none !important;
}

.pos-retired { background-color: #dc2626 !important; color: #ffffff !important; }
html.dark .pos-retired,
body.dark-mode .pos-retired { background-color: #450a0a !important; color: #f87171 !important; }

.pos-dsq {
    background-color: #111827 !important;
    color: #f9fafb !important;
    font-weight: 800 !important;
}
html.dark .pos-dsq,
body.dark-mode .pos-dsq {
    background-color: #030712 !important;
    color: #f3f4f6 !important;
    border: 1px solid #4b5563 !important;
    font-weight: 800 !important;
}

/* Time columns: Retired (DNF) & Disqualified (DSQ) status styling */
.retired-status {
    color: #dc2626 !important;
    font-weight: 600;
}
.retired-status i {
    color: #dc2626 !important;
}
html.dark .retired-status,
body.dark-mode .retired-status {
    color: #f87171 !important;
}
html.dark .retired-status i,
body.dark-mode .retired-status i {
    color: #f87171 !important;
}

.dsq-status {
    color: #111827 !important;
    font-weight: 600;
}
.dsq-status i {
    color: #111827 !important;
}
html.dark .dsq-status,
body.dark-mode .dsq-status {
    color: #9ca3af !important;
}
html.dark .dsq-status i,
body.dark-mode .dsq-status i {
    color: #9ca3af !important;
}

/* ---------------------------------------------------------------- */
/* Race Navigation Buttons                                          */
/* ---------------------------------------------------------------- */
.race-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}
.race-nav-btn:hover {
    background-color: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
    text-decoration: none;
}
.race-nav-btn:disabled,
.race-nav-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

html.dark .race-nav-btn,
.dark .race-nav-btn,
body.dark-mode .race-nav-btn {
    background-color: rgb(30, 41, 59) !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}
html.dark .race-nav-btn:hover,
.dark .race-nav-btn:hover,
body.dark-mode .race-nav-btn:hover {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}
html.dark .race-nav-btn:disabled,
html.dark .race-nav-btn.disabled,
.dark .race-nav-btn:disabled,
.dark .race-nav-btn.disabled,
body.dark-mode .race-nav-btn:disabled,
body.dark-mode .race-nav-btn.disabled {
    background-color: rgba(30, 41, 59, 0.4) !important;
    border-color: #334155 !important;
    color: #64748b !important;
    opacity: 0.5;
}

/* Ensure active toggle links remain crisp white in dark mode */
html.dark a.bg-blue-600,
.dark a.bg-blue-600,
body.dark-mode a.bg-blue-600 {
    color: #ffffff !important;
}

/* Explicit table column centering */
table th.text-center,
table td.text-center,
.table th.text-center,
.table td.text-center {
    text-align: center !important;
}

.race-nav-btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
}
.race-nav-btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff !important;
}
html.dark .race-nav-btn-primary,
.dark .race-nav-btn-primary,
body.dark-mode .race-nav-btn-primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff !important;
}
html.dark .race-nav-btn-primary:hover,
.dark .race-nav-btn-primary:hover,
body.dark-mode .race-nav-btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
}

.gap-sc-flag {
    font-size: 0.7em;
    margin-left: 0.25em;
    cursor: help;
    filter: saturate(0.7);
    vertical-align: 0.1em;
}