/* Custom styles to enhance the UI */
        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Styles for SortableJS drag-and-drop */
        .sortable-ghost { 
            opacity: 0.4; 
            background: #c0dcfc; 
            border-radius: 0.5rem; 
        }
        .sortable-chosen { 
            cursor: grabbing; 
        }

        /* Custom scrollbar for task lists */
        .tasks-list::-webkit-scrollbar { 
            width: 8px; 
        }
        .tasks-list::-webkit-scrollbar-track { 
            background: #f1f5f9; 
            border-radius: 10px; 
        }
        .tasks-list::-webkit-scrollbar-thumb { 
            background: #cbd5e1; 
            border-radius: 10px; 
        }
        .tasks-list::-webkit-scrollbar-thumb:hover { 
            background: #94a3b8; 
        }

        /* Other custom styles */
        .task-card { 
            transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 
        }

        .loader { 
            border: 4px solid #f3f3f3; 
            border-top: 4px solid #8b5cf6; 
            border-radius: 50%; 
            width: 40px; 
            height: 40px; 
            animation: spin 1s linear infinite; 
        }

        @keyframes spin { 
            0% { transform: rotate(0deg); } 
            100% { transform: rotate(360deg); } 
        }

        /* Ensure dashboard and app container take up space correctly */
        #app-container, #dashboard-container {
            display: none; /* Hidden by default, controlled by JS */
            flex-direction: column;
            min-height: 100vh;
        }

        /* Style for active filter buttons on the dashboard */
        .filter-btn.active {
            background-color: #4f46e5; /* A shade of indigo */
            color: white;
        }