/* Global styles */
body {
    font-family: 'Titillium Web', sans-serif;
    background-color: #1a1a1a;
    color: #f0f0f0;
}
.selector-panel select, .selector-panel button {
    background-color: #2a2a2a;
    border-color: #444;
    color: #f0f0f0;
    transition: all 0.2s ease-in-out;
}
.selector-panel select:hover, .selector-panel button:hover { border-color: #e10600; }
.selector-panel select:focus, .selector-panel button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.5);
    border-color: #e10600;
}
.btn-primary { background-color: #e10600; color: white; }
.btn-primary:hover { background-color: #ff1912; }
.chart-container {
    position: relative;
    height: 350px; /* increased height to show X-axis labels */
    background-color: #252525;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem; /* further reduced top/bottom padding */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    overflow: auto;
}

.short-chart { height: 220px; }

/* Button styles */
button {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Driver Modal styles */
.driver-checkbox-label { border: 2px solid #444; transition: all 0.2s ease-in-out; cursor: pointer; }
.driver-checkbox-label:hover { border-color: #e10600; transform: translateY(-2px); }
input:checked + .driver-checkbox-label { border-color: #e10600; background-color: #3a3a3a; box-shadow: 0 0 15px rgba(225, 6, 0, 0.5); }
input[type="checkbox"] { display: none; }

/* sr-only class for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* SCROLL BAR STYLING */
/* Custom Scrollbar Styles for Webkit browsers (Chrome, Safari, Edge) */

/* Apply to the whole page scrollbar */
body::-webkit-scrollbar {
    width: 20px; /* Width of the vertical scrollbar */
    height: 20px; /* Height of the horizontal scrollbar */
    background-color: #2A2A2A; /* Background of the scrollbar track */
}

body::-webkit-scrollbar-track {
    background-color: #2A2A2A; /* Dark grey track */
    border-radius: 0px; /* Square edges for the track */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* Subtle inner shadow for 3D effect */
}

body::-webkit-scrollbar-thumb {
    background-color: #444444; /* Darker grey thumb (the draggable part) */
    border-radius: 0px; /* Square edges for the thumb */
    border: 2px solid #2A2A2A; /* A border around the thumb to enhance 3D and separation */
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1); /* Light inner shadow for 3D effect */
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #555555; /* Slightly lighter on hover */
}

/* Apply to the driver modal list scrollbar */
#driver-modal-list::-webkit-scrollbar {
    width: 10px; /* Slightly narrower scrollbar for internal element */
    height: 10px;
    background-color: #1a1a1a; /* Match the modal list background */
}

#driver-modal-list::-webkit-scrollbar-track {
    background-color: #1a1a1a; /* Track for modal list */
    border-radius: 0px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}

#driver-modal-list::-webkit-scrollbar-thumb {
    background-color: #333333; /* Darker grey thumb for modal list */
    border-radius: 0px;
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.08);
}

#driver-modal-list::-webkit-scrollbar-thumb:hover {
    background-color: #444444;
}

/* --- Firefox Scrollbar Styling (simpler) --- */
/* Note: Firefox does not support granular styling like Webkit pseudo-elements. */
/* It only allows setting the color of the thumb and track, and width. */

/* For the body */
body {
    scrollbar-color: #444444 #2A2A2A; /* thumb color track color */
    scrollbar-width: thin; /* auto | thin | none */
}

/* For the driver modal list */
#driver-modal-list {
    scrollbar-color: #333333 #1a1a1a; /* thumb color track color */
    scrollbar-width: thin;
}