.filter-btn {
    @apply px-3 py-1 rounded hover:bg-gray-200 transition;
}

.filter-btn.active {
    @apply bg-indigo-100 text-indigo-700;
}

/* Animation for task items */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.todo-item {
    animation: fadeIn 0.3s ease-out;
}

/* Custom checkbox */
.custom-checkbox {
    @apply w-5 h-5 rounded border-2 border-gray-300 flex items-center justify-center cursor-pointer transition;
}

.custom-checkbox.checked {
    @apply bg-indigo-500 border-indigo-500;
}

.custom-checkbox.checked::after {
    content: '';
    @apply block w-2 h-2 bg-white rounded-sm;
}