/* Debrief Dashboard Styles */

.tab-content {
    min-height: 600px;
}

/* 
  We removed the hardcoded background/border colors for .tab-content and .nav-pills 
  so that they naturally inherit the Tailwind classes and dark_mode.css overrides 
  from base.html, keeping them 100% consistent with the driver_stats page! 
*/

/* Debrief Tabs Styling */
.nav-pills .nav-link {
    color: #4b5563; /* Tailwind text-gray-600 */
    transition: all 0.2s ease-in-out;
}
.nav-pills .nav-link:hover {
    color: #2563eb; /* Tailwind text-blue-600 */
}
body.dark-mode .nav-pills .nav-link {
    color: #d1d5db; /* Tailwind text-gray-300 */
}
body.dark-mode .nav-pills .nav-link:hover {
    color: #60a5fa; /* Tailwind text-blue-400 */
}
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    background-color: #2563eb !important; /* Tailwind bg-blue-600 */
    color: #ffffff !important;
}


/* Preset Buttons */
.filter-preset-btn {
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.filter-preset-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.filter-preset-btn.preset-active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}
.dark .filter-preset-btn, body.dark-mode .filter-preset-btn {
    color: #d1d5db;
    background: #1f2937;
    border-color: #374151;
}
.dark .filter-preset-btn:hover, body.dark-mode .filter-preset-btn:hover {
    background: #374151;
    border-color: #4b5563;
}
.dark .filter-preset-btn.preset-active, body.dark-mode .filter-preset-btn.preset-active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* Driver Chips (Timing Tower Style) */
.driver-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease, opacity 0.2s ease, transform 0.1s ease;
    user-select: none;
}
.driver-chip:last-child {
    border-bottom: none;
}
.driver-chip:hover {
    background: #f1f5f9;
}
.driver-chip:active {
    transform: scale(0.98);
}
.dark .driver-chip, body.dark-mode .driver-chip { 
    background: transparent; 
    border-bottom-color: #334155; 
}
.dark .driver-chip:hover, body.dark-mode .driver-chip:hover {
    background: #334155;
}
.driver-chip.deselected {
    opacity: 0.45;
}
.driver-chip.selected {
    opacity: 1;
}

/* Dual Range Slider Styles */
.lap-range-input {
    position: absolute;
    width: 100%;
    height: 8px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.lap-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #2563eb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.1s ease;
}
.lap-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}
.lap-range-input::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #2563eb;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.dark .lap-range-input::-webkit-slider-thumb, body.dark-mode .lap-range-input::-webkit-slider-thumb {
    background: #1e293b;
    border-color: #3b82f6;
}
.dark .lap-range-input::-moz-range-thumb, body.dark-mode .lap-range-input::-moz-range-thumb {
    background: #1e293b;
    border-color: #3b82f6;
}

/* Ensure no horizontal overflow */
*, *::before, *::after {
    box-sizing: border-box;
}

#debrief-lap-slider-card {
    max-width: 100%;
    overflow: hidden;
}

.tab-pane {
    max-width: 100%;
    overflow-x: auto;
}