/* Custom styles to complement Tailwind CSS */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

.chart-wrapper {
    position: relative;
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sortable {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

.sortable:hover {
    color: #1f2937;
    background-color: #f9fafb;
}

.sortable.asc, .sortable.desc {
    font-weight: 700;
    color: #1f2937;
    background-color: #f3f4f6;
}

.sortable.asc::after {
    content: ' ▲';
    font-size: 0.75em;
}

.sortable.desc::after {
    content: ' ▼';
    font-size: 0.75em;
}

.toggle-btn-active {
    background-color: #2563eb;
    color: white;
    border: 1px solid #2563eb;
    transform: scale(1);
    transition: all 0.2s ease-in-out;
}

.toggle-btn-inactive {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    transition: all 0.2s ease-in-out;
}

.toggle-btn-inactive:hover {
    background-color: #e5e7eb;
    transform: translateY(-1px);
}

.toggle-btn-active:hover {
    background-color: #1d4ed8;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 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;
}

/* Smooth transitions for cards */
.bg-white {
    transition: box-shadow 0.3s ease-in-out;
}

.bg-white:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Table row hover effect */
tbody tr {
    transition: background-color 0.2s ease-in-out;
}

tbody tr:hover {
    background-color: #f9fafb;
}