/* Custom styles to complement Tailwind CSS */
body {
    font-family: 'Inter', sans-serif;
}
.chart-wrapper {
    position: relative;
}
.sortable {
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}
.sortable:hover {
    color: #1f2937;
}
.sortable.asc, .sortable.desc {
    font-weight: 700; /* Bold the active sorted column */
    color: #1f2937; /* Darker gray */
}
.sortable.asc::after {
    content: ' ▲';
}
.sortable.desc::after {
    content: ' ▼';
}
.toggle-btn-active {
    background-color: #2563eb; /* blue-600 */
    color: white;
    border: 1px solid #2563eb;
}
.toggle-btn-inactive {
    background-color: #f3f4f6; /* gray-100 */
    color: #374151; /* gray-700 */
    border: 1px solid #d1d5db; /* gray-300 */
}
.toggle-btn-inactive:hover {
    background-color: #e5e7eb; /* gray-200 */
}

/* Style for mobile dropdowns and buttons */
.mobile-filter {
    @apply w-full p-2 border rounded-lg bg-white text-sm font-semibold text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500;
}