body {
  overflow-y: scroll; /* Always show vertical scrollbar */
  overflow-x: scroll; /* Always show horizontal scrollbar */
}
header {
  max-width: 1600px; /* Prevents the main content from exceeding 1200px in width */
  width: 100%;       /* Ensures the element takes up the full width available on smaller screens */
  margin: 0 auto;    /* Centers the content within its parent container when the max-width is reached */
}

main {
  max-width: 1600px; /* Prevents the main content from exceeding 1200px in width */
  width: 100%;       /* Ensures the element takes up the full width available on smaller screens */
  margin: 0 auto;    /* Centers the content within its parent container when the max-width is reached */
}

.checkbox-pills label {
    display: inline-block;
    margin: 5px;
    padding: 6px 12px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 20px; /* Rounded corners for pill shape */
    cursor: pointer;
    transition: background-color 0.3s;
}

.checkbox-pills input[type="checkbox"] {
    display: none; /* Hide the actual checkbox input */
}

.checkbox-pills input[type="checkbox"]:checked + label {
    background-color: #007bff; /* Color when checked */
    color: white;
    border-color: #007bff;
}


/* Optional: Hover effect for pills */
.checkbox-pills label:hover {
    background-color: #e2e6ea;
}


.btn-active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border: 2px solid #0056b3;
}

/* Fade the table slightly while loading */
.table-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}/* 1. The Wrapper (The div with id="table-container" in your HTML) */
#table-container {
    max-height: 75vh;     /* Limits the height so it scrolls */
    overflow-y: auto;    /* Enable vertical scroll */
    overflow-x: auto;    /* Enable horizontal scroll */
    position: relative;
    border: 1px solid #dee2e6;
}

/* 2. Target the Table Header cells */
#track-table thead th {
    position: -webkit-sticky; 
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #ffffff !important; /* Forces solid background */
    box-shadow: inset 0 -2px 0 #dee2e6;    /* Keeps the bottom border visible */
}

/* 3. Fix for Bootstrap/django-tables2 border conflict */
#track-table {
    border-collapse: separate; 
    border-spacing: 0;
}

#track-table thead th a {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
}